Vue中v-model的使用和原理

v-model的特点：

双向数据绑定：从数据到视图，从视图到数据

v-model在一些常用标签中的使用：

• v-model与标签里的value属性进行双向绑定

<div id="app">
		// input输入框
      <input type="text" placeholder="输入内容" v-model="message" />
      <p>{{message}}</p>
      	// textarea文本框
      <textarea v-model="message2" cols="30" rows="10"></textarea>
      <p>{{message2}}</p>
      //多组的勾选框，收集到的值应该用数组收集
      <div style="margin-top: 20px">
        <input type="checkbox" id="jack" value="Jack" v-model="checkedNames" />
        <label for="jack">Jack</label>
        <input type="checkbox" id="John" value="John1" v-model="checkedNames" />
        <label for="John">John1</label>
        <input type="checkbox" id="Mike" value="Mike1" v-model="checkedNames" />
        <label for="Mike">Mike1</label>
        <p>{{checkedNames}}</p>
      </div>
      	// 单选框
      <div style="margin-top: 20px">
        <input type="radio" id="one" value="One" v-model="picked" />
        <label for="one">One</label>
        <input type="radio" id="two" value="Two" v-model="picked" />
        <label for="two">Two</label>
        <p>{{picked}}</p>
      </div>
    </div>
    <script>
      const vm = new Vue({
        el: "#app",
        data() {
          return {
            message: "",
            message2: "",
            checkedNames: [],
            picked: "",
          };
        },
      });

执行结果如下：

v-model双向绑定的原理：

• 从数据到视图：利用Es5的Object.defineProperty方法进行数据劫持。
• 从视图到数据：为添加v-model的元素添加input监听事件，实时获取input的value值。
  从数据到视图：

	let person = {
	        name: "张三",
	        sex: "男",
	      };
	      //对person对象进行了数据劫持
      Object.defineProperty(person, "age", {
         value: 19,
        // enumerable: true, //控制属性是否可以枚举,默认值为flase
        // writable: true, //控制属性是否可以被修改默认值是flase
        // configurable: true, //控制属性是否可以被删除，默认值是flase

        //当有人读取person的age属性时,get函数(getter)就会被调用
        get(){
            console.log('有人读取age属性了');
        },
        
        //当有人修改person的age属性时，set函数（setter）就会被调用，且会收到修改的具体值
        set(Newvalue){
            console.log('有人修改age属性了，且值为',Newvalue);
            //在此处将修改后的值重新赋值给data中对应的属性，从而引起页面更新
        }
      });

从视图到数据：

• 给input添加监听事件

 <input type="text" v-model="data1">

let input = document.querySelector('input');
      input.addEventListener('input',function(e){
      // newValue为输入框中现在的值
        let newValue = e.target.value;
        //在此处操作，将新文本值赋值给data里面对应的属性，即可引起从视图改变到数据的更新
      })