<!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>属性绑定和双向数据绑定、计算属性和侦听器</title> <script src="vue.js"></script> </head> <body> <!-- 绑定属性用 v-bind:属性名="vue实例中的data值"(这其中v-bind:可以缩写成:) 双向绑定用到的是 v-model 监听用到的方法是watch，可以实现页面自增 --> <div id="root"> <div :title="title">Hello Word</div> <input type="text" v-model="title"> <div v-text="title"></div> </div> <div id="foo"> 姓：<input type="text" v-model="firstName"> 名：<input type="text" v-model="lastName"> <p>您输入的是：{{fullName}}</p> <p>{{count}}</p> </div> <script> new Vue({ el:"#root", data:{ title : "可变性的title" } }); new Vue({ el:"#foo", data:{ firstName:"", lastName:"", count:0 }, computed:{ fullName:function () { return this.firstName + this.lastName; } }, watch:{ firstName:function () { this.count++; }, lastName:function () { this.count++; } } }); </script> </body> </html>