使用v-on指令監(jiān)聽DOM事件
事件
監(jiān)聽事件：
可以使用v-on指令監(jiān)聽DOM事件除秀，并在觸發(fā)時運(yùn)行一些javaScript代碼。
語法格式:
v-on:click="表達(dá)式"
語法糖格式：
@click="表達(dá)式"
其中栗弟，表達(dá)式可以直接使用javafScript語句，也可以是一個在Vue實例中methods選項內(nèi)的方法名： funcName(param)
代碼示例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<!--引入最新的vue穩(wěn)定版本-->
<script type="text/javascript" src="https://unpkg.com/vue/dist/vue.min.js"></script>
<link rel="stylesheet" href="./css/style.css" type="text/css">
</head>
<body>
<div id="app">
點(diǎn)擊次數(shù)為： {{counter}}
<button v-on:click="handleAdd(1)">點(diǎn)擊按鈕加1</button>
<button v-on:click="handleAdd(10)">點(diǎn)擊按鈕加10</button>
</div>
<script>
var vue=new Vue({
el:'#app',
data:{
counter: 0
},
methods: {
handleAdd: function (count) {
count=count || 1;
this.counter=this.counter+count;
}
}
});
</script>
</body>
</html>
-注釋說明
在methods中我們定義了我們需要的方法供@click調(diào)用工闺，需要注意的是乍赫，@click調(diào)用的方法名后可以不跟括號"()"。
此時陆蟆，如果該方法有參數(shù)雷厂，默認(rèn)會將原生事件對象event傳入。在大部分業(yè)務(wù)場景中叠殷，如果方法不需要傳入?yún)?shù)改鲫，為了
簡便可以不寫括號。
運(yùn)行結(jié)果：
v-on指令進(jìn)行事件處理
