Vue3学习之旅–爱上Vue3–Vue3基础语法(一)--以及vscode基本使用和快速生成代码片段

最新推荐文章于 2024-05-13 13:07:33 发布

尤雨东

最新推荐文章于 2024-05-13 13:07:33 发布

阅读量1.5k

点赞数 6

分类专栏： vue3 文章标签： vue.js es6 vscode typescript 前端

本文链接：https://blog.csdn.net/weixin_45747310/article/details/118756641

版权

vue3 专栏收录该内容

34 篇文章 7 订阅

订阅专栏

Vue3学习之旅–爱上Vue3–Vue3基础语法(一)

续上文：

vue3学习之旅–邂逅vue3-了解认识Vue3

vue3学习之旅–邂逅vue3-了解认识Vue3(二)

methods方法绑定this

问题回顾：

问题一：为什么不能使用箭头函数（官方文档有给出解释）？

问题二：不使用箭头函数的情况下，this到底指向的是什么？（可以作为一道面试题）

不能使用箭头函数的原因？

我们在methods中要使用data返回对象中的数据：

那么这个this是必须有值的，并且应该可以通过this获取到data返回对象中的数据。

那么我们这个this能不能是window呢？

不可以是window，因为window中我们无法获取到data返回对象中的数据；但是如果我们使用箭头函数，那么这个this就会是window了；

为什么是window呢？

这里涉及到箭头函数使用this的查找规则，它会在自己的上层作用于中来查找this；

最终刚好找到的是script作用于中的this，所以就是window；

this到底是如何查找和绑定的呢？

且听下回分解。

this到底指向什么？

事实上Vue的源码当中就是对methods中的所有函数进行了遍历，并且通过bind绑定了this：

当然学过vue2的小伙伴可能觉得有点熟系。看不懂也没关系，以后慢慢我们可以看懂的。此处可以略过。

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>

<body>
  <div id="app"></div>
  <script src="../vue3/vue3.js"></script>

  <!-- template 模板写法二  -->
  <!-- 直接在 template标签内书写模板 -->
  <template id="mao">
    <div>
      <h2>{{message}}</h2>
      <h2>{{counter}}</h2>
      <button @click='increment'>+</button>
      <button @click='decrement'>-</button>
      <!-- 验证箭头函数的指向 -->
      <!-- 发现打印出来的对象，的确是window对象 -->
      <button @click='increment'>验证箭头函数的指向</button>
    </div>
  </template>

  <script>
    Vue.createApp({
      template: '#mao',
      // 数据
      data() {
        return {
          message: 'hello Vue3!',
          counter: 0
        }
      },
      // 方法  
      // 问题：为什么我们定义在methods里面的方法，不能使用箭头函数？
      // 使用箭头函数，我们发现这个简单的计数器并不会动
      methods: {
        // 使用箭头函数的问题：

        increment: () => {
          // this === window ? 很明显是不能这样做的
          // window对象里面哪里来的counter属性，就算有，和我的vue实例又有什么关系呢？
          // 写出箭头函数的时候，这个this就指向了window
          console.log(this); // 打印的对象的确是window
          console.log(this === window); // true
          // 那么问题来了：为什么使用箭头函数，this就指向window了
          // 很明显：不难想象，肯定和vue的this绑定规则有关
          // 我们知道：箭头函数是不会绑定this的，箭头函数在哪个作用域中，this就指向那个作用域的对象
          // 那么你可能觉得，我箭头函数当前不就在 methods的作用域里面吗？
          // 其实不然：methods只是在定义对象  methods是什么，是对象啊
          // 什么是作用域： () 肯定是在括号里面啦
          // 所以箭头函数最终找到的this就到了最顶层的window
          this.counter++;
        },
        decrement: () => {
          this.counter--;
          console.log(this);
        }
      }
    }).mount('#app');

    window.name = 'win'
    const fn = function () {
      console.log(this.name);
    }
    fn() // 'win' 实际上执行的是 window.fn()  隐式绑定

    const obj = { name: '毛', fn: fn }
    obj.fn() // '毛'
  </script>
</body>

</html>

补充：vscode代码片段

我们在前面练习Vue的过程中，有些代码片段是需要经常写的，我们再VSCode中我们可以生成一个代码片段，方便我们快速生成。

VSCode中的代码片段有固定的格式，所以我们一般会借助于一个在线工具来完成。

