6.vue事件绑定-click

1.vue的事件绑定格式是v-on: 或者@

比如

<button v-on:click="counter += 1">Add 1</button>

 或者是

<button  @click="counter += 1">Add 1</button>是一样的

2.事件处理方法，要在methos中定义。比如

methods:{
clickMe(){
 console.log('我是methods中的方法 clikMe')
}
}

3.以下是案例代码， 

<div id="app">
<div id="example-1">
<button v-on:click="counter += 1"> 数值 : {{ counter }} </button><br />
<button v-on:dblclick="greet('abc', $event)">Greet</button>
<button type="button" @click="clickMe">点击一下: {{num}}</button>
</div>
</div>
<script type="text/javascript">
var vm = new Vue({
el : "#app",
data : {
counter: 0,
name : "vue",
num: 1
},
methods:{
greet : function (str, e) {
alert(st);
console.log(e);
},
greet(str, e){
alert(str);
console.log(e);
},
clickMe(){
this.num++
}
}
});
</script>

以上可分析

1.事件逻辑可直接写在代码中，触发时直接运行一些JavaScript代码

<button v-on:click="counter += 1"> 数值 : {{ counter }} </button><br />

2. 通过事件传参，可以在事件中获取需要得到的信息

3. 可以通过事件改变数值进行渲染，通过this形式，直接修改data中的属性值

事件处理往往不是这么简单，但是这是最基本的，我们需要了解最基本的需求，其他是通过完善逻辑即可