v-model相当于一个自定义指令，通过事件监听和属性绑定实现双向数据绑定。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script src='./node_modules/vue/dist/vue.js'></script>
<script src='./node_modules/vue-resource/dist/vue-resource.js'></script>
</head>
<body>
<div id='app'>
<input :value="msg" @input="msg = $event.target.value" />
<span>{{msg}}</span>
<button @click="change">改变msg</button>
</div>
<script>
var vm=new Vue({
el:'#app',
data:{
msg:'',
},
methods:{
change(){
this.msg = 'hello'
}
}
})
</script>
</body>
</html>
- 使用
:value绑定msg到input上
- 使用
- 使用
@input监听输入事件，当输入时把输入的内容又赋值给msg
- 使用
总结：
- data -> view : 通过v-bind实现数据绑定
- view -> data : 通过oninput监听输入并修改data
扩展：在子组件中实现v-model
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script src='./node_modules/vue/dist/vue.js'></script>
<script src='./node_modules/vue-resource/dist/vue-resource.js'></script>
</head>
<body>
<div id='app'>
<myModel :value="msg" @input="change"></myModel>
<span>{{msg}}</span>
<button @click="msg='default'">修改data</button>
</div>
<script>
let myModel = {
template:`<div>
<input
:value="value"
@input="$emit('input',$event.target.value)">
</input>
</div>`,
props:['value']
}
var vm=new Vue({
el:'#app',
components:{
mymodel:myModel
},
data:{
msg:'',
},
methods:{
change(val){
this.msg = val;
}
}
})
</script>
</body>
</html>
- 在子组件中只不过是添加了父子组件传值的过程而已
其中<myModel :value="msg" @input="change"></myModel>
等价于<myModel v-model="msg"></myModel>
