Vue的传值方式(二)——双向数据绑定【v-model】

原理

采用数据劫持结合发布者-订阅者模式的方式,通过**Object.defineProperty()**来劫持各个属性的setter,getter,在数据变动时发布消息给订阅者,触发相应监听回调。当把一个普通 Javascript 对象传给 Vue 实例来作为它的 data 选项时,Vue 将遍历它的属性,用 Object.defineProperty 将它们转为 getter/setter。用户看不到 getter/setter,但是在内部它们让 Vue 追踪依赖,在属性被访问和修改时通知变化。

vue的数据双向绑定 将MVVM作为数据绑定的入口,整合Observer,Compile和Watcher三者,通过Observer来监听自己的model的数据变化,通过Compile来解析编译模板指令(vue中是用来解析 {{}}),最终利用watcher搭起observer和Compile之间的通信桥梁,达到数据变化 —>视图更新;视图交互变化(input)—>数据model变更双向绑定效果。

js代码实现:

<body>
    <input type="text" id="ipt">
    <p id="op"></p>
    <script>
        let obj = {}
        let val = ""
        Object.defineProperty(obj,"iptValue",{
            get(){
                return val
            },
            set(newValue){
                ipt.value = newValue
                op.innerText = newValue
            }
        })
        ipt.value = obj.iptValue
        op.innerText = obj.iptValue
        ipt.addEventListener("keyup",function(e){
            obj.iptValue = e.target.value
        })
    </script>
</body>

Vue的v-model的使用

vue中使用v-model指令来绑定视图和数据,通过数据的改变来影响视图,达到相应的视图效果
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title></title>
    <script src="https://cdn.jsdelivr.net/npm/vue"></script>
</head>
<body>
    <div id="app">
        <input type="text" v-model="val">
        <p>{{val}}</p>
        <!-- 双向数据绑定---v-model总结
        1、配合表单使用
        2、v-model的值就是data中的变量
        3、视图的val就是表单的val  用户改变表单输入框的value值,就改变了视图的变量的值
        -->

        <select name="" id="" v-model="selVal">
            <option value="bj">北京</option>
            <option value="sh">上海</option>
            <option value="gz">广州</option>
        </select>
        <p>{{selVal}}</p>
    </div>
    <script>
        new Vue({
            el:"#app",
            data:{
                val:'默认值',
                selVal:'sh'
            }
        })
    </script>
</body>
</html>

注意:实际应用中可以通过v-model结合中央事件总线或父子组件传值或vuex或本地存储来达到不同效果,必须根据需求活学活用。

你可能感兴趣的:(Vue开发应用,vue,web开发)