Vue点击事件,使用v-on开头。Vue的事件很多很丰富,
点击事件
给button标签设置点击事件:
<div id="app-5">
<p>{{ message }}</p>
<button v-on:click="reverseMessage">点击替换P标签中的数据</button>
</div>
说明:其中 v-on:click表示绑定点击事件。reverseMessage是一个Vue定义的方法,方法定义如下:
<script type="text/javascript">
/*第三步*/
var app5 = new Vue({
el: '#app-5',
data: {
message: 'Hello Vue.js!'
},
methods: {
reverseMessage: function () {
this.message = "qianfeng";
}
}
})
</script>
说明:
1、el和data前面章节已经介绍过,主要是methods,它是用来定义方法的,reverseMessage是方法的名称。
2、 this.message中的this是app5这个对象,message是data中定义的变量名称。(仔细看var app5 = new Vue这句话是不是跟Java中的匿名类的写法比较像,学过Java的话,这个应该好理解。)
效果:点击按钮会将p标签原本的内容修改为qianfeng。
学习前端最好的方式就是动手用一用,效果出来了就明白了。