（12）vue.js 修饰符

泽哥ins

已于 2022-02-01 22:42:00 修改

阅读量767

点赞数

分类专栏： Vue 文章标签： vue.js

于 2022-01-25 23:59:17 首次发布

本文链接：https://blog.csdn.net/qq_36213140/article/details/122694098

版权

Vue 专栏收录该内容

32 篇文章 3 订阅

订阅专栏

一、vue.js修饰符介绍

修饰符是以点开头的指令后缀，用于给当前指令设置特殊操作。

二、事件修饰符

.prevent 修饰符

用于阻止默认事件行为，相当于 event.preventDefault()。

<body>
  <div id="app">
    <a @click.prevent="fn" href="http://www.baidu.com">链接</a>
  </div>
  <script src="../01.vue.js入门/js/vue-2.6.14.js"></script>
  <script>
    new Vue({
      el: '#app',
      data: {

      },
      methods: {
        fn() {
          console.log('这是点击 a 标签后的输出信息');
        }
      }
    })
  </script>
</body>

.stop 修饰符

用于阻止事件传播，相当于 event.stopPropagation()。

我们通过如下示例1：点击div输出div，没有问题。

示例2：点击button按钮，输出了button和div 2个标签的信息，这个就是事件传播行为，点击子元素会将自身行为传播给父元素，那么我们想要组织该传播行为，怎么办呢？

示例3：阻止传播行为，给出现传播行为的button按钮标签添加一个.stop修饰符，用来阻止该行为

同时Vue.js 中允许修饰符进行连写，例如：@click.prevent.stop。

案例：我们的超链接标签，需要阻止默认事件行为（就是跳转），还要组织自身传播行为。

<!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>07. .stop修饰符</title>
  <style>
    #app div {
      width: 100px;
      height: 100px;
      line-height: 100px;
      background-color: #ccc;
      text-align: center;
    }
  </style>
</head>
<body>
  <div id="app">
    <div @click="fn1">
      <!-- <button @click.stop="fn2">按钮</button> -->
      <a @click.prevent.stop="fn2" href="http://www.baidu.com">链接</a>
    </div>
  </div>
  <script src="../01.vue.js入门/js/vue-2.6.14.js"></script>
  <script>
    new Vue({
      el: '#app',
      data: {

      },
      methods: {
        fn1() {
          console.log('这是div标签的输出信息');
        },
        fn2() {
          // console.log('这是button按钮的输出信息');
          console.log('这是 a 超链接的输出信息');
        }
      }
    })
  </script>
</body>
</html>

.once 修饰符

• 用于设置事件只会触发一次。

通过如下示例，我们点击按钮后，会再控制台中打印输出一句话的次数，我们看到加了.once修饰符的点击事件，只触发了一次事件，就不再触发了。

<body>
  <div id="app">
    <button @click="fn1">按钮1</button>
    <button @click.once="fn2">按钮2</button>
  </div>
  <script src="../01.vue.js入门/js/vue-2.6.14.js"></script>
  <script>
    new Vue({
      el: '#app',
      data: {

      },
      methods: {
        fn1() {
          console.log('按钮1被点击了');
        },
        fn2() {
          console.log('按钮2被点击了');
        }
      }
    })
  </script>
</body>

三、按键修饰符

• 按键码

按键码指的是将按键的按键码作为修饰符使用以标识按键的操作方式。

通过如下示例1：我们发现，我们不管再输入框中输入任何内容，只要我们每输入一次，就会调用一次方法，控制台就会输出一次信息。

示例2：我们再输入框中输入一个数字，然后再控制台中找到该数字的keycode码

我们这里输入1演示，我们看到1的keycode码是49，然后呢我们可以指定再我们的@keyup中，然后我们再次测试会发现，只有我们再输入框中输入1才会执行并再控制台中输出内容。

示例3：指定字母按键码

我们如果想要指定字母，可以直接再@keyup方法后面写.a即可，看起来更直观，就不需要我们去控制台查看a的keycode码去指定啦！既简洁又易读，清晰！

<input type="text" @keyup.a="fn">

示例4：特殊按键：特殊按键指的是除了内容外，键盘中类似 esc、enter、delete 等功能按键，为了更好的兼容性，应首选内置别名。

<input type="text" @keyup.esc="fn">
<input type="text" @keyup.enter="fn">
<input type="text" @keyup.delete="fn">

示例5：指定多个按键

我们可以指定多个按键，如下示例表示，我们输入1，2，3其中一个都可以执行并输出，并不是只有都输入了123，才执行哦！输入其中一个都可以执行的！

<input type="text" @keyup.a.b.c="fn">

其实除了这些按键码以外，我们的Vue.js官网还有其他的按键码的使用说明文档，我们可以自由查看学习！这里我们举例的是我们常用的一些哦！

<body>
  <div id="app">
    <input type="text" @keyup.49="fn">
    <input type="text" @keyup.a="fn">
    <input type="text" @keyup.esc="fn">
    <input type="text" @keyup.enter="fn">
    <input type="text" @keyup.delete="fn">
    <input type="text" @keyup.a.b.c="fn">
  </div>
  <script src="../01.vue.js入门/js/vue-2.6.14.js"></script>
  <script>
    new Vue({
      el: '#app',
      data: {

      },
      methods: {
        fn(event) {
          console.log(event);
          console.log('这是输出信息');
        }
      }
    })
  </script>
</body>

四、系统修饰符

系统按键指的是 ctrl 、alt 、shift 等，那么这些按键呢单独点击系统操作符是无效的，系统按键通常与其他按键组合使用。比如说，ctrl+c复制，ctrl+v粘贴等。

• .ctrl 修饰符
• .alt 修饰符
• .shift 修饰符

<body>
  <div id="app">
    <!-- 方式一：  ctrl的keycode码方式 -->
    <input type="text" @keyup.17="fn">
    <!-- 无法组合使用，效果是ctrl和q键都是单独生效的，并不是组合生效的。 -->
    <input type="text" @keyup.17.q="fn">
    <!-- 方式二:   使用.ctrl修饰符方式，如下书写不管是ctrl+任何一个键都可以生效 -->
    <input type="text" @keyup.ctrl="fn">
    <!-- 如下方式使用.ctrl修饰符，然后指定了组合按键q，是西安了组合才会生效的效果 -->
    <input type="text" @keyup.ctrl.q="fn">
    <!-- 如下是绑定data选项中空的inputValue属性，然后我们再输入框输入任何内容，按住ctrl+q键
    都会将输入框的内容进行清空 -->
    <input type="text" @keyp.ctrl.q="fn" v-model="inputValue">
  </div>
  <script src="../01.vue.js入门/js/vue-2.6.14.js"></script>
  <script>
    new Vue({
      el: '#app',
      data: {
        inputValue: ''
      },
      methods: {
        fn(event) {
          // console.log(event);
          this.inputValue = '';
        }
      }
    })
  </script>
</body>

五、鼠标按键修饰符

鼠标按键修饰符用于设置点击事件由鼠标哪个按键来完成。例如我们的button按钮默认是单击左键生效的，那么我们可以通过按键修饰符的方式，更改为点击鼠标中间键，和鼠标右键进行生效。

• .left 修饰符
• .right 修饰符
• .middle 修饰符

<body>
  <div id="app">
    <button @click.left="fn">按钮一</button>
    <button @click.middle="fn">按钮二</button>
    <button @click.right="fn">按钮三</button>
  </div>
  <script src="../01.vue.js入门/js/vue-2.6.14.js"></script>
  <script>
    new Vue({
      el: '#app',
      data: {

      },
      methods: {
        fn() {
          console.log('鼠标被点击啦!');
        }
      }
    })
  </script>
</body>

六、v-model 修饰符

• .trim 修饰符，用于自动过滤用户输入内容首尾两端的空格。

如下示例我们模拟用户乱输入的空白字符。

解决两端空白字符的示例

不管我们的前后两边输入了多少空格，我们的.trim修饰符都会给过滤掉！

• .lazy 修饰符，用于将 v-model 的触发方式由 input 事件触发更改为 change事件触发。也就是我们在输入框输入内容的时候，我们进行延迟更新数据，并不是实时更新，当我们失去焦点时，如果发生了改变，再进行视图渲染更新。

• .number 修饰符，用于自动将用户输入的值转换为数值类型，如无法被parseFloat() 转换，则返回原始内容。

测试一：输入123aaa，截取数字部分展示。

测试二：输入小数点，展示小数点，说明是通过parseFloat的方式。

测试三：输入字母开头，按照默认输入的内容展示，不再将字符串转换成数字了。

<body>
  <div id="app">
    <!-- .trim修饰符示例 -->
    <!-- <input type="text" v-model.trim="inputValue"> -->
    <!-- <p>{{ inputValue }}</p> -->
    <!-- .lazy修饰符示例 -->
    <!-- <input type="text" v-model.lazy="inputValue"> -->
    <!-- <p>{{ inputValue }}</p> -->
    <input type="text" v-model.number="inputValue">
    <p>{{ inputValue }}</p>
  </div>
  <script src="../01.vue.js入门/js/vue-2.6.14.js"></script>
  <script>
    var vm = new Vue({
      el: '#app',
      data: {
        inputValue: ''
      },
      methods: {

      }
    })
  </script>
</body>