Vue复习5：v-on
怎样监听dom的事件呢？可以通过v-on指令完成，具体代码如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<div id="app">
<span>{{name}}</span>
<!-- 通过v-on来指定对应的事件，然后后面跟上对应的方法名，方法的定义在methods完成 -->
<button v-on:click="changeName">更换姓名</button>
</div>
<script>
var vm = new new Vue({
el: '#app',
data: {
name: 'zhangsan'
},
// 通过methods完成函数或方法的定义
methods: {
changeName() {
// 在methods中要获取data中的属性，需要通过this来完成，this表示的是vue实例。
this.name = "itcast"
}
}
})
</script>
</body>
</html>
我们知道v-on可以简写为@,所以我们可以通过简写的形式，建议都使用简写的形式
<button @click="changeName">更换姓名</button>
带参数的形式如下：
<button @click="changeNameByArg('laowang')">带参数的情况</button>
<script>
var vm = new new Vue({
el: '#app',
data: {
name: 'zhangsan'
},
// 通过methods完成函数或方法的定义
methods: {
changeName() {
// 在methods中要获取data中的属性，需要通过this来完成，this表示的是vue实例。
this.name = "itcast"
},
changeNameByArg(userName) {
this.name = userName
}
}
})
</script>
除了绑定鼠标的点击事件以外，我们还可以绑定键盘的事件。
例如，页面有一个文本框，用户在该文本框中输入内容，按下回车，获取到用户输入的内容。
<div id="app">
<span>{{name}}</span>
<!-- 通过v-on来指定对应的事件，然后后面跟上对应的方法名，方法的定义在methods完成 -->
<button @click="changeName">更换姓名</button>
<button @click="changeNameByArg('laowang')">带参数的情况</button>
<!--给文本框添加键盘事件-->
<input type="text" @keydown.enter="changeUserName" v-model="name" />
</div>
在methods中定义changeUserName方法
// 通过methods完成函数或方法的定义
methods: {
changeName() {
// 在methods中要获取data中的属性，需要通过this来完成，this表示的是vue实例。
this.name = "itcast";
},
changeNameByArg(userName) {
this.name = userName;
},
//定义处理文本框键盘事件的方法。
changeUserName() {
console.log(this.name);
},
},
上面的案例中，我们使用了按键的修饰符: .enter，在官方文档中，还有其它的按键修饰符，如下：
链接: Vue按键修饰符.
与之相关的就是事件修饰符，如下：
链接: Vue事件修饰符.
200
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
