作用:将视图(元素)和模型(数据)进行双向绑定。
什么是双向绑定?
视图改变模型也会改变。
模型改变视图也会改变。
语法:
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="./node_modules/vue/dist/vue.min.js"></script>
</head>
<body>
<div id="demodiv">
<h1>v-model</h1>
<input type="text" v-model="inputval"/>
<h1>{{inputval}}</h1>
</div>
<script>
new Vue({
el:"#demodiv",
data:{
inputval:""
}
})
</script>
</body>
</html>
双向绑定的原理?
Vue.js是通过发布者订阅者模式和数据劫持实现的。
实现原理:
1.vue会通过Object.defineProperty()方法将data对象的属性转换为getter和setter。
2.当data的属性被访问时,会触发getter方法,会将Watcher对象添加到订阅者列表中。
3.当data的属性被修改时,会触发setter方法,setter会通知订阅者列表中的Watcher对象,Watcher对象会通知相关的视图进行更新。
4.当视图中的表单元素被修改时,会触发相应的事件,vue会通过v-model指令会将修改过的值赋给data对象中的属性,从而实现vue的双向绑定。
数据劫持:数据拦截 就是对data中的数据在初始化的时候监听起来(Object.defineProperty 来进行监听/代理) 当数据改变setter之后 vm就会知道 在视图改变getter 他就会通知模型你要修改了 模型改变了也会通知视图改变。
发布者订阅者模式:就是一个一对多的关系 发布者就是数据提供者 订阅者就是页面展示的 一个发布者可以对应无数个订阅者 但是发布者改变了 所有订阅者也会改变。