Vue.js学习笔记之修饰符详解


Posted in Javascript onJuly 25, 2017

本篇将简单介绍常用的修饰符。

在上一篇中,介绍了 v-model 和 v-on 简单用法。除了常规用法,这些指令也支持特殊方式绑定方法,以修饰符的方式实现。通常都是在指令后面用小数点“.”连接修饰符名称。

一、v-model的修饰符

 v-model 是用于在表单表单元素上创建双向数据绑定的指令。在 <input> 和 <textarea> 上,默认通过监听元素的 input 事件来更新绑定的属性值。

为了能明显的看到绑定属性值的变化,需要在Chrome浏览器中安装Vue Devtools扩展程序。当查看Vue开发的页面时,按F12就可以在开发者工具里看到Vue页签。这里需要注意,只有在引用Vue的开发版本文件,即vue.js文件时,Vue Devtools工具才能正常使用。

.lazy

首先在 vm 对象中增加需要绑定的属性

var vm = new Vue({
   el: "#app",
   data: {
     input_lazy: ""
   }
 });

在页面中的 input 的元素上添加指令

<div class="row">
   <h2>v-model.lazy</h2>
   <input type="text" v-model.lazy="input_lazy" />
 </div>

打开页面,开启Vue Devtools,在文本框中输入字符,查看属性值变化

Vue.js学习笔记之修饰符详解

当在文本框输入内容,并且光标焦点没有离开文本框时,属性值没有实时发生变化

Vue.js学习笔记之修饰符详解

而当焦点离开文本框时,属性值发生了变化并与文本框内容保持一致。从这个例子可以看出 .lazy 修饰符延迟了同步更新属性值的时机。即将原本绑定在 input 事件的同步逻辑转变为绑定在 change 事件上。

.number

该修饰符用来将输入内容自动转换成数值。

vm 对象里增加一个属性,默认为空字符串

var vm = new Vue({
   el: "#app",
   data: {
     input_number: ""
   }
 });

在页面的 input 元素上添加指令

<div class="row">
   <h2>v-model.number</h2>
   <input type="text" v-model.number="input_number" />
   <hr />
 </div>

打开页面,在文本框内输入内容,查看绑定属性值的变化

Vue.js学习笔记之修饰符详解

当开始输入数字时,属性值将实时更新成Number类型的数值。数字后输入其他非数字的字符,属性值将不再变化。

Vue.js学习笔记之修饰符详解

而当开始输入非数字的字符串时,因为Vue无法将字符串转换成数值,所以属性值将实时更新成相同的字符串。即使后面输入数字,也将被视作字符串。

.trim

该修饰符用来自动过滤字符串前后的空字符。

vm 对象中增加一个属性,默认为空字符串

var vm = new Vue({
   el: "#app",
   data: {
     input_trim: ""
   }
 });

input 上添加指令

<div class="row">
   <h2>v-model.trim</h2>
   <input type="text" v-model.trim="input_trim" />
   <hr />
 </div>

打开页面,在文本框输入内容,并在内容前后添加多个空格

Vue.js学习笔记之修饰符详解

Vue会自动过滤掉前后的多个空格,最终属性值是前后没有空字符的字符串。

二、v-on的修饰符

绑定的事件修饰符可以改变事件的触发方式。

.stop

该修饰符将阻止事件向上冒泡。同理于调用 event.stopPropagation() 方法

vm 对象里添加两个事件

var vm = new Vue({
   el: "#app",
   methods: {
     div_click: function () {
       console.log("div click...");
     },
     stop_click: function () {
       console.log("stop_click...");
     }
   }
 });

将上面两个方法绑定到一组具有父子关系的元素上

<div class="row">
   <h2>v-on.stop</h2>
   <div @click="div_click">
     <button type="button" @click.stop="stop_click">StopPropagation</button>
   </div>
   <hr />
 </div>

打开页面,并点击按钮,查看控制台打印结果

Vue.js学习笔记之修饰符详解

按照事件冒泡原理,点击按钮时,从当前触发的元素开始,沿着它的父元素一直到根元素,都会依次触发 click 事件。但是应用了 .stop 修饰符后,将只会触发当前元素的 click 事件,并阻止事件向上冒泡。

.prevent

该修饰符会阻止当前事件的默认行为。同理于调用 event.preventDefault() 方法

vm 对象里添加一个测试方法

var vm = new Vue({
   el: "#app",
   methods: {
     form_submit: function () {
       console.log("form submit!");
     }
   }
 });

页面添加一个 form 表单,并绑定表单的提交事件

<div class="row">
   <h2>v-on.prevent</h2>
   <form @submit.prevent="form_submit">
     <button type="submit">Submit</button>
   </form>
   <hr />
 </div>

当点击提交按钮时,会触发绑定的事件,并且阻止表单提交并刷新当前页面的默认行为。

.self

该指令只当事件是从事件绑定的元素本身触发时才触发回调

修改上面 .stop 的例子,在父元素 div 上添加样式

<div class="row">
   <h2>v-on.self</h2>
   <div @click.self="div_click" style="display:inline-block; width: px; background-color:red;">
     <button type="button" @click="stop_click">Button</button>
   </div>
   <hr />
 </div>

打开页面

Vue.js学习笔记之修饰符详解

因为父元素比它的子元素要长,所以右侧会有一部分红色的父元素显示出来。分别点击按钮和红色区域,查看控制台打印结果

Vue.js学习笔记之修饰符详解

因为 div_click 事件被修饰符绑定,只有在直接点击到父元素 div ,即红色区域内,事件才会被触发。

即使点击了它的子元素触发了子元素的事件,按照事件冒泡原理,父元素的事件应当被触发,但是因为事件的触发源并不是事件绑定的元素本身,所以父元素事件不会被触发。

.one

该修饰符表示绑定的事件只会被触发一次

vm 对象中添加一个测试方法

var vm = new Vue({
   el: "#app",
   methods: {
     once_click: function () {
       console.log("once click...");
     }
   }
 });

页面添加一个按钮,绑定事件

<div class="row">
   <h2>v-on.once</h2>
   <button type="button" @click.once="once_click">Button</button>
   <hr />
 </div>

打开页面,多次点击按钮。只有在第一次点击时,事件才会触发。

键值修饰符

该修饰符可以用来监听键盘事件

vm 对象中添加一个测试方法

var vm = new Vue({
   el: "#app",
   methods: {
     enter_click: function () {
       console.log("enter click...");
     }
   }
 });

页面增加一个 input 元素,监听键盘事件

<div class="row">
   <h2>键值修饰符</h2>
   <input type="text" @keyup.="enter_click" />
   <hr />
 </div>

打开页面,在文本框输入内容,并按回车,查看控制台打印结果

Vue.js学习笔记之修饰符详解

通过 keyup.keyCode 的方式来监听键盘特定按键的事件。也可以通过按键名称来监听

<input type="text" @keyup.enter="enter_click"/>

也可以自定义按键名称

// 自定义按键名称
 Vue.config.keyCodes.ent = 13;
 
 // 页面引用
 <input type="text" @keyup.ent="enter_click"/>

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
javascript实现简单的进度条
Jul 02 Javascript
js带前后翻页的图片切换效果代码分享
Sep 08 Javascript
java中String类型变量的赋值问题介绍
Mar 23 Javascript
javascript截图 jQuery插件imgAreaSelect使用详解
May 04 Javascript
浅谈Node.js:Buffer模块
Dec 05 Javascript
BootStrap3使用错误记录及解决办法
Dec 22 Javascript
基于Bootstrap的Java开发问题汇总(Spring MVC)
Jan 15 Javascript
JavaScript获取当前时间向前推三个月的方法示例
Feb 04 Javascript
jQuery Datatable 多个查询条件自定义提交事件(推荐)
Aug 24 jQuery
微信小程序实现渐入渐出动画效果
Jun 13 Javascript
JavaScript实现模态对话框实例
Jan 13 Javascript
Vue中this.$nextTick的作用及用法
Feb 04 Javascript
ES6正则表达式扩展笔记
Jul 25 #Javascript
简单实现js拖拽效果
Jul 25 #Javascript
Vue实现一个返回顶部backToTop组件
Jul 25 #Javascript
基于jquery实现多级菜单效果
Jul 25 #jQuery
关于TypeScript中import JSON的正确姿势详解
Jul 25 #Javascript
微信JSSDK调用微信扫一扫功能的方法
Jul 25 #Javascript
利用node.js爬取指定排名网站的JS引用库详解
Jul 25 #Javascript
You might like
黑夜路人出的几道php笔试题
2009/08/04 PHP
整理的9个实用的PHP库简介和下载
2010/11/09 PHP
PHP 年龄计算函数(精确到天)
2012/06/07 PHP
PHP抓取淘宝商品的用户晒单评论+图片+搜索商品列表实例
2016/04/14 PHP
javascript 动态添加表格行
2006/06/22 Javascript
几个比较实用的JavaScript 测试及效验工具
2010/04/18 Javascript
一些经常会用到的Javascript检测函数
2010/05/31 Javascript
基于jquery的多彩百分比 动态进度条 投票效果显示效果实现代码
2011/08/28 Javascript
javascript显示用户停留时间的简单实例
2013/08/05 Javascript
JavaScript判断浏览器类型的方法
2015/02/10 Javascript
javascript中使用new与不使用实例化对象的区别
2015/06/22 Javascript
JavaScript实现自动弹出窗口并自动关闭窗口的方法
2015/08/06 Javascript
用JavaScript动态建立或增加CSS样式表的实现方法
2016/05/20 Javascript
canvas知识总结
2017/01/25 Javascript
jQuery实现web页面樱花坠落的特效
2017/06/01 jQuery
详解Angular 中 ngOnInit 和 constructor 使用场景
2017/06/22 Javascript
js CSS3实现卡牌旋转切换效果
2017/07/04 Javascript
js实现鼠标拖拽多选功能示例
2017/08/01 Javascript
怎么使用javascript深度拷贝一个数组
2019/06/06 Javascript
使用Vue CLI创建typescript项目的方法
2019/08/09 Javascript
vue 里面的 $forceUpdate() 强制实例重新渲染操作
2020/09/21 Javascript
[05:04]DOTA2上海特级锦标赛主赛事第二日TOP10
2016/03/04 DOTA
简单了解Django模板的使用
2017/12/20 Python
python中map的基本用法示例
2018/09/10 Python
解决python xlrd无法读取excel文件的问题
2018/12/25 Python
python3.5安装python3-tk详解
2019/04/26 Python
python获取指定日期范围内的每一天,每个月,每季度的方法
2019/08/08 Python
python GUI库图形界面开发之PyQt5单选按钮控件QRadioButton详细使用方法与实例
2020/02/28 Python
python 实现端口扫描工具
2020/12/18 Python
Ellos丹麦:时尚和服装在线
2016/09/19 全球购物
策划助理岗位职责
2013/11/18 职场文书
计划生育标语
2014/06/23 职场文书
出资证明书范本(标准版)
2014/09/24 职场文书
优秀学生干部事迹材料
2014/12/24 职场文书
文艺部部长竞选稿
2015/11/21 职场文书
实现AJAX异步调用和局部刷新的基本步骤
2022/03/17 Javascript