持续创作，加速成长！这是我参与「掘金日新计划 · 6 月更文挑战」的第8天，点击查看活动详情
目录
上一篇文章我们介绍了v-html指令，它的作用是设置元素的innerHTML，这篇文章我们将介绍v-on指令
一、v-on指令语法介绍
1、v-on指令的作用
这个指令的作用是：为元素绑定事件。
当咱们希望用户做一些特定操作的时候，比如：点击、按下键盘、滚动鼠标等，
想要添加一些自定义的逻辑，我们就可以为对应的元素绑定事件。在Vue中虽然写法略有差异，但是看起来还是很好理解的。
编辑
但是有个问题，这个“事件名”到底写什么呢？
如果是点击事件，我们就写上click；
如果是鼠标移入事件，我们就写上monseenter；
如果是双击事件，我们就写上dblclick；
发现规律没有，我们不需要写v-on，它已经在冒号的左边定义好了。
***2、methods方法定义
那么方法写在哪里呢？它写在Vue实例的 methods 属性中
编辑
需要注意的是：methods属性和el属性、data属性，它们是平级的。
3、如何绑定事件呢？
假如methods属性里面，我们有一个dolt方法，如何把这个dolt方法绑定一些事件呢？
编辑
然后当我们触发某个对应的事件之后，它就会去执行我们绑定的那个方法、执行方法的逻辑。
4、一种更简单的写法： 把v-on 替换成 @
这里Vue给我们提供了一种更简单的写法，它支持把我们的 v-on 替换成 @ ，其他的跟之前一样，
编辑
你可以使用 v-on 或 @ 这两种方式，它的功能是完全一样的。
只是一般来说，简写代码量会少一些，所以使用频率会更高一些。
5、实例测试验证
（1）实例代码
<!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>06_v-on指令_简写_点击双击事件</title>
</head>
<body>
<!-- 开发环境版本，包含了有帮助的命令行警告 -->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<div id = "app">
<input type="button" value="v-on指令" v-on:click="doIt"></input>
<input type="button" value="v-on简写" @click="doIt"></input>
<!-- 注意：双击事件需要连续快速点击二次 -->
<input type="button" value="双击事件" @dblclick="doIt"></input>
</div>
<script>
var app = new Vue({
el: "#app",
methods: {
doIt:function(){
alert("你好，帅气华！");
}
},
})
</script>
</body>
</html>
（2）效果展示
编辑
编辑
这里我们就不演示其他的事件了，只要你知道事件的名字，可以自己去尝试测试。
二、this关键字，修改数据
1、不用再操作dom元素
当我们在实际开发当中，可能需要做一些更为复杂的逻辑，比如说更改里面元素的显示。
那么我们就需要操作里面的dom元素了，如果你果然有这样的想法，那么你的思维方式可能需要调整一下啦！
或者说在Vue里面这种方式不太适用，因为Vue其中的一大特点就是：不用再操作dom元素。
2、this关键字
那不操作dom元素，我们如何更改页面的显示呢？
Vue开发的项目有一个特点就是：页面由数据生成，数据改变，页面就会同步跟着改变。
所以刚刚的问题就是：如何在我们的事件中，去修改数据？
语法其实非常简单就是：通过 this 关键字，就可以点出我们定义在 data 中的数据。
现在我们来演示一下
3、实例测试验证
（1）实例代码
<!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>07_v-on指令之this关键字</title>
</head>
<body>
<!-- 开发环境版本，包含了有帮助的命令行警告 -->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<div id = "app">
<input type="button" value="v-on简写" @click="doIt"></input>
<h2 @click="changeFood">{{ food }}</h2>
</div>
<script>
var app = new Vue({
el: "#app",
data:{
food: "西兰花炒鸡蛋！",
},
methods: {
doIt:function(){
alert("你好，帅气华！");
},
changeFood: function(){
this.food += '西红柿炒鸡蛋，更好吃！';
}
},
})
</script>
</body>
</html>
（2）效果展示
编辑
因为我们在“西兰花炒鸡蛋”上面设置点击事件、
并用 this 关键字进行累加拼接操作，所以点击后，如下图：
编辑
也就是现在在代码里面：我们可以拿到数据、更改数据，当数据更改以后，页面也就跟着同步更新了。
所以换句话来说，在我们的Vue当中，你不需要考虑去如何操作dom元素，重点是怎么更改我们的数据。
因为数据更新之后，我们使用数据的那个元素，会同步更新！
重点还要记住一个关键字 this，在我们这个方法的内部，你要拿到这个数据，得通过this点出来。
三、内容-总结
编辑
\
