Vue知识整理，让你快速入门Vue.js：03_4.本地应用：v-on指令（事件绑定）、v-on指令简写、methods方法定义、this关键字修改数据

被开发耽误的大厨

已于 2022-06-05 23:56:13 修改

阅读量788

点赞数

分类专栏： web前端（H5）文章标签： vue.js javascript 前端

于 2020-03-22 09:36:12 首次发布

本文为博主原创文章，不得随意转载，转载请注明出处！！！

本文链接：https://blog.csdn.net/YuDBL/article/details/105008442

版权

web前端（H5）专栏收录该内容

83 篇文章 15 订阅

订阅专栏

4、一种更简单的写法：把v-on 替换成 @

上一篇文章我们介绍了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>