具体的步骤如下：

复制自己需要生成代码片段的代码
https://snippet-generator.app/在该网站中生成代码片段；
在VSCode中配置代码片段

需要生成的代码片段

  <div id="app"></div>
  <template id="my-app">
  </template>
  <script src="../vue3/vue3.js"></script>
  <script>
    const app = Vue.createApp({
      template:'#my-app',
      data(){
        return {
          message:'hello Vue3!'
        }
      }
    }).mount('#app')
  </script>

vscode–> 设置 --> 用户代码片段

选择我们需要生成的文件类型

将需要生成的代码片段拷贝到上面的那个网站

在html.json 中进行配置

保存，就ok

接下来直接使用prefix的属性值，敲出来前缀然后回车，自动生成模板骨架。

模板语法

React的开发模式：

React使用的jsx，所以对应的代码都是编写的类似于js的一种语法；
之后通过Babel将jsx编译成 React.createElement 函数调用

Vue也支持jsx的开发模式（后续有时间也会讲到）：

但是大多数情况下，使用基于HTML的模板语法；
在模板中，允许开发者以声明式的方式将DOM和底层组件实例的数据绑定在一起；
在底层的实现中，Vue将模板编译成虚拟DOM渲染函数，这个我会在后续给大家讲到；

所以，对于学习Vue来说，学习模板语法是非常重要的。

Mustache双大括号语法

如果我们希望把数据显示到模板（template）中，使用最多的语法是 “Mustache”语法 (双大括号) 的文本插值。

并且我们前端提到过，data返回的对象是有添加到Vue的响应式系统中；
当data中的数据发生改变时，对应的内容也会发生更新。
当然，Mustache中不仅仅可以是data中的属性，也可以是一个JavaScript的表达式。

<div id="app"></div>
  <template id="my-app">
    <!-- 插值表达式的基本使用 -->
    <!-- 直接获取一个实例数据 -->
    <h2>{{message}}</h2>
    <!-- 也可以使用表达式 -->
    <h2>{{age * 10}}</h2>
    <h2>{{age / 10}}</h2>
    <!-- 也可以使用数据的方法 比如字符串的切割-->
    <!-- 字符串的切割 然后反转 -->
    <h2>{{message.split('').reverse().join('')}}</h2>
    <!-- 调用函数 -->
    <h2>{{getReverseMessage()}}</h2>
    <!-- 还可以使用计算属性，暂时不讲 -->

    <!-- 使用三元运算符 -->
    <h2>{{isShow? '哈哈' : '呵呵'}}</h2>
    <!-- 同一个标签也可以使用多个插值表达式 -->
    <h2>{{name}} {{message}}</h2>
  </template>
  <script src="../vue3/vue3.js"></script>
  <script>
    Vue.createApp({
      template: '#my-app',
      data() {
        return {
          message: 'hello Vue3!',
          name: '毛毛',
          age: 22,
          isShow:true
        }
      },
      methods: {
        getReverseMessage() {
          return this.message.split('').reverse().join('');
        }
      },
    }).mount('#app')
  </script>

另外这种用法是错误的：

    <!-- 以下为错误用法 -->
    <!-- 1. 在插值表达式中定义变量，这是赋值语句，不是表达式 -->
    <h2>{{const a = '10'}}</h2>
    <!-- 使用if语句等 -->
    <h2>{{if(isShow) {return '哈哈哈'}}}</h2>

Vue指令

v-once指令

v-once用于指定元素或者组件只渲染一次：

当数据发生变化时，元素或者组件以及其所有的子元素将视为静态内容并且跳过；
该指令可以用于性能优化；

    <!-- v-once指令：该指令修饰的元素或者组件只会渲染一次-->
    <h2 v-once>{{counter}}</h2>
    <h2>{{counter}}</h2>
    <button @click='increment'>+</button><br>

如果是子节点，也是只会渲染一次：

    <!-- 如果是子节点，一样也只渲染一次 -->
    <div v-once>
      <h2>{{counter}}</h2>
      <button @click='increment'>+</button><br>
    </div>

