一、看一个例子:
<html>
<head>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<div id="app">
<input type="button" value="事件绑定" v-on:click="doIt">
<input type="button" value="v-on简写" @click="doIt">
<input type="button" value="双击事件" @dblclick="doIt">
<h2 @click="changeFood">{{food}}</h2>
</div>
<script>
var app = new Vue({
el: '#app',
data: {
food: '西红柿炒鸡蛋'
},
methods: {
doIt: function () {
//逻辑
alert("做it");
},
changeFood: function () {
this.food += "好好吃"
}
},
})
</script>
</body>
</html>
结果:
点击事件绑定或者v-on简写或者双击事件,会:
点击西红柿炒鸡蛋:
说明:v-on可以为标签绑定事件,语法:v-on:事件名="方法名" ,可以使用@事件名="方法名"进行简写。改变标签里的内容可以利用this进行修改,内容会同步更新。
二、使用带参数的函数和事件修饰符
<html>
<head>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<div id="app">
<input type="button" value="按钮" @click="doIt(1,2)">
<input type="text" @keyup.enter="sayHi">
</div>
<script>
var app = new Vue({
el: '#app',
data: {
arr: ['mike', 'bob', 'tom', 'jack'],
arr2: [{ color: 'red' }, { color: 'blue' }, { color: 'yellow' }],
},
methods: {
doIt: function (p1, p2) {
alert(p1 + p2);
},
sayHi: function () {
alert("你好啊");
},
},
})
</script>
</body>
</html>
效果:
点击按钮:
说明:在html标签中使用v-on时,参数保持一致即可。
在输入框中随便输入什么,按下回车键:
说明:v-on还可以使用各种各样的事件,具体可参考文档。