8.在Vue中v-on指令绑定事件

绑定的事件处理函数必须定义到VM实例的methods属性中

<div>
    <input type="button" value="点击我" v-on:click="add">
    <input type="button" value="点击我" @click="add"><!-- 简写形式@ -->
    <input type="button" value="点击我" v-on:click="add(1,2,3)"><!-- 有括号可以传参数 -->
    <h3>{{ weight }}斤</h3>
</div>

<script>
var vm=new Vue({
    el:"#app",
    data:{
        weight:10
    },
    methods:{//这个methods属性中，可以定义好多的事件处理函数
        add(){//对象中，定义函数属性的简写形式，完整形式是add:function(){}
            console.log("ok123")
            console.log(this.weight)//在methods中，如果要访问data中的值，只需要通过this.***来访问
            this.weight+=3    //注意：当data中的数据变化之后，VM调度者监听到，然后自动把最新的数据应用到页面上
        }
        add(arg1,arg2,arg3){//对象中，定义函数属性的简写形式,带参数
            console.log("ok123"+arg3)
        }
        add(...args){//对象中，定义函数属性的简写形式,带参数,无论多少个参数，数组形式放在里面
            console.log("ok123")
            console.log(args)
        }
    }
})
</script>