一、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>

（12）vue.js 修饰符相关推荐

  1. Vue 事件修饰符 详解

    本人后端程序员,由于绑页面需要使用vue,在自学的过程中不懂事件修饰符,特此请教后才理解,在这提出我的分享,忘各位大神指正. vue官网上指出: 在事件处理程序中调用 event.preventDef ...

  2. vue事件修饰符有哪些

    vue 事件修饰符 1.prevent:阻止默认事件 2.stop:阻止事件冒泡 3.once:事件只触发一次 4.capture:使用事件的捕捉模式 5.self:只有event.target是当前 ...

  3. Vue事件修饰符（prevent，stop，once，capture，self）

    1.Vue的事件修饰符: 1.prevent 阻止默认事件(常用) 2.stop:阻止默认冒泡(常用) 3.once:事件只触发一次(常用) 4.capture:使用事件的捕获模式 5.self:只有 ...

  4. vue 事件修饰符与按键修饰符

    事件修饰符 在事件处理程序中调用 event.preventDefault() 或 event.stopPropagation() 是非常常见的需求.尽管我们可以在方法中轻松实现这点,但更好的方式是: ...

  5. Vue事件修饰符实例

    以下是代码源码,可直接复制运行: <!DOCTYPE html> <html><head><meta charset="utf-8"> ...

  6. [Vue] : 键盘修饰符

    键盘修饰符以及自定义键盘修饰符 为文本框回车键绑定事件 <input type="text" class="form-control" v-model=& ...

  7. vue事件修饰符：通过@click.capture捕获内层事件（爷爷-父亲-儿子）

    vue事件符的.capture用法,含义是捕获. 先看一个4层结构的div盒子:div(最外层) > div(爷爷) > div(父亲) > div(儿子) <template ...

  8. vue学习：事件传递（冒泡和捕获），事件委托，jquery中的事件委托，$event 获取元素，vue事件修饰符

    事件传递 ----冒泡和捕获 DOM事件标准定义了两种事件流,这两种事件流分别是捕获和冒泡. 和许多Web技 术一样,在它们成为标准之前,Netscape和微软各自不同地实现了它们.Netscape选 ...

  9. vue .prop修饰符

    在看vue的compile的代码的时候,在匹配绑定值的时候,除了匹配v- @ :,也匹配了.开头的绑定的方式.由于目前没有用到过这样的绑定方式,所以特地翻看了一下vue的github的feature- ...

最新文章

  1. python中的daemon守护进程实现方法
  2. 桌面虚拟化之远程协助
  3. 数据结构与算法笔记 —— 十大经典排序及算法的稳定性
  4. 【渝粤教育】国家开放大学2019年春季 1171科学与技术 参考试题
  5. 创龙DSP6748开发板驱动LCD屏
  6. python的诞生和发展历史_Python发展史-一门编程语言的起源
  7. Python回归 岭回归（Ridge Regression）
  8. 2015年4月7号的日志
  9. AngularJs学习的前景及优势
  10. 艾伟_转载：在C#中实现3层架构
  11. html在线播放mp4文件,使用HTML5视频在Firefox中播放MP4文件
  12. 大数据笔记（三十一）——SparkStreaming详细介绍，开发spark程序
  13. Stick ------ 剪枝神题
  14. 后台管理软件测试用例,如何进行测试用例管理？
  15. 程序设计与数据结构_周立功【读书笔记】
  16. python填空题大全_『Python题库 - 填空题』151道Python笔试填空题
  17. 计算机与打印机脱机后怎么共享,电脑重启后共享打印机脱机的解决方法
  18. 外设键盘win和alt功能互换解决方法
  19. 大一学生HTML5期末大作业——基于HTML+CSS中国传统节日-清明节 8页
  20. 蓝牙耳机啥牌子好？口碑好、音质好的蓝牙耳机推荐

热门文章

  1. 参考信息 - 云原生（Cloud Native）
  2. 技术分享连载（六十八）
  3. console 调试javascript
  4. 初识数据中心Mesos
  5. kernel printk信息显示级别
  6. [NOIP2010]关押罪犯(二分+二分图染色)
  7. 搜索引擎的强大意味着与之合作就会双赢？
  8. 利用IIS建立高安全性Web服务器
  9. 一段比较经典的多线程学习代码
  10. 1024带给程序员的福利