vue指令v-model
Posted guojuboke
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了vue指令v-model相关的知识，希望对你有一定的参考价值。
理论知识
- 双向数据绑定
- 数据绑定指数据和变量关联，两者内容一致。
- 双向即两个方向。
- 方向一 通过插值表达式，html标签绑定中vue实例对象的data属性中的变量，即获取变量并显示，此时时模型的值向网页输出。
- 方向二 通过v-model指令，将能够获取用户操作值的网页标签同vue实例对象的data属性中的变量绑定，即修改变量值，此时是修改模型的值。例如，微博输入评论。
- vue实例对象的data属性的变量是这两个方向的传递者， 用户操作<----v-model--->data变量<-----{{插值表达式}}--->网页内容显示
- mvvm设计思想
- 这是一种理论思想，有不同的实现方式。vue是其中的一种。
- m(model),数据模型，plain javascript object。在vue实例的data属性即是模型的实现。
- v(view),视图。广泛指dom元素。
vm(view-model),数据模型关联视图。在vue中底层通过dom listener和data binding,上层通过v-xx系列指令实现view和model的关联,即双向数据绑定。
dom listener是方向二，data binding是方向一。
实践
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" src="vue.js"></script>
</head>
<body>
<div id="app">
<div >{{ msg}} </div> //获取变量的值
<input v-model='msg'> //获取用户输入数据，还有下拉框、单选框等
</div>
<script type="text/javascript">
var app = new Vue({
el: '#app',
data:{
msg:'123'
}
})
</script>
</body>
</html>总结
- 指令的本质是vue作者自定义的网页标签属性。因此他的位置是在标签的左尖括号内部。
以上是关于vue指令v-model的主要内容，如果未能解决你的问题，请参考以下文章