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 相关文章推荐
几个比较经典常用的jQuery小技巧
Mar 01 Javascript
基于jQuery的可用于选项卡及幻灯的切换插件
Mar 28 Javascript
js操作iframe父子窗体示例
May 22 Javascript
js下拉选择框与输入框联动实现添加选中值到输入框的方法
Aug 17 Javascript
javascript下拉列表中显示树形菜单的实现方法
Nov 17 Javascript
在Html中使用Requirejs进行模块化开发实例详解
Apr 15 Javascript
jQuery实现拖拽页面元素并将其保存到cookie的方法
Jun 12 Javascript
vue在使用ECharts时的异步更新和数据加载详解
Nov 22 Javascript
vue-cli 构建骨架屏的方法示例
Nov 08 Javascript
vue实现移动端轻量日期组件不依赖第三方库的方法
Apr 28 Javascript
javascript实现倒计时效果
Feb 17 Javascript
canvas实现贪食蛇的实践
Feb 15 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
Session 失效的原因汇总及解决丢失办法
2015/09/30 PHP
PHP pear安装配置教程
2016/05/14 PHP
PHP实现批量检测网站是否能够正常打开的方法
2016/08/23 PHP
在JavaScript中使用inline函数的问题
2007/03/08 Javascript
javascript Split方法,indexOf方法、lastIndexOf 方法和substring 方法
2009/03/21 Javascript
AJAX使用了UpdatePanel后无法使用alert弹出脚本
2010/04/02 Javascript
js过滤数组重复元素的方法
2010/09/05 Javascript
document.getElementBy(&quot;id&quot;)与$(&quot;#id&quot;)有什么区别
2013/09/22 Javascript
Mac/Windows下如何安装Node.js
2013/11/22 Javascript
理解javascript中try...catch...finally
2015/12/25 Javascript
js停止冒泡和阻止浏览器默认行为的简单方法
2016/05/15 Javascript
BootStrap tooltip提示框使用小结
2016/10/26 Javascript
简单实现IONIC购物车功能
2017/01/10 Javascript
利用纯js + transition动画实现移动端web轮播图详解
2017/09/10 Javascript
js canvas实现红包照片效果
2018/08/21 Javascript
JS操作Fckeditor的一些常用方法(获取、插入等)
2020/02/19 Javascript
Vue + Element-ui的下拉框el-select获取额外参数详解
2020/08/14 Javascript
使用AutoJs实现微信抢红包的代码
2020/12/31 Javascript
[59:07]海涛为你详解DOTA2新版本“贤哲秘契”
2014/11/22 DOTA
python框架django基础指南
2016/09/08 Python
python3.4实现邮件发送功能
2018/05/28 Python
python requests post多层字典的方法
2018/12/27 Python
使用TensorFlow搭建一个全连接神经网络教程
2020/02/06 Python
python实现邮件循环自动发件功能
2020/09/11 Python
Pandas中两个dataframe的交集和差集的示例代码
2020/12/13 Python
使用css3绘制出各种几何图形
2016/08/17 HTML / CSS
HTML5边玩边学(2)基础绘图实现方法
2010/09/21 HTML / CSS
HTML5中判断横屏竖屏的方法(移动端)
2016/08/04 HTML / CSS
物业保安主管岗位职责
2013/12/25 职场文书
创业计划书撰写原则
2014/01/25 职场文书
医学生自我评价
2014/01/27 职场文书
刊首寄语大全
2014/04/11 职场文书
勤奋学习演讲稿
2014/05/10 职场文书
钢琴师观后感
2015/06/12 职场文书
初中语文教师研修日志
2015/11/13 职场文书
Python实现查询剪贴板自动匹配信息的思路详解
2021/07/09 Python