Vue的土著指令和自定义指令实例详解


Posted in Javascript onFebruary 04, 2018

1.土著指令

当我开始学习Vue的时候,看官网的时候看到了“指令”两个字。我愣住了,what?指令是啥啊?后来继续往下看,像这种什么“v-for”“v-show”“v-if”都叫做指令。等到后来Vue玩的差不多了,开始写项目的时候发现,常见的指令也就那么几个,比如“v-if”“v-show”“v-model”“v-for”“v-bind”“v-on”

你可以认为这是一种语法糖或者这是一种命令。在常见的这些指令中,大体的使用方法如下:

1.v-text :string  用法:更新元素的textContent,更新部分的textContent,需要使用{{Mustache}}插值。

2.v-show:any 用法:根据表达式真假值,切换元素的 display css 属性 。

3.v-if:any  用法:表达式的真假条件渲染元素。在切换时元素以及它的数据绑定/组件被销毁并且重建。如果是<template>,并提出它的内容作为条件块。 条件变化时改指令出发过渡效果。

4.v-for :Array | Object | number | string  用法:基于源数据多次渲染元素或者模板块 语法:alias in expression。

5.v-on:Function |  Inline Statement  参数 $event( required) 修饰符。 

6.v-bind:any 类型: any (with argument)  | Object  (without argument) 参数:attrOrProp (optional) ;修饰符: .prop ---被用于绑定DOM 属性;.camel ---transform the kebab-case attribute name into camelCase .(supported since 2.1.0) 用法: 在绑定 class 和 style 特性时,支持其它类型的值。如对象和数组;在绑定prop时,子组件必须声明prop。

7.v-model :限制<input> <select> components 。

2.自定义指令

 但是,仅仅靠上面的这些有时候是不够的,比如最近我司做的一个项目中,UI做了一个页面。然后我和UI在聊需求的时候,我说这个输入框吧最好给他加一个效果,弹出输入框的时候获得焦点,显示一个跳动的光标。这样用户可以更清楚的看到在哪输入。

Vue的土著指令和自定义指令实例详解

达成共识之后,写功能的时候我突然发现,WTF?我这是用的Vue啊,数据驱动视图啊,总不能document.getElementById(inputid).focus()吧。

于是乎,我就去找文档,突然发现了一个单词directive,我去查了查这个单词的意思:

Vue的土著指令和自定义指令实例详解

看了一下文档,大体意思就是,虽然吧这个v-model和v-show已经很好用了,但是总是挡不住天马行空的前端人员的骚操作,所以在有的情况下,需要对普通 DOM 元素进行底层操作,这时候就会用到自定义指令。当然呢,官方的例子就是我需要的这个,当即我就get了一波新知识。

Vue的土著指令和自定义指令实例详解

如同我随手写下的这个HTML,里面有一个v-focus,大概没见过,这是啥?别急,继续往下看:

Vue的土著指令和自定义指令实例详解

没错,这个v-focus就是我自己定义的指令,当然啦,你也可以用除了关键字之外的单词去命名,方便自由。

我们来看一下这个自定义指令,相信大家对下面的这部分都明白,无非就是如果value的值等同于true,那么el就focus即获得焦点。

那个前面的update什么意思呢?update是更新的意思,这是一个钩子函数,即focusState更新时调用function,在调用函数时,继续判断focusState——如果真,则获得焦点;为假,一边凉快去吧。同样,我们在查看官方文档的时候,就会发现,同样的钩子函数还有:

•bind:只调用一次,指令第一次绑定到元素时调用。在这里可以进行一次性的初始化设置。

•inserted:被绑定元素插入父节点时调用 (仅保证父节点存在,但不一定已被插入文档中)。

•update:所在组件的 VNode 更新时调用,但是可能发生在其子 VNode 更新之前。指令的值可能发生了改变,也可能没有。但是你可以通过比较更新前后的值来忽略不必要的模板更新。

•componentUpdated:指令所在组件的 VNode 及其子 VNode 全部更新后调用。

•unbind:只调用一次,指令与元素解绑时调用。

利用这些操作,我们可以完成很多比较骚的套路,比如可以在加载大的图片时,可以先用纯色占位,当图片加载完成后才直接渲染出来。例如下图:

Vue的土著指令和自定义指令实例详解

在这个例子中,我们调用的钩子函数是inserted,即插入父节点后触发。当图片还未加载好时,先用随机的颜色代替,等图片加载好之后,去掉背景色,替换成图片。

我们在此处传入的参数为el----当前的dom节点和binding-----一个对象,包含以下属性:

•def:钩子函数。

•rawName:指令的名称。

•value:向指令传入的值

Vue的土著指令和自定义指令实例详解

同样,我们也可以封装多种已经造好的轮子为自定义指令。毕竟,我们站在巨人的肩膀上才会看的更远,走的更远。

Javascript 相关文章推荐
使用JS进行目录上传(相当于批量上传)
Dec 05 Javascript
推荐40个非常优秀的jQuery插件和教程【系列三】
Nov 09 Javascript
JavaScript高级程序设计 阅读笔记(四) ECMAScript中的类型转换
Feb 27 Javascript
javascript 控制input只允许输入的各种指定内容
Jun 19 Javascript
原生js结合html5制作小飞龙的简易跳球
Mar 30 Javascript
javascript实现列表切换效果
May 02 Javascript
jQuery四种选择器使用及示例
Jun 05 Javascript
如何用JS判断两个数字的大小
Jul 21 Javascript
微信公众号开发 自定义菜单跳转页面并获取用户信息实例详解
Dec 08 Javascript
Java中int与integer的区别(基本数据类型与引用数据类型)
Feb 19 Javascript
微信小程序使用Promise简化回调
Feb 06 Javascript
如何使用less实现随机下雪动画详解
Jan 02 Javascript
彻底理解js面向对象之继承
Feb 04 #Javascript
vue里面父组件修改子组件样式的方法
Feb 03 #Javascript
vue中element组件样式修改无效的解决方法
Feb 03 #Javascript
浅谈vue中改elementUI默认样式引发的static与assets的区别
Feb 03 #Javascript
Vue修改mint-ui默认样式的方法
Feb 03 #Javascript
vue+webpack实现异步组件加载的方法
Feb 03 #Javascript
基于vue-resource jsonp跨域问题的解决方法
Feb 03 #Javascript
You might like
PHP.vs.JAVA
2016/04/29 PHP
Yii2 中实现单点登录的方法
2018/03/09 PHP
详解PHP版本兼容之openssl调用参数
2018/07/25 PHP
PHP实现用session来实现记录用户登陆信息
2018/10/15 PHP
Laravel5.5 手动分页和自定义分页样式的简单实现
2019/10/15 PHP
PHP7 windows支持
2021/03/09 PHP
js实现弹窗插件功能实例代码分享
2013/12/12 Javascript
js处理php输出时间戳对不上号的解决方法
2014/06/20 Javascript
jquery库文件略庞大用纯js替换jquery的方法
2014/08/12 Javascript
jQuery简单实现禁用右键菜单
2015/03/10 Javascript
JavaScript常用标签和方法总结
2015/09/01 Javascript
javascript运动效果实例总结(放大缩小、滑动淡入、滚动)
2016/01/08 Javascript
jQuery自定义数值抽奖活动代码
2016/06/11 Javascript
使用jquery.qrcode.js生成二维码插件
2016/10/17 Javascript
微信小程序商城项目之购物数量加减(3)
2017/04/17 Javascript
详解React Native 采用Fetch方式发送跨域POST请求
2017/11/15 Javascript
vue实现学生录入系统之添加删除功能
2018/07/11 Javascript
koa2服务端使用jwt进行鉴权及路由权限分发的流程分析
2019/07/22 Javascript
vue本地打开build后生成的dist文件夹index.html问题
2019/09/04 Javascript
[00:16]热血竞技场
2019/03/06 DOTA
python基于queue和threading实现多线程下载实例
2014/10/08 Python
Python引用传值概念与用法实例小结
2017/10/07 Python
python中单例常用的几种实现方法总结
2018/10/13 Python
浅析python参数的知识点
2018/12/10 Python
Python的几种主动结束程序方式
2019/11/22 Python
使用python绘制cdf的多种实现方法
2020/02/25 Python
TensorFlow的环境配置与安装教程详解(win10+GeForce GTX1060+CUDA 9.0+cuDNN7.3+tensorflow-gpu 1.12.0+python3.5.5)
2020/06/22 Python
美国室内和室外装饰花盆购物网站:ePlanters
2019/03/22 全球购物
美国战术品牌:5.11 Tactical
2019/05/01 全球购物
什么是三层交换,说说和路由的区别在那里
2014/09/01 面试题
客户代表自我评价范例
2013/09/24 职场文书
2014学习全国两会精神心得体会2000字
2014/03/11 职场文书
党员廉洁自律个人总结
2015/02/13 职场文书
自主招生英文自荐信
2015/03/25 职场文书
法定代表人资格证明书
2015/06/18 职场文书
浪漫的婚礼主持词
2015/06/30 职场文书