<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <script src="vue2.2.js"></script> </head> <body> <div id="app"> <input type="text" v-model="userName" /> <input type="text" V-model.lazy="msg" /> <input type="text" V-model.number="num" /> <p>{{userName}}</p> <p>{{msg}}</p> <p>{{num}}</p> <!--.lazy：取代 imput 监听 change 事件。 .number：输入字符串转为数字。 .trim：输入去掉首尾空格。--> <!--通过v-once指令能执行一次性的插值，当数据变化时，插值处的内容不会更新。--> <p v-once>一次改变{{userName}}</p> </div> <script> var vm = new Vue({ el: "#app", data: { userName: "张三", msg: "懒加载", num: "222222" } }) vm.userName = '李四' </script> </body> </html>
双向绑定原理：
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>vue双向绑定的核心原理getter和setter</title> </head> <body> <input type="text" id="inp" value="admin" /> <script> var inp = document.getElementById("inp"); Object.defineProperty(inp, "v-model", { //对象自定义按键修饰符别名 set: function(val) { this.value = val //this指的是input }, get: function() { return this.value; } }) console.log(inp['v-model']) inp["v-model"] = "hello" //vue就是利用这个set/get进行双向绑定,为什么我们一直要说是setter/getter //因为setter与getter是面向对象语言中的一个特性,利用getter可以获取对象的属性,利用setter可以设置对象的属性. </script> </body> </html>