<div id="app"></div>
  <template id="my-app">
    <!-- v-once指令：该指令修饰的元素或者组件只会渲染一次-->
    <h2 v-once>{{counter}}</h2>
    <h2>{{counter}}</h2>
    <button @click='increment'>+</button><br>
    <!-- 如果是子节点，一样也只渲染一次 -->
    <div v-once>
      <h2>{{counter}}</h2>
      <button @click='increment'>+</button><br>
    </div>
  </template>
  <script src="../vue3/vue3.js"></script>
  <script>
    Vue.createApp({
      template: '#my-app',
      data() {
        return {
          counter: 100
        }
      },
      methods: {
        increment() {
          this.counter++;
        }
      },
    }).mount('#app')
  </script>

v-text 指令

用于更新元素的 textContent：

也就是用于更新元素的文本内容。

    <template id="my-app">
      <!-- v-text指令 -->
      <h2 v-text='message'></h2>
      <!-- 等价于 -->
      <h3>{{message}}</h3>
      <!-- 但是插值表达式更加灵活 -->
    </template>

v-html指令

默认情况下，如果我们展示的内容本身是 html 的，那么vue并不会对其进行特殊的解析。

如果我们希望这个内容被Vue可以解析出来，那么可以使用 v-html 来展示；

<div id="app"></div>
  <template id="my-app">
    <div>{{message}}</div>
    <!-- v-html -->
    <div v-html='message'></div>
  </template>
  <script src="../vue3/vue3.js"></script>
  <script>
    Vue.createApp({
      template: '#my-app',
      data() {
        return {
          message: '<div style="color:red">毛毛</div>'
        }
      }
    }).mount('#app')
  </script>

v-pre 指令

v-pre用于跳过元素和它的子元素的编译过程，显示原始的Mustache标签
跳过不需要编译的节点，加快编译的速度；

    <!-- 如果我们希望有些内容不希望被解析，可以使用这个指令 -->
    <h2 v-pre>{{message}}</h2>

v-cloak 指令

这个指令保持在元素上直到关联组件实例结束编译。和 CSS 规则如 [v-cloak] { display: none } 一起用时，这个指令可以隐藏未编译的 Mustache 标签直到组件实例准备完毕。

  <style>
    [v-cloak]{
      display: none;
    }
  </style>

    <!-- v-cloak指令，隐藏未解析完的Mustache 标签（插值表达式），直到解析完毕 -->
    <h2 v-cloak>{{message}}</h2>

这个h2标签在vue解析完全之前，不会显示。

以下的指令都为常用的指令，是本次学习的重点！

v-bind的绑定属性

1. 基本使用

前面讲的一系列指令，主要是将值插入到模板内容中。

但是，除了内容需要动态来决定外，某些属性我们也希望动态来绑定。

比如：

动态绑定a元素的href属性；
动态绑定img元素的src属性；

绑定属性我们使用v-bind：

缩写：:

预期：any (with argument) | Object (without argument)

参数：attrOrProp (optional)

修饰符：.camel - 将 kebab-case attribute 名转换为 camelCase。

用法：动态地绑定一个或多个 attribute，或一个组件 prop 到表达式。

2. 绑定基本属性

v-bind用于绑定一个或多个属性值，或者向另一个组件传递props值（这个学到组件时再介绍）；

在开发中，有哪些属性需要动态进行绑定呢？

还是有很多的，比如图片的链接src、网站的链接href、动态绑定一些类、样式等等

v-bind有一个对应的语法糖（😃，也就是简写方式。

在开发中，我们通常会使用语法糖的形式，因为这样更加简洁。

<div id="app"></div>
    <!-- 在vue2.x template模板中只能有一个根元素 -->
    <!-- 但是在vue3中 是允许template中有多个根元素 -->
    <template id="my-app">
      <!-- 使用v-bind 动态绑定实例里面的属性 -->
      <img v-bind:src="imgUrl" alt="">
      <a v-bind:href="url2">百度</a><br>
      <!-- v-bind 提供了一个语法糖的写法，在需要绑定的标签属性前面加上 : -->
      <a :href="url">我的博客</a>
    </template>
    <script src="../vue3/vue3.js"></script>
    <script>
      Vue.createApp({
        template:'#my-app',
        data(){
          return {
            message:'hello Vue3!',
            imgUrl: 'https://gitee.com/mao0826/picture/raw/master/images/image-20210714225551729.png',
            url: 'https://blog.csdn.net/weixin_45747310/article/details/118691744',
            url2: 'https://blog.csdn.net/weixin_45747310/article/details/118683938'
          }
        }
      }).mount('#app')
    </script>

3. 绑定class属性

介绍

