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 相关文章推荐
Dom 是什么的详细说明
Oct 25 Javascript
通过上下左右键和回车键切换光标实现代码
Mar 08 Javascript
php读取sqlite数据库入门实例代码
Jun 25 Javascript
window.open打开窗口被拦截的快速解决方法
Aug 04 Javascript
使用BootStrapValidator完成前端输入验证
Sep 28 Javascript
jQuery实现的手风琴侧边菜单效果
Mar 29 jQuery
微信小程序对接七牛云存储的方法
Jul 30 Javascript
JavaScript实现QQ列表展开收缩扩展功能
Oct 30 Javascript
JS 正则表达式验证密码、邮箱格式的实例代码
Oct 28 Javascript
vue-i18n结合Element-ui的配置方法
May 20 Javascript
Vue优化:常见会导致内存泄漏问题及优化详解
Aug 04 Javascript
JS实现购物车基本功能
Nov 08 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
将RTF格式的文件转成HTML并在网页中显示的代码
2006/10/09 PHP
php学习笔记 php中面向对象三大特性之一[封装性]的应用
2011/06/13 PHP
php禁止某ip或ip地址段访问的方法
2015/02/25 PHP
PHP实现递归复制整个文件夹的类实例
2015/08/03 PHP
PHP编程中的__clone()方法使用详解
2015/11/27 PHP
PHP+Ajax实现验证码的实时验证
2016/07/20 PHP
PHP中多线程的两个实现方法
2016/10/14 PHP
javascript ie6兼容position:fixed实现思路
2013/04/01 Javascript
div+css+js实现无缝滚动类似marquee无缝滚动兼容firefox
2013/08/29 Javascript
jQuery使用load()方法载入另外一个网页文件内的指定标签内容到div标签的方法
2015/03/25 Javascript
工厂模式在JS中的实践
2017/01/18 Javascript
JavaScript实现三级联动菜单实例代码
2017/06/26 Javascript
vue 计时器组件的实现代码
2017/09/14 Javascript
详解node nvm进行node多版本管理
2017/10/21 Javascript
记一次webpack3升级webpack4的踩坑经历
2018/06/12 Javascript
Python算法应用实战之栈详解
2017/02/04 Python
python读取文本中的坐标方法
2018/10/14 Python
机器学习实战之knn算法pandas
2019/06/22 Python
Django Rest framework三种分页方式详解
2019/07/26 Python
pycharm 安装JPype的教程
2019/08/08 Python
jupyter notebook 增加kernel教程
2020/04/10 Python
CSS3与动画有关的属性transition、animation、transform对比(史上最全版)
2017/08/18 HTML / CSS
Myprotein蛋白粉美国官网:欧洲畅销运动营养品牌
2016/11/15 全球购物
数控机械专业个人的自我评价
2014/01/02 职场文书
积极分子思想汇报
2014/01/04 职场文书
浙大毕业生自荐信
2014/01/26 职场文书
优秀教师的感人事迹
2014/02/04 职场文书
社区居务公开实施方案
2014/03/27 职场文书
乡村卫生服务一体化管理实施方案
2014/03/30 职场文书
2014年护士个人工作总结
2014/11/11 职场文书
2014年审计人员工作总结
2014/12/19 职场文书
小学生光盘行动倡议书
2015/04/28 职场文书
三好学生评选事迹材料(2016精选版)
2016/02/25 职场文书
MySQL中VARCHAR与CHAR格式数据的区别
2021/05/26 MySQL
Springboot如何使用logback实现多环境配置?
2021/06/16 Java/Android
使用CSS实现百叶窗效果示例代码
2023/05/07 HTML / CSS