vue学习 5vue事件，点击、双击、鼠标事件

vue中绑定事件：v-on:click="add(1)"，使用v-on:绑定一个事件（也可以用@符号，如@click="add(1)"）,(如点击事件，触发add()方法)

html

    
    
    
    


    
    

        
Event
        涨一岁
        减一岁
        涨十岁
        减十岁
        
他的年龄是{{age}}
        
{{x}}, {{y}}
    
    

app.js

'use strict';
// 实例化vue对象
new Vue({
    el: "#vue-app",
    data: {
        age: 30,
        x: 0,
        y: 0
    },
    methods: {
        add: function(inc){
            this.age+=inc;
        },
        subtract: function(dec){
            this.age-=dec;
        },
        updateXY: function(event){
            this.x = event.offsetX;
            this.y = event.offsetY;
        }
    }
});

/**
 *el: element 需要获取的元素，一定是html中的根容器元素
 *data:用于数据（字符串、number、数组、对象...）的存储的一个对象，自定义key和value。value可以是字符串、number、方法、数组、对象...
 *methods: 用于存储各种方法的一个对象
 **/