学习笔记: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.使用 ...
随机推荐
- strings---对象文件或二进制文件中查找可打印的字符串
strings命令在对象文件或二进制文件中查找可打印的字符串.字符串是4个或更多可打印字符的任意序列,以换行符或空字符结束. strings命令对识别随机对象文件很有用. 语法 strings [ - ...
- 【Cocos游戏实战】功夫小子第五课之帮助场景和选关功能的实现
功夫小子之帮助场景和选关功能的实现 转载请注明出处:http://blog.csdn.net/suool/article/details/46661231 本节课的视频教程地址是: hmsr=teac ...
- Objective-C_类的扩展
一Category的定义和使用 二Extension的定义和使用 三Protocol的定义和使用 delegate的使用 一.Category的定义和使用 Category,分类或类目.主要作用是为没 ...
- smarty课程---最最最简单的smarty例子
smarty课程---最最最简单的smarty例子 一.总结 一句话总结:其实所有的模板引擎的工作原理是差不多的,无非就是在php程序里面用正则匹配将模板里面的标签替换为php代码从而将两者混合为一个 ...
- 调用C#版gdal库的一个注意事项
作者:朱金灿 来源:http://blog.csdn.net/clever101 在编译完C#版gdal库(x86平台)下,写了一个C#的控制台测试程序,出现下面的错误: 解决办法是将工程的目标平台设 ...
- Kinect 开发 —— 姿势识别
姿势和手势通常会混淆,但是他们是两个不同的概念.当一个人摆一个姿势时,他会保持身体的位置和样子一段时间.但是手势包含有动作,例如用户通过手势在触摸屏上,放大图片等操作. 通常,游戏者很容易模仿指定姿势 ...
- storm排错
1.运行错误如下 Exception in thread "main" java.lang.RuntimeException: org.apache.thrift7.transpo ...
- Laravel输出sql语句
$queries = DB::getQueryLog();
- mv---移动文件或目录
mv命令用来对文件或目录重新命名,或者将文件从一个目录移到另一个目录中.source表示源文件或目录,target表示目标文件或目录.如果将一个文件移到一个已经存在的目标文件中,则目标文件的内容将被覆 ...
- 如何优雅的写UI——(2)MFC下基于CFormView的文档视图程序
在MFC中可以创建多种类型的窗口程序,如对话框程序.单文档结构程序(非文档/视图结构).单文档(文档/视图结构)以及多文档视图结构程序等. 在编写一般的小工具时,我们的首选显然是对话框程序,不过基于对 ...