Vue Instance#
For example, in HTML:
<div id='app'>
</div>
In JavaScript:
new Vue({
el:'#app',
data:{},
methods:{}
});
Where:
- el is the element, specifying which node to use.
- data is the data to be used.
- Vue has data binding functionality.
- methods provide methods.
- Event triggers can be used.
- Computed properties can be used.
Event#
Use v-on:click="function_name" to handle events.
v-on can be replaced with @.
For example:
<div id="app">
<h1>age: {{age}}</h1>
<button 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;
}
}
});
We can also pass parameters to functions.
Computed Properties#
Use computed properties in HTML:
<a>{{function()+'asda'+a}}</a>
Of course, you can also manually update values using watch, as shown in the example on the official website:
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
}
}
});