01_双向数据绑定原理
2018-02-05 本文已影响0人
CHENPEIHUANG
双向数据绑定原理：
1)Vue实例上的所有data属性都会被Vue实例代理，而且是严格相等
2)这些data属性在Vue内部会通过Object.defineProperty的getter/setter进行依赖追踪
3)当用户修改了对应的属性值时，内部就会自动的触发setter方法
4)在setter方法中将数据的更新告知通知者，通知者就会将数据更新广播给每一个数据的watcher
5)watcher收到通知后判断对应数据是否发生，如果发生变化就会触发虚拟DOM进行更新，虚拟DOM更新后又会自动更新真实DOM
<!DOCTYPE html>
<html lang="zh">
<head>
<title>Document</title>
</head>
<body>
<div id="app">
<!--用插值渲染，刷新网页会闪插值-->
<p>{{msg}}</p>
<!--用指令渲染-->
<p v-text="msg"></p>
<!--用v-model双向数据绑定-->
<input type="text" v-model="msg" /><br /><br />
<!--用v-on调用方法-->
<!--v-on指令用于将表达式绑定到指定的事件上
必要参数，指定的绑定事件类型，如click，mouseup，keyup...
指令格式：
指令名称：指令参数.指令修饰符1.指令修饰符2
-->
<button v-on:click="show()">Vue按钮</button><br /><br />
<!--在Vue中元素的属性设置变量时，不能通过插值{{}}设置
而是使用v-bind：属性名设置，属性值为变量
v-bind：type/value/class/id="xxx"
-->
<!--用v-bind修改type类型-->
<input type="text" value="clickMe!" v-bind:type="changeType"/><br /><br />
<!--用v-bind修改value类型-->
<input type="text" value="hello" v-bind:value="changeValue"/>
</div>
<script src="js/vue.js"></script>
<script>
var vm = new Vue({
el:"#app",
data:{
msg:"hello",
changeType:"button",
changeValue:"importMe!"
},
//方法须定义在methods属性上
methods:{
show:function(){
alert("用v-on指令调用方法 成功！")
}
}
})
</script>
</body>
</html>
