比如,html中有
<div id='app'>
</div>
在js中
new Vue({
el:'#app',
data:{},
methods:{}
});
其中,
使用v-on:click="function_name"
的方式来处理事件
v-on
可以用 @
代替
比如
<div id="app">
<h1>age: {{age}}</h1>
<butto v-on:click="add">add</button>
<button v-on:click="substract">mines</button>
<div id="canvars" @mousemove="updateXY">
{{x}},{{y}}
</div>
</div>
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中使用计算属性
<a>{{function()+'asda'+a}}</a>
当然也可以使用watch
的方式来手动更新值比如官网上的例子:
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
}
}
});