【后端速成Vue】常见指令修饰符

最新推荐文章于 2024-11-26 16:10:48 发布

程序猿教你打篮球

最新推荐文章于 2024-11-26 16:10:48 发布

阅读量1.3w

点赞数 9

分类专栏：后端速成Vue 文章标签： vue.js 前端 javascript

本文链接：https://blog.csdn.net/m0_61784621/article/details/132408946

版权

后端速成Vue 专栏收录该内容

8 篇文章 2 订阅

订阅专栏

前言：

本期将学习一些常见的指令修饰符，什么是指令修饰符？为什么要用到指令修饰符？用指令修饰符有哪些好处？相信在本篇文章阅读完，你都能了解到。

1、什么是指令修饰符？

在了解指令修饰符之前，需要先回顾一下，什么是指令？

在前面几篇文章，都是在讲解 Vue 的指令，这里提到的指令修饰符，也就是通过 " . " 指明一些指令后缀，不同的后缀封装了不同的处理操作。

2、常见的指令修饰符

2.1 按键修饰符

@keyup.enter 键盘回车监听

回想下之前使用 JS 时要去监听回车键，是不是需要使用一些键盘编码来判断当前按下的是否是回车键？

需求：有一个输入框，输入数字之后，按下回车键后，使用 alert 提示出输入的数字。

现在只需要使用 @Keyup.enter 就能监听回车了：

<!DOCTYPE html>
<html>
<head>
  <title>指令修饰符</title>
  <style>
    * {
        margin: 0;
        padding: 0;
    }
  </style>
</head>
<body>
  <div id="app">
    <input v-model="name" type="text" @Keyup.enter="fun">
  </div>
</body>
<script src="https://cdn.jsdelivr.net/npm/vue@2.7.14"></script>
<script>
    const app = new Vue({
        el: '#app',
        data: {
            name: ''
        },
        methods: {
            fun () {
              alert(this.name);
            }
        }
    })
</script>
</html>

2.2 v-model 修饰符

v-model 是绑定表单元素的，常见的有两个修饰符，分别是 .trim 和 .number

先来看 .trim，他的作用是将表单元素里输入的前后的所有空格都去掉。

当我们没有使用 .trim 的时候，这里绑定的 name 直接输出是会含有空格的。

修改上面的代码：

<input v-model.trim="name" type="text" @Keyup.enter="fun">

运行结果：

再来看 .number 这个修饰符是将输入的内容，尽可能的转换成数字！

修改代码如下：

<body>
  <div id="app">
    <input v-model="name" type="text" @Keyup.enter="fun">
  </div>
</body>
<script src="https://cdn.jsdelivr.net/npm/vue@2.7.14"></script>
<script>
    const app = new Vue({
        el: '#app',
        data: {
            name: ''
        },
        methods: {
            fun () {
              console.log(typeof(name));
            }
        }
    })
</script>

input 输入 123，按回车查看类型：

此时如果想把这个 string 类型转换成数字类型，就可以使用 .number 了，修改代码如下：

<input v-model.number="name" type="text" @Keyup.enter="fun">

2.3 @事件名.stop

这个指令修饰符的作用是阻止冒泡，什么是冒泡？

举个很简单的例子，小时候摔跤了，自己摔疼了，但是爸妈知道了也会心疼。

这就可以理解冒泡，明明爸妈没摔跤，但由于你是他们晚辈，你摔跤了，他们也会心疼。

放在程序中来说，一个父容器里面有一个子容器，给父容器和子容器都添加上事件，那么触发子元素事件的时候，同时也会触发父元素的事件，这就是冒泡。

如下面这段代码，给父容器加上点击事件，子容器加上点击事件，然后单击子容器：

<!DOCTYPE html>
<html>
<head>
  <title>指令修饰符</title>
  <style>
    * {
        margin: 0;
        padding: 0;
    }
    .father {
      width: 200px;
      height: 200px;
      background-color: bisque;
    }
    .son {
      width: 100px;
      height: 100px;
      background-color: brown;
    }
  </style>
</head>
<body>
  <div id="app">
    <div class="father" @click="fatherFun">
      <div class="son" @click="sonFun"></div>
    </div>
  </div>
</body>
<script src="js/vue.min.js"></script>
<script>
    const app = new Vue({
        el: '#app',
        data: {
            name: ''
        },
        methods: {
            fatherFun() {
              console.log("单击了父亲");
            },
            sonFun () {
              console.log("单击了儿子");
            }
        }
    })
</script>
</html>

如何单击子元素的时候，不会触发父元素的事件呢？这时就可以使用 .stop 指令修饰符了。

修改代码如下：

<div id="app">
    <div class="father" @click="fatherFun">
      <div class="son" @click.stop="sonFun"></div>
    </div>
</div>

2.4 @事件名.prevent

这个指令修饰符是阻止默认行为的，比如 a 标签的单击默认事件是跳转到指定的 url，如何在单击 a 标签的时候不让它进行跳转呢？

这时候就能使用 @click.prevent，这样一来，就阻止了元素的默认行为了。

<div id="app">
    <a href="https://www.csdn.net" @click.prevent>CSDN</a>
</div>

此时点击这个 a 标签，就不会跳转到 csdn 了。

3、总结

本篇主要介绍了常见的指令修饰符，指令修饰符就是通过 " . " 来指明一些指令的后缀，不同的后缀封装了不同的处理操作，从而简化了代码的开发。

按键修饰符：@keyup.enter 监听键盘回车

v-model修饰符：v-model.trim 去除首尾空格 v-model.number 尽量将字符串转换成数字

事件修饰符：@事件名.stop 阻止冒泡 @事件名.prevent 阻止默认行为

程序猿教你打篮球

关注

9
点赞
踩
17

收藏

觉得还不错? 一键收藏
打赏
1
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

专栏目录