在开发中，有时候我们的元素class也是动态的，比如：

当数据为某个状态时，字体显示红色.
当数据另一个状态时，字体显示黑色.

绑定class的两种方式：

对象语法
数组语法

对象语法

我们可以传给 :class (v-bind:class 的简写) 一个对象，以动态地切换 class。

<style>
    .active {
      color: red;
    }

    .bgColor {
      background-color: aquamarine;
    }

    .default {
      font-size: 40px;
    }
  </style>


<div id="app"></div>
  <template id="my-app">
    <!-- v-bind指令动态绑定class属性 -->
    <!-- 对象语法： :class={'active':boolean} -->
    <!-- boolean 布尔值可以直接指定，也可以使用vue实例的属性来指定 -->
    <!-- 如果布尔值为true，则绑定这个class属性，false则不绑定 -->
    <!-- 引号可以加，也可以不加 -->
    <h2 :class="{'bgColor':true,active:isActive}">哈哈哈哈，{{message}}</h2>
    <button @click='toggle'>文字颜色切换</button>
    <!-- 默认的class和动态的class结合 -->
    <h3 class='default' :class='{active:isActive}'>你好！</h3>
    <!-- 将对象放到一个单独的属性中 -->
    <h2 :class='classNameObj'>vue3 good good </h2>
    <!-- 将返回的对象放到一个方法中，调用方法拿到返回值也可以 -->
    <!-- 计算属性当然也是可以的 -->
    <h2 :class='getClass()'>通过方法拿到的对象</h2>
  </template>
  <script src="../vue3/vue3.js"></script>
  <script>
    Vue.createApp({
      template: '#my-app',
      data() {
        return {
          message: 'hello Vue3!',
          isActive: true,
          // 一般在定义属性存放数据的时候，不会嵌套的引用其他属性的值
          // 比如  classNameObj = {active:isActive} 这种写法是不被允许的
          classNameObj: {
            active: true,
            bgColor: true
          }
        }
      },
      methods: {
        toggle() {
          this.isActive = !this.isActive;
        },
        getClass() {
          return {
            active: true,
            bgColor: true
          };
        }
      },
    }).mount('#app')
  </script>

数组语法

我们可以把一个数组传给 :class，以应用一个 class 列表

<style>
    .active {
      color: red;
    }

    .bgColor {
      background-color: aquamarine;
    }

    .default {
      font-size: 40px;
    }
  </style>
</head>

<body>
  <div id="app"></div>
  <template id="my-app">
    <!-- 数组语法 -->
    <!-- 数组里面的元素，都会合并在一起，绑在标签的class属性上，权重一样的时候，后面覆盖区前面的 -->
    <h2 :class="['default','bgColor']">呵呵额和</h2>
    <!-- 数组里面的元素可以使用三元运算符 -->
    <h3 :class="['bgColor',isActive?'active':'']">{{message}}</h3>
    <!-- 三目运算符很明显，可读性不是很好，所以我们可以在数组红嵌套对象写法 -->
    <h2 :class="['bgColor',{'active':isActive}]">{{message}}</h2>
  </template>
  <script src="../vue3/vue3.js"></script>
  <script>
    Vue.createApp({
      template: '#my-app',
      data() {
        return {
          message: 'hello Vue3!',
          isActive: true,
          // 一般在定义属性存放数据的时候，不会嵌套的引用其他属性的值
          // 比如  classNameObj = {active:isActive} 这种写法是不被允许的
          classNameObj: {
            active: true,
            bgColor: true
          }
        }
      },
      methods: {
        toggle() {
          this.isActive = !this.isActive;
        },
        getClass() {
          return {
            active: true,
            bgColor: true
          };
        }
      },
    }).mount('#app')
  </script>

4. 绑定style

介绍：我们可以利用v-bind:style来绑定一些CSS内联样式。

因为：某些样式我们需要根据数据动态来决定。比如文字的颜色，大小，行间距，行高等。

CSS property 名可以用驼峰式 (camelCase) 或短横线分隔 (kebab-case，记得用引号括起来) 来命名

绑定class有两种方式：

对象语法
数组语法

对象语法

不动态绑定时

<!-- 没有动态绑定时： -->
<h2 style="color: aquamarine;">{{message}}</h2>

动态绑定style

<div id="app"></div>
  <template id="my-app">
    <!-- 没有动态绑定时： -->
    <h2 style="color: aquamarine;">{{message}}</h2>
    <!-- 动态绑定style，对象语法 -->
    <!-- 1. 对象形式书写时，key可以不需要加引号，但是如果值是我们写的一个定值（常量），那么值必须加单引号 -->
    <h2 :style="{color: '#ccc'}">1111111111111111111111</h2>
    <!-- 如果值不加单引号，则值会被vue看成书写，会去从实例中找 -->
    <h2 :style="{color: myOrange}">222222222222222</h2>
    <!-- 此外，如果键名是多个单词的组合，不加单引号则遵循驼峰命名， -->
    <h3 :style="{backgroundColor: '#aadacc'}">3333333333333333</h3>
    <!-- 否则使用 - 连接时，则必须使用引号 -->
    <h3 :style="{'background-color': '#dddacc'}">4444444444444444</h3>
    <!-- 也可以进行值的拼接,将动态绑定的属性值与一个常量进行拼接 -->
    <h2 :style="{fontSize:myFontSize + 'px'}">555555555555555555</h2>
    <!-- 如果属性名和定义在实例中的属性值同名，则可以吃采取简写模式 -->
    <h2 :style="{backgroundColor,fontSize}">666666666666</h2>
    <!-- 直接绑定对象当然也肯定是允许的啦 -->
    <h2 :style="myStyle">7777777777777</h2>
    <!-- 绑定函数或者计算属性返回的对象 -->
    <h2 :style="getStyle()">8888888888888</h2>
  </template>
  <script src="../vue3/vue3.js"></script>
  <script>
    Vue.createApp({
      template: '#my-app',
      data() {
        return {
          message: 'hello Vue3!',
          myOrange: 'orange',
          myFontSize: 30,
          backgroundColor: '#aedcfa',
          fontSize: '40px',
          myStyle: {
            color: '#eae',
            fontSize: '30px',
            backgroundColor: '#ccc'
          }
        }
      },
      methods: {
        getStyle(){
          return {
            color: '#eaa',
            fontSize: '40px',
            backgroundColor: '#bdc'
          }
        }
      },
    }).mount('#app')
  </script>

数组语法

style 的数组语法可以将多个样式对象应用到同一个元素上

<div id="app"></div>
  <template id="my-app">
    <!-- 数组语法的使用：一般我们会在数组中放多个对象，然后多个对象会都绑定到style上，自动合并 -->
    <h2 :style="[style1,style2]">111111111111111111111</h2>
  </template>
  <script src="../vue3/vue3.js"></script>
  <script>
    Vue.createApp({
      template: '#my-app',
      data() {
        return {
          message: 'hello Vue3!',
          style1: { color: 'red', fontSize: '30px' },
          style2: { backgroundColor: '#ccc' }
        }
      }
    }).mount('#app')
  </script>

5. 动态绑定属性

在某些情况下，我们属性的名称可能也不是固定的：

前端我们无论绑定src、href、class、style，属性名称都是固定的；
如果属性名称不是固定的，我们可以使用 :[属性名]=“值” 的格式来定义；
这种绑定的方式，我们称之为动态绑定属性；

<style>
    .active {
      color: aquamarine;
    }
  </style>

  <div id="app"></div>
  <template id="my-app">
    <!-- 属性名动态绑定到name，name具体是什么值，绑定的就是什么属性，
      然后在通过value绑定这个动态的属性应该具有的值 -->
    <div :[name]="value">111111111111111</div>
  </template>
  <script src="../vue3/vue3.js"></script>
  <script>
    Vue.createApp({
      template: '#my-app',
      data() {
        return {
          message: 'hello Vue3!',
          name: 'class',
          value: 'active'
        }
      }
    }).mount('#app')
  </script>

6. 绑定一个对象

如果我们希望将一个对象的所有属性，绑定到元素上的所有属性，应该怎么做呢？

非常简单，我们可以直接使用 v-bind 绑定一个对象；

例如：info对象会被拆解成div的各个属性

<div id="app"></div>
  <template id="my-app">
    <!-- 当我们将动态的将一个对象上的所有属性都绑定给一个标签元素时 -->
    <!-- 我们可以直接用 v-bind='对象' -->
    <div v-bind="info">{{message}}</div>
    <!-- 也可以使用语法糖，但是貌似看起来有点怪，不是很建议使用 -->
    <div :="info">{{message}}</div>
    <!-- 这种绑定方式会将绑定的对象的属性全都解构到这个元素上，成为这个元素的属性 -->
  </template>
  <script src="../vue3/vue3.js"></script>
  <script>
    Vue.createApp({
      template: '#my-app',
      data() {
        return {
          message: 'hello Vue3!',
          info: {
            name: '哈哈',
            style: 'color:red',
            age: 22,
            data: '你好！'
          }
        }
      }
    }).mount('#app')
  </script>

v-on指令绑定事件

前面我们绑定了元素的内容和属性，在前端开发中另外一个非常重要的特性就是交互。

在前端开发中，我们需要经常和用户进行各种各样的交互：

这个时候，我们就必须监听用户发生的事件，比如点击、拖拽、键盘事件等等

在Vue中如何监听事件呢？使用v-on指令。

接下来我们来看一下v-on的用法：

v-on的使用：

缩写：@

预期：Function | Inline Statement | Object

参数：event

(事件)修饰符：

.stop - 调用 event.stopPropagation()。
.prevent - 调用 event.preventDefault()
.capture - 添加事件侦听器时使用 capture 模式
.self - 只当事件是从侦听器绑定的元素本身触发时才触发回调
.{keyAlias} - 仅当事件是从特定键触发时才触发回调
.once - 只触发一次回调。
.left - 只当点击鼠标左键时触发
.right - 只当点击鼠标右键时触发。
.middle - 只当点击鼠标中键时触发
.passive - { passive: true } 模式添加侦听器

用法：绑定事件监听

基本使用

我们可以使用v-on来监听一下点击的事件：

    <!-- v-on指令，绑定监听的事件 v-on:监听的事件 = "methods里面定义的函数" -->
    <button v-on:click="btnClick1">按钮1</button><br>

v-on:click可以写成@click，是它的语法糖写法：

<button @click="btnClick1">按钮1</button><br>

当然，我们也可以绑定其他的事件：

<!-- 监听鼠标移动的方法 -->
<div v-on:mousemove="btn2Move">鼠标在移动事件</div>

如果我们希望一个元素绑定多个事件，这个时候可以传入一个对象：

    <button @="{'click':btnClick1,'mousemove':btn2Move}" @click="btnClick2">绑定多个事件，两个点击事件都会生效</button>

**基本使用总览：**大家多多尝试

<style>
    .dd{
      width: 200px;
      height: 200px;
      background-color: aquamarine;
    }
  </style>

<div id="app"></div>
  <template id="my-app">
    <!-- v-on指令，绑定监听的事件 v-on:监听的事件 = "methods里面定义的函数" -->
    <button v-on:click="btnClick1">按钮1</button><br>
    <!-- 监听鼠标移动的方法 -->
    <div class="dd" v-on:mousemove="btn2Move">鼠标在移动事件</div>
    <!-- 语法糖的写法 -->
    <button @click="btnClick2">按钮2</button><br>
    <!-- 绑定一个表达式 -->
    <button @click="counter++">点击数字加一</button> <span style="color: blueviolet;">{{counter}}</span>
    <!-- 同时绑定多个事件的时候，我们一般采用对象的形式 -->
    <!-- 同一个事件不能在对象里面多次绑定，不然后面的会覆盖前面的 -->
    <!-- 因为在对象中，同名属性会被后面定义的覆盖 -->
    <button v-on="{'click':btnClick1,'click':btnClick2}">只有第二个点击事件生效</button><br>
    <!-- 将同一个事件分开绑定，会同时生效 -->
    <button @="{'click':btnClick1,'mousemove':btn2Move}" @click="btnClick2">绑定多个事件，两个点击事件都会生效</button>
  </template>
  <script src="../vue3/vue3.js"></script>
  <script>
    Vue.createApp({
      template: '#my-app',
      data() {
        return {
          message: 'hello Vue3!',
          counter: 0
        }
      },
      methods: {
        btnClick1() {
          console.log('btn1 发生了点击');
        },
        btn2Move(){
          console.log('鼠标移动');
        },
        btnClick2() {
          console.log('btn2 发生了点击');
        },
      },
    }).mount('#app')
  </script>

v-on参数传递

当通过methods中定义方法，以供@click调用时，需要注意参数问题：

如果该方法不需要额外参数，那么方法后的()可以不添加

<!-- 绑定事件，直接绑定事件处理函数名，不带括号，也会默认传递一个触发的事件参数 -->
<button @click="btnClick">按钮</button>

如果方法本身中有一个参数，那么会默认将原生事件event参数传递进去
```
<button @click="btnClick">按钮</button>
```

如果需要同时传入某个参数，同时需要event时，可以通过$event传入事件。

<!-- vue中，使用 $event 来获取事件参数 -->
<button @click="btnClick2($event,'你好！')">按钮</button>

如果事件处理函数带括号了，不传递参数，默认是接收不到 event事件的

<!-- 注意，绑定函数时如果带括号，却不传递参数，那么事件参数也是拿不到的-->
<button @click="btnClick3()">按钮</button>

总览：

<div id="app"></div>
  <template id="my-app">
    <!-- 绑定事件，直接绑定事件处理函数名，不带括号，也会默认传递一个触发的事件参数 -->
    <button @click="btnClick">按钮</button>
    <!-- 点击按钮的时候，还需传递其他参数时，需要书写的时候带上函数的括号，并传递参数 -->
    <!-- vue中，使用 $event 来获取事件参数 -->
    <button @click="btnClick2($event,'你好！')">按钮</button>
    <!-- 注意，绑定函数时如果带括号，却不传递参数，那么事件参数也是拿不到的-->
    <button @click="btnClick3()">按钮</button>
  </template>
  <script src="../vue3/vue3.js"></script>
  <script>
    Vue.createApp({
      template: '#my-app',
      data() {
        return {
          message: 'hello Vue3!'
        }
      },
      methods: {
        btnClick(event) {
          console.log(event);
        },
        btnClick2(event,data) {
          console.log(event);
          console.log(data);
        },
        btnClick3(event) {
          console.log(event);
        }
      },
    }).mount('#app')
  </script>

v-on 事件修饰符

v-on支持修饰符，修饰符相当于对事件进行了一些特殊的处理：

.stop - 调用 event.stopPropagation()。
.prevent - 调用 event.preventDefault()
.capture - 添加事件侦听器时使用 capture 模式
.self - 只当事件是从侦听器绑定的元素本身触发时才触发回调
.{keyAlias} - 仅当事件是从特定键触发时才触发回调
.once - 只触发一次回调。
.left - 只当点击鼠标左键时触发
.right - 只当点击鼠标右键时触发。
.middle - 只当点击鼠标中键时触发
.passive - { passive: true } 模式添加侦听器

例如：.stop的使用如下：

<div id="app"></div>
  <template id="my-app">
    <div @click="divClick">
      <button @click="btnClick1">按钮1 不阻止冒泡</button>
      <button @click="btnClick2">按钮2 使用js提供的方法阻止冒泡</button>
      <button @click.stop="btnClick3">按钮3 使用事件修饰符阻止冒泡</button>
    </div>
  </template>
  <script src="../vue3/vue3.js"></script>
  <script>
    Vue.createApp({
      template: '#my-app',
      data() {
        return {
          message: 'hello Vue3!'
        }
      },
      methods: {
        btnClick1() {
          console.log('btn 111111111')
        },
        btnClick2(event) {
          // 阻止冒泡
          event.stopPropagation()
          console.log('btn 222222222')
        },
        btnClick3() {
          console.log('btn 33333333')
        },
        divClick(){
          console.log('div 44444444');
        }
      }
    }).mount('#app')
  </script>

事件修饰符的其他使用可以自行练习。emmm，具体的细节我会再出一个博客专门讲解修饰符以及相关案例。

今日分享结束！冲冲冲

尤雨东

关注

6
点赞
踩
3

收藏

觉得还不错? 一键收藏
打赏
2
评论
Vue3学习之旅–爱上Vue3–Vue3基础语法(一)--以及vscode基本使用和快速生成代码片段

Vue3学习之旅–爱上Vue3–Vue3基础语法(一)续上文：vue3学习之旅–邂逅vue3-了解认识Vue3vue3学习之旅–邂逅vue3-了解认识Vue3(二)methods方法绑定this问题回顾：问题一：为什么不能使用箭头函数（官方文档有给出解释）？问题二：不使用箭头函数的情况下，this到底指向的是什么？（可以作为一道面试题）不能使用箭头函数的原因？我们在methods中要使用data返回对象中的数据：那么这个this是必须有值的，并且应该可以通过this获取到data返
复制链接

扫一扫