<! DOCTYPE HTML > < HTML lang = "EN" > < head > < Meta charset = "UTF-. 8" > < Meta name = "the viewport" Content = "width = width-Device, User-Scalable = NO, initial- = 1.0 Scale, maximum-Scale = 1.0, 1.0 Minimum-Scale = " > < Meta HTTP-equiv =" X--the UA-Compatible " Content =" IE = Edge " > < title > attribute binding and two-way data binding, and the listener properties calculation </ title > <script src="vue.js"></Script > </ head > < body > <-! binding property with v-bind: attribute name = "data values vue instance" (which v-bind: :) may be abbreviated as two-way binding used a v-model method used was listening watch, can be achieved by self-page -> < div the above mentioned id = "root" > < div : title = "title" > the Hello Word </ div > < the INPUT of the type = "text" Model-V = "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>