Vue模板语法——v-model 双向数据绑定

双向数据绑定

1. 单向数据绑定是什么？

   数据模型（Module）和视图（View）之间的单向绑定。

   需要我们先写好模板，然后把模板和数据（可能来自后台）整合到一起形成HTML代码，然后把这段HTML代码插入到文档流里面。 简单的来说就是DOM操作html元素。

   单向数据绑定的缺点：一旦HTML代码生成好后，就没有办法再进行改变了，如果有新的数据出现，那就必须要先把之前的HTML代码删掉，然后重新把新的数据和模板一起整合形成新的HTML代码，再插入到文档流中。

2. 双向数据绑定是什么？

   数据模型和视图之间的双向绑定。

   当数据发生变化的时候，视图也就发生变化，当视图发生变化的时候，数据也会跟着同步变化；可以这样说用户在视图上的修改会自动同步到数据模型中去，数据模型也是同样的变化。

   双向数据绑定的优点：无需和单向数据绑定那样进行CRUD（Create，Retrieve，Update，Delete）操作，双向数据绑定最常应用在就表单上，这样当用户在前端页面完成输入后，不用任何操作，我们就已经拿到了用户输入好的数据，并放到数据模型中了。

3. 原生js实现简单的双向数据绑定

   <input type="text" id="userName">
   
   <span id ="uName"></span>
   
   <script>
   
       var obj={
   
           pwd:"1234"
   
       };
   
       //主要使用到了get和set方法，最为关键
   
       Object.defineProperty(obj,"userName",{
   
           get:function(){
   
               console.log('get init');
   
           },
   
           set:function(val){
   
               console.log("set init");
   
               document.getElementById("uName").innerText=val;
   
               document.getElementById("userNmae").value=val;
   
           }
   
       });
   
           document.getElementById("userName").addEventListener("keyup",function(event){
   
           obj.userName=event.target.value;
   
       })
   
   </script>
   
   

4. v-model

   实现双向数据绑定

二、v-model双向数据绑定

1. v-model用法

   在需双向数据绑定的标签中添加v-model指令

2. 例子

    <div id="app">
        <div>
            {{msg}}
        </div>
        <input type="text" v-model="msg"/>
    </div>
    <script src="./js/vue.js"></script>
    <script type="text/javascript">
        new Vue({
            el:'#app',
            data:{
                msg:'HelloWorld'
            }
        })
    </script> 

三、MVVM设计思想————分而治之

• M(Model)——————数据————Javascript对象
• V(View)———————视图————HTML的DOM
• VM(View-Model)———通讯————观察者、核心、桥梁