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 建设银行登陆键盘
Jun 10 Javascript
IE6下JS动态设置图片src地址问题
Jan 08 Javascript
javascript高级程序设计第二版第十二章事件要点总结(常用的跨浏览器检测方法)
Aug 22 Javascript
jquery实现商品拖动选择效果代码(自写)
May 28 Javascript
javascript面向对象程序设计(一)
Jan 29 Javascript
Bootstrap每天必学之进度条
Nov 30 Javascript
浅析Bootstrap验证控件的使用
Jun 23 Javascript
前端分页功能的实现以及原理(jQuery)
Jan 22 Javascript
jQuery实现优雅的弹窗效果(6)
Feb 08 Javascript
JavaScript实现时间表动态效果
Jul 15 Javascript
Vue+webpack项目基础配置教程
Feb 12 Javascript
微信小程序实现简易table表格
Jun 19 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函数
2006/12/06 PHP
Windows下XDebug 手工配置与使用说明
2010/07/11 PHP
php警告Creating default object from empty value 问题的解决方法
2014/04/02 PHP
PHP中addcslashes与stripcslashes函数用法分析
2016/01/07 PHP
mysql查找删除重复数据并只保留一条实例详解
2016/09/24 PHP
PHP实现将优酷土豆腾讯视频html地址转换成flash swf地址的方法
2017/08/04 PHP
如何通过View::first使用Laravel Blade的动态模板详解
2017/09/21 PHP
通过js动态操作table(新增,删除相关列信息)
2012/05/23 Javascript
JavaScript实现信用卡校验方法
2015/04/07 Javascript
jquery trigger实现联动的方法
2016/02/29 Javascript
js+css实现select的美化效果
2016/03/24 Javascript
基于jQuery实现滚动刷新效果
2017/01/09 Javascript
Vue.js之slot深度复制详解
2017/03/10 Javascript
Vue键盘事件用法总结
2017/04/18 Javascript
利用Vue.js实现求职在线之职位查询功能
2017/07/03 Javascript
Angular.js中上传指令ng-upload的基本使用教程
2017/07/30 Javascript
Vue网页html转换PDF(最低兼容ie10)的思路详解
2017/08/24 Javascript
vue-router路由懒加载和权限控制详解
2017/12/13 Javascript
在vue项目创建的后初始化首次使用stylus安装方法分享
2018/01/25 Javascript
Node.js readline模块与util模块的使用
2018/03/01 Javascript
JS实现字符串去重及数组去重的方法示例
2018/04/21 Javascript
Vue.js中的高级面试题及答案
2020/01/13 Javascript
python Tcp协议发送和接收信息的例子
2019/07/22 Python
python实现超市商品销售管理系统
2019/10/25 Python
详解利用python识别图片中的条码(pyzbar)及条码图片矫正和增强
2020/11/17 Python
详解python使用金山词霸的翻译功能(调试工具断点的使用)
2021/01/07 Python
HTML5去掉输入框type为number时的上下箭头的实现方法
2020/01/03 HTML / CSS
世界上最大的高分辨率在线图片库:Alamy
2018/07/07 全球购物
全球最大的房车租赁市场:Outdoorsy
2018/09/19 全球购物
下列程序在32位linux或unix中的结果是什么
2014/03/25 面试题
竞选学生会演讲稿
2014/04/25 职场文书
勾股定理课后反思
2014/04/26 职场文书
商业街策划方案
2014/05/31 职场文书
2015年八一建军节活动总结
2015/03/20 职场文书
Mysql 用户权限管理实现
2021/05/25 MySQL
浅谈TypeScript 索引签名的理解
2021/10/16 Javascript