## Vue实例 比如，html中有 ``` html ``` 在js中 ``` javascript new Vue({ el:'#app', data:{}, methods:{} }); ``` 其中， - el 就是element，指定那个节点就行 - data,就是将要使用的数据， * vue有数据绑定的功能 - methods,提供的方法 * 事件触发可以使用 * 计算属性可以使用 ## event 使用`v-on:click="function_name"` 的方式来处理事件 `v-on` 可以用 `@` 代替 比如 ``` html ``` ``` javascript var vw = new Vue({ el:'#app', data:{ age:10, x:0, y:0 }, methods:{ add:function (){ this.age++; }, substract:function (){ this.age--; }, updateXY:function (event){ this.x = event.offsetX; this.y = event.offsetY; } } }); ``` 我们也是可以给函数传参数的。 ## 计算属性 在html中使用计算属性 ``` html {{function()+'asda'+a}} ``` 当然也可以使用`watch`的方式来手动更新值比如官网上的例子： ``` javascript var vm = new Vue({ el: '#demo', data: { firstName: 'Foo', lastName: 'Bar', fullName: 'Foo Bar' }, watch: { firstName: function (val) { this.fullName = val + ' ' + this.lastName }, lastName: function (val) { this.fullName = this.firstName + ' ' + val } } }); ```