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 相关文章推荐
input的focus方法使用
Mar 13 Javascript
将json对象转换为字符串的方法
Feb 20 Javascript
如何编写高质量JS代码
Dec 28 Javascript
跟我学习javascript的Date对象
Nov 19 Javascript
详解Javascript模板引擎mustache.js
Jan 20 Javascript
Window.Open打开窗体和if嵌套代码
Apr 15 Javascript
Jquery基础之事件操作详解
Jun 14 Javascript
jquery 判断是否支持Placeholder属性的方法
Feb 07 Javascript
Angular.js基础学习之初始化
Mar 10 Javascript
微信小程序input框中加入小图标的实现方法
Jun 19 Javascript
CSS3 动画卡顿性能优化的完美解决方案
Sep 20 Javascript
vue双向绑定数据限制长度的方法
Nov 04 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&amp;&amp;mysql)一
2006/10/09 PHP
php适配器模式介绍
2012/08/14 PHP
PHP strip_tags()去除HTML、XML以及PHP的标签介绍
2014/02/18 PHP
php获取mysql字段名称和其它信息的例子
2014/04/14 PHP
php邮件发送的两种方式
2020/04/28 PHP
php使用正则表达式获取字符串中的URL
2016/12/29 PHP
laravel实现按时间日期进行分组统计方法示例
2019/03/23 PHP
PHP利用pdo_odbc实现连接数据库示例【基于ThinkPHP5.1搭建的项目】
2019/05/13 PHP
(JS实现)MapBar中坐标的加密和解密的脚本
2007/05/16 Javascript
javascript学习笔记(二)数组和对象部分
2014/09/30 Javascript
jQuery的事件委托实例分析
2015/07/15 Javascript
深入JavaScript高级程序设计之对象、数组(栈方法,队列方法,重排序方法,迭代方法)
2015/12/01 Javascript
AngularJS 中文API参考手册
2016/07/28 Javascript
通过BootStrap实现轮播图的实际应用
2016/09/26 Javascript
原生js封装的ajax方法示例
2018/08/02 Javascript
Python运用于数据分析的简单教程
2015/03/27 Python
分析并输出Python代码依赖的库的实现代码
2015/08/09 Python
浅析AST抽象语法树及Python代码实现
2016/06/06 Python
Windows下Anaconda的安装和简单使用方法
2018/01/04 Python
python解决js文件utf-8编码乱码问题(推荐)
2018/05/02 Python
Python使用Phantomjs截屏网页的方法
2018/05/17 Python
python基础教程之while循环
2019/08/14 Python
Django 设置多环境配置文件载入问题
2020/02/25 Python
Python 输出详细的异常信息(traceback)方式
2020/04/08 Python
Selenium元素定位的30种方式(史上最全)
2020/05/11 Python
python实现取余操作的简单实例
2020/08/16 Python
Python 开发工具通过 agent 代理使用的方法
2020/09/27 Python
M1芯片安装python3.9.1的实现
2021/02/02 Python
Spartoo西班牙官网:法国时尚购物网站
2018/03/27 全球购物
What's the difference between an interface and abstract class? (接口与抽象类有什么区别)
2012/10/29 面试题
农田水利实习自我鉴定
2013/09/19 职场文书
办理信用卡收入证明范例
2014/09/13 职场文书
2016年元旦主持词
2015/07/06 职场文书
2015年社区反邪教工作总结
2015/10/14 职场文书
OpenCV-Python模板匹配人眼的实例
2021/06/08 Python
详解MongoDB的条件查询和排序
2021/06/23 MongoDB