也就是关于如何利用vue为元素绑定事件。
如下
利用v-on为元素绑定事件。之后紧跟事件，再之后就是一个方法名，或者直接是整个方法（简单的话）。
触发一个表达式
<div id="app">
<button v-on:click="counter += 1">增加 1</button>
<p>这个按钮被点击了 {{ counter }} 次。</p>
</div>
<script>
new Vue({
el: '#app',
data: {
counter:0,
}
})
结果没点击一次按钮p中的{{ counter }}代表的数字就加1.
再比如，注意格式，函数名字写在最前面，之后冒号，之后定义函数。函数里面的内容和js的语法是完全一样的。
触发一个方法函数
<div id="app">
<button v-on:click="say('hi')">Say hi</button>
<button v-on:click="say('what')">Say what</button>
</div>
<script>
new Vue({
el: '#app',
methods: {
//在 `methods` 对象中定义方法
say: function (xx) {
alert(xx)
}
}
})
结果
image.png
如何获取event对象？
原生js是可以获取 event对象的，具体看这里
event对象 - 简书
event对象 - 简书
vue中event对象和原生js中的event对象是一样的，各种属性也是一样的，比如type用来获取事件类型，本例中是click。
<script>
var app = new Vue({
el: '#app',
data: {
name: 'Vue.js'
},
// 在 `methods` 对象中定义方法
methods: {
greet: function (event) {
// `this` 在方法里指当前 Vue 实例
alert('Hello ' + this.name + '!')
// `event` 是原生 DOM 事件
if (event) {
alert(event.type);//type获取事件类型
alert(event.target);//获得激发事件的元素
alert(event.clientX);//获取x轴坐标
}
}
}
})
// 也可以用 JavaScript 直接调用方法
app.greet() // -> 'Hello Vue.js!'
</script>
