v-on的作用是为元素绑定监听事件
标准写法是：v-on:事件名="函数名"，
也可以简写成：@事件名='函数名'。
v-on绑定的事件触发后，methods对应的函数将触发。
不仅可以绑定鼠标事件，也可以绑定键盘事件
获取按键的内容
v-on:事件名后可以跟修饰符
常用的修饰符有
1、once：仅执行1次。
2、prevent：禁止默认行为
3、stop：在嵌套过程中，当多个元素响应同一个事件，防止发生冒泡。
4、self：避免自身受其他元素事件影响。
5、capture：添加事件侦听器。
举2个例子：
以上示例源码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Vue前端入门，第11节 鼠标事件与键盘事件，事件修饰符的使用</title>
<script src="js/vue.js"></script>
<script src="js/axios.js"></script>
</head>
<body>
<div id="app">
<p>{{text}}</p>
<p><input type="button" value="单击事件：v-on:click" v-on:click="btnClick"></p>
<p><input type="button" value="单击事件：@click" @click="btnClick"></p>
<p><input type="button" value="双击事件：v-on:dblclick" v-on:dblclick="dblclick"></p>
<p><input type="button" value="双击事件：@dblclick" @dblclick="dblclick"></p>
<p><input type="button" value="鼠标移入：@mouseenter" v-on:mouseenter="mouseenter"></p>
<p><input type="button" value="鼠标移出：@mousemove" v-on:mousemove="mousemove"></p>
<p>按键抬起：@keyup<input type="text" v-on:keyup="keyup"></p>
<p>按键按下：@keypress<input type="text" v-on:keypress="keyup"></p>
<p>输入内容后按下回车键后响应：@keydown.enter<input type="text" v-on:keydown.enter="keyup"></p>
<p><input type="button" value="单击事件,仅响应一次：v-on:click" v-on:click.once="btnClickonce"></p>
<p><a :href="link" v-on:click.prevent="click_prevent">链接</a></p>
</div>
<script>
Vue.config.productionTip = false
new Vue({
el: "#app",
data: {
"text": "Vue前端入门，第9节 v-text的简单学习",
"link": "https://www.toutiao.com/a7054397948972548639/",
"content": `<a href="https://www.toutiao.com/a7054397948972548639/">Vue前端入门，第9节 v-text的简单学习</a>`
},
methods: {
btnClick: function () {
this.text = "单击事件"
},
dblclick: function () {
this.text = "双击事件"
},
mouseenter: function () {
this.text = "鼠标进入"
},
mousemove: function () {
this.text = "鼠标移出"
},
keyup: function (e) {
console.log(e.keyCode) //获取键盘码
console.log(e.key) //获取按键
console.log(e.target.value)//获取对应的value的值
},
btnClickonce: function (e) {
console.log(e.target.value)//获取对应的value的值
},
click_prevent: function (e) {
console.log("click_prevent")//获取对应的value的值
},
}
})
</script>
</body>
</html>
本文暂时没有评论，来添加一个吧(●'◡'●)