Skip to content

[vue] 你知道v-model的原理吗?说说看 #560

Open
@haizhilin2013

Description

@haizhilin2013
Collaborator

[vue] 你知道v-model的原理吗?说说看

Activity

zyronon

zyronon commented on Jul 2, 2019

@zyronon

原生input其实只是一个语法糖,:bind="value"与@change="value = $event.target.value"的结合。
自定义组件的时候的v-model默认监听change事件和绑定value 的prop。

Myh-cs

Myh-cs commented on Jul 9, 2019

@Myh-cs

监听的事件 以及绑定的属性 可以通过model设置为其他的。

encountermm

encountermm commented on Jul 15, 2019

@encountermm

v-model只不过是一个语法糖而已,真正的实现靠的还是

  • v-bind:绑定响应式数据

  • 触发 input 事件 并传递数据 (核心和重点)

Gloomysunday28

Gloomysunday28 commented on Jul 24, 2019

@Gloomysunday28

v-model是个语法糖:
v-bind:value="value"
v-on:input="e => value = e.target.value"
因为V-model并不仅限于Form表单, 目前还支持更改事件名称和变量名称
model: {
prop: 'checked',
event: 'change'
}

YuJinLei

YuJinLei commented on Aug 23, 2019

@YuJinLei

原生input其实只是一个语法糖,:bind="value"与@change="value = $event.target.value"的结合。
自定义组件的时候的v-model默认监听change事件和绑定value 的prop。

v-model是默认使用组件的valueprop和input事件

aver803bath5

aver803bath5 commented on Sep 19, 2019

@aver803bath5

v-model 為一個語法糖,Vue 會默認使用一個名為 valueprop,以及名為 input 的事件。

為了避免不同的 value 有不同的作用,現在可以使用下面的方式自訂義自己想要的 v-model 行為。

model: {
  prop: 'checked',
  event: 'change'
}

如果想要更改 checked 這個 prop 可以在 Vue 的 instance 中用以下這行程式發送 change 這個 event,並將目標的變動值傳給 checked 這個 prop

this.$emit('change', $event.target.value);
tw19920521

tw19920521 commented on Oct 9, 2019

@tw19920521

标签上使用```
<input type="text" :value="msg" @input="msg=$event.target.value">

{{msg}}

```
xiaXzhi

xiaXzhi commented on Oct 31, 2019

@xiaXzhi

v-model本质上是语法糖,即利用v-model绑定数据,其实就是既绑定了数据,又添加了一个input事件监听
image

wush12

wush12 commented on Nov 5, 2019

@wush12

v-model是一个语法糖,对应组件内部实现的话,props传value,触发用$emit('input')

molifei

molifei commented on Dec 4, 2019

@molifei

v-model本质上是语法糖,其实就是既用v-bind:value绑定了数据,又用v-on:input添加了一个事件监听

xjphhh

xjphhh commented on Dec 11, 2019

@xjphhh

v-model是:value="msg" @input="msg=$event.target.value"的语法糖,其中:value="msg"是绑定了数据,value就是input输入框里的值;@input="msg=$event.target.value"就是监听input输入框里值的变化,然后改变值。一句话概括就是,绑定数据并且监听数据改变

benbtx

benbtx commented on Mar 13, 2020

@benbtx

<input v-bind:value="msg" v-on:input="msg=$event.target.value" />

cherry728

cherry728 commented on Jun 15, 2020

@cherry728

v-model其实是语法糖,实现了给表单元素绑定value和相应的事件。源码里面对v-model编译后,实质上在实例的on属性上添加了回调函数,最后都是执行addEventListener。

Monseyliu

Monseyliu commented on Jun 27, 2020

@Monseyliu

实质上来说是一种封装或者说是语法糖,负责监听用户的输入事件,并更新数据。

7 remaining items

Loading
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Metadata

Metadata

Assignees

No one assigned

    Labels

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

      Development

      No branches or pull requests

        Participants

        @haizhilin2013@cherry728@aver803bath5@ilss@xiaXzhi

        Issue actions

          [vue] 你知道v-model的原理吗?说说看 · Issue #560 · haizlin/fe-interview