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或css实现滚动广告的几种方案
Jan 28 Javascript
JavaScript中操作字符串之localeCompare()方法的使用
Jun 06 Javascript
js实现的简单radio背景颜色选择器代码
Aug 18 Javascript
javascript实现添加附件功能的方法
Nov 18 Javascript
jQuery动态修改字体大小的方法【测试可用】
Sep 09 Javascript
jQuery+CSS3实现仿花瓣网固定顶部位置带悬浮效果的导航菜单
Sep 21 Javascript
jQuery实现对象转为url参数的方法
Jan 11 Javascript
jQuery Json数据格式排版高亮插件json-viewer.js使用方法详解
Jun 12 jQuery
jQuery实现上传图片前预览效果功能
Aug 03 jQuery
使用Angular CLI从蓝本生成代码详解
Mar 24 Javascript
详解webpack的proxyTable无效的解决方案
Jun 15 Javascript
使用 Github Actions 自动部署 Angular 应用到 Github Pages的方法
Jul 20 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个人网站架设连环讲(一)
2006/10/09 PHP
Gregarius中文日期格式问题解决办法
2008/04/22 PHP
PHP 读取文件的正确方法
2009/04/29 PHP
PHP 读取大文件的X行到Y行内容的实现代码
2013/06/24 PHP
PHP实现货币换算的方法
2014/11/29 PHP
CI框架(CodeIgniter)公共模型类定义与用法示例
2017/08/10 PHP
浅析PHP开发规范
2018/02/05 PHP
Centos7安装swoole扩展操作示例
2020/03/26 PHP
PHP+Redis事务解决高并发下商品超卖问题(推荐)
2020/08/03 PHP
JavaScript函数获取事件源的小例子
2014/05/14 Javascript
实例分析浏览器中“JavaScript解析器”的工作原理
2016/12/12 Javascript
JavaScript中最常见的三个面试题解析
2017/03/04 Javascript
一次记住JavaScript的6个正则表达式方法
2018/02/22 Javascript
javascript、php关键字搜索函数的使用方法
2018/05/29 Javascript
详解在React.js中使用PureComponent的重要性和使用方式
2018/07/10 Javascript
微信小程序实现留言板
2018/10/31 Javascript
浅谈v-for 和 v-if 并用时筛选条件方法
2019/11/07 Javascript
微信小程序的引导页实现代码
2020/06/24 Javascript
React服务端渲染原理解析与实践
2021/03/04 Javascript
[02:36]DOTA2英雄基础教程 一击致命幻影刺客
2013/12/06 DOTA
Python数组条件过滤filter函数使用示例
2014/07/22 Python
跟老齐学Python之玩转字符串(3)
2014/09/14 Python
python切片的步进、添加、连接简单操作示例
2019/07/11 Python
Python图像处理之图片文字识别功能(OCR)
2019/07/30 Python
H5 canvas中width、height和style的宽高区别详解
2018/11/02 HTML / CSS
12个不为大家熟知的HTML5设计小技巧
2016/06/02 HTML / CSS
Html5 Geolocation获取地理位置信息实例
2016/12/09 HTML / CSS
小蚁科技官方商店:YI Technology
2019/08/23 全球购物
照片礼物和装饰:MyPhoto
2019/11/02 全球购物
空指针到底是什么
2012/08/07 面试题
高中生期中考试失利检讨书
2014/10/23 职场文书
文体活动总结
2015/02/04 职场文书
2015年度质量工作总结报告
2015/04/27 职场文书
2015年前台接待工作总结
2015/05/04 职场文书
如何制作自己的原生JavaScript路由
2021/05/05 Javascript
python基于turtle绘制几何图形
2021/06/15 Python