学习笔记:Vue——自定义指令
在Vue2.0中,代码复用和抽象的主要形式是组件。然鹅,有的情况下,你仍然需要对普通DOM元素进行底层操作,这时候就会用到自定义指令。
1.举个聚焦输入框的例子,全局注册focus指令
Vue.directive('focus', {
inserted: function (el) {
el.focus()
}
})
在模板中任何元素上使用自定义的指令 v-focus属性,如下:
<input v-focus />
当页面加载时,该元素将获得焦点(注意:autofocus在移动版Safari上不工作)
2.自定义指令的各种钩子函数
- bind:只调用一次,指令第一次绑定到元素时调用。在这里可以进行一次性的初始化设置
- inserted:被绑定元素插入父节点时调用
- ...
3.钩子函数参数
- el:指令所绑定的元素,可以用来直接操作DOM
- binding:一个对象,包含以下属性:
- name:指令名
- value:指令的绑定值
- oldValue:指令绑定的前一个值(尽在update和componentUpdated钩子中可用)
- expression:字符串形式的指令表达式
- arg:传给指令的参数
- modifiers:一个包含修饰符的对象
- vnode:Vue编译生成的虚拟节点。VNode API
- oldVnode:上一个虚拟节点
4.完整的自定义指令样例:
<div id="hook-arguments-example" v-demo:foo.a.b="message"></div>
Vue.directive('demo', {
bind: function (el, binding, vnode) {
var s = JSON.stringify
el.innerHTML =
'name: ' + s(binding.name) + '<br>' +
'value: ' + s(binding.value) + '<br>' +
'expression: ' + s(binding.expression) + '<br>' +
'argument: ' + s(binding.arg) + '<br>' +
'modifiers: ' + s(binding.modifiers) + '<br>' +
'vnode keys: ' + Object.keys(vnode).join(', ')
}
}) new Vue({
el: '#hook-arguments-example',
data: {
message: 'hello!'
}
})
(完)
参考:Vue官方文档——自定义指令 https://cn.vuejs.org/v2/guide/custom-directive.html
学习笔记:Vue——自定义指令的更多相关文章
- AngularJs学习笔记3——自定义指令
指令 概述: 前面也说过一些常用指令,用于快速入门.现在详细总结一下:指令用于实现各种页面的操作,是对于底层DOM操作的封装,扩展了HTML的行为,实现页面交互以及数据绑定. 指令是一种执行的信号,一 ...
- AngularJS学习笔记(四) 自定义指令
指令(directive)是啥?简单来说就是实现一定功能的XXX...之前一直用的ng-model,ng-click等等都是指令.当我有一个ng没提供的需求的时候,就可以自定义个指令.指令的好处显而易 ...
- angular学习笔记(三十)-指令(6)-transclude()方法(又称linker()方法)-模拟ng-repeat指令
在angular学习笔记(三十)-指令(4)-transclude文章的末尾提到了,如果在指令中需要反复使用被嵌套的那一坨,需要使用transclude()方法. 在angular学习笔记(三十)-指 ...
- vue自定义指令clickoutside使用以及扩展用法
vue自定义指令clickoutside使用以及扩展用法 产品使用vue+element作为前端框架.在功能开发过程中,难免遇到使用element的组件没办法满足特殊的业务需要,需要对其进行定制,例如 ...
- vue自定义指令clickoutside扩展--多个元素的并集作为inside
都是个人理解,如果发现错误,恳请大家批评指正,谢谢.还有我说的会比较啰嗦,因为是以自身菜鸡水平的视角来记录学习理解的过程,见谅. 1.前言 产品使用vue+element作为前端框架.在功能开发过程中 ...
- Vue自定义指令使用场景
当你第一次接触vue的时候,一定会使用到其中的几个指令,比如:v-if.v-for.v-bind...这些都是vue为我们写好的,用起来相当的爽.如果有些场景不满足,需要我们自己去自定义,那要怎么办呢 ...
- vue 自定义指令的魅力
[第1103期]vue 自定义指令的魅力 点点 前端早读课 2017-11-08 前言 很多事情不能做过多的计划,因为计划赶不上变化.今日早读文章由富途@点点翻译分享. 正文从这开始- 在你初次接触一 ...
- vue自定义指令要点
vue自定义指令的基础使用这里就不阐述,看官网文档:https://cn.vuejs.org/v2/guide/custom-directive.html 本文用一个实例描述自定义指令的要点,自定义一 ...
- Vue学习笔记-Vue.js-2.X 学习(三)===>组件化高级
(四) 组件化高级 1.插槽(slot)的基本使用 A:基本使用: <slot></slot> B:默认置:<slot><h1>中间可以放默认值< ...
- Vue学习笔记-Vue.js-2.X 学习(二)===>组件化开发
===重点重点开始 ========================== (三) 组件化开发 1.创建组件构造器: Vue.extends() 2.注册组件: Vue.component() 3.使用 ...
随机推荐
- linux下chm阅读器
推荐使用Okular这个软件,Okular是一个pdf阅读器,但是对chm文件支持很好.
- Linux桌面词典 星际译王(StarDict)
星际译王(StarDict)是利用GTK(GIMP TOOLKIT)开发的国际化的.跨平台的自由的桌面字典软件.它并不包含字典档,使用者须自行下载配合使用.它可以运行于多种不同的平台,如Linux, ...
- Python正则表达式初识(五)
正则表达式的内容很丰富,今天小编继续给大家分享Python正则表达式的基础知识.今天要给大家的讲的特殊字符是竖线“|”.竖线“|”实质上是一个或的关系. 1.直接上代码演示,比方说我们需要匹配一个字符 ...
- java.util.ConcurrentModificationException 异常解决的方法及原理
近期在修程序的bug,发现后台抛出下面异常: Exception in thread "main" java.util.ConcurrentModificationExceptio ...
- Effective C++ Item 38 通过复合塑模出 has-a 或 is-implemented-in-terms-of
本文为senlie原创.转载请保留此地址:http://blog.csdn.net/zhengsenlie 经验:在应用域,复合意味着 has-a. 在实现域.复合意味着 is-implemented ...
- Objective-C 布尔类型 和 class、SEL类型
发现非常多刚開始学习的人无法区分bool和BOOL及class类型,今天闲来无事.写个博文做个区分 1. bool是C语言的布尔类型.有true和false,BOOL是Objective C 语言的布 ...
- Razor数组数据
控制器层 public ActionResult DemoArray() { Product[] array = { new Product {Name = "Kayak", Pr ...
- 62.nodejs中的ejs模板学习
转自:https://blog.csdn.net/dongmelon/article/details/72403913 02.ejs.这是被include的文件 <script> cons ...
- C/C++(语句,数组)
C语言语句: 两大选择,三大循环,四大跳转 两大跳转:if,switch 三大循环:for,while,do-while 四大跳转:break,continue,goto,return do-whil ...
- C/C++(基础编码-补码详解)
两个数的交换 1.引入第三者. 2.求和运算,求差.(这样会产生内存溢出) 3.异或运算 a = a^b; b = a^b; a = a^b; 8b(bit位) = 1B(Byte=字节)//最小单位 ...