01_双向数据绑定原理

双向数据绑定原理：
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>

最后编辑于：2018.03.06 03:41:20