也就是關(guān)于如何利用vue為元素綁定事件。
如下
利用v-on為元素綁定事件。之后緊跟事件，再之后就是一個方法名，或者直接是整個方法（簡單的話）。
觸發(fā)一個表達(dá)式
<div id="app">
<button v-on:click="counter += 1">增加 1</button>
<p>這個按鈕被點(diǎn)擊了 {{ counter }} 次。</p>
</div>
<script>
new Vue({
el: '#app',
data: {
counter:0,
}
})
結(jié)果沒點(diǎn)擊一次按鈕p中的{{ counter }}代表的數(shù)字就加1.
再比如，注意格式，函數(shù)名字寫在最前面，之后冒號，之后定義函數(shù)。函數(shù)里面的內(nèi)容和js的語法是完全一樣的。
觸發(fā)一個方法函數(shù)
<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)
}
}
})
結(jié)果
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` 在方法里指當(dāng)前 Vue 實(shí)例
alert('Hello ' + this.name + '!')
// `event` 是原生 DOM 事件
if (event) {
alert(event.type);//type獲取事件類型
alert(event.target);//獲得激發(fā)事件的元素
alert(event.clientX);//獲取x軸坐標(biāo)
}
}
}
})
// 也可以用 JavaScript 直接調(diào)用方法
app.greet() // -> 'Hello Vue.js!'
</script>
