关于vue指令(directive)
1.指令的注册
指令跟组件一样需要注册才能使用,同样有两种方式,一种是全局注册:
Vue.directive('dirName',function(){
//定义指令
});
另外一种是局部注册:
new Vue({
directives:{
dirName:{
//定义指令
}
}
});
2.指令的定义
指令定义,官方提供了五个钩子函数来供我们使用,分别代表了一个组件的各个生命周期
bind
: 只调用一次,指令第一次绑定到元素时调用,用这个钩子函数可以定义一个在绑定时执行一次的初始化动作。inserted
: 被绑定元素插入父节点时调用(父节点存在即可调用,不必存在于 document 中)。update
: 被绑定元素所在的模板更新时调用,而不论绑定值是否变化。通过比较更新前后的绑定值,可以忽略不必要的模板更新(详细的钩子函数参数见下)。componentUpdated
: 被绑定元素所在模板完成一次更新周期时调用。unbind
: 只调用一次, 指令与元素解绑时调用。
在这里其他几个都好理解,关于模板更新(update)这里,本人的理解是:该指令所在的模板有变化而需要重新渲染的时候,比如当一个输入框的model发生了变化就会触发指令。当然此处说的比较模糊,具体的还有待研究。
这段代码可以实现关于update的使用
<div id="app">
<input type="text" v-focus="name" v-model="name" :data-name="name">
<button type="button" @click="name='zw'">click</button>
<!--当点击按钮的时候name改变,继而触发update中的方法-->
</div>
<script>
Vue.directive('focus',{
bind: function(el, binding){
console.log('bind:',binding.value);
},
inserted: function(el, binding){
console.log('insert:',binding.value);
},
update: function(el, binding, vnode, oldVnode){
el.focus();
console.log(el.dataset.name);//这里的数据是可以动态绑定的
console.table({
name:binding.name,
value:binding.value,
oldValue:binding.oldValue,
expression:binding.expression,
arg:binding.arg,
modifiers:binding.modifiers,
vnode:vnode,
oldVnode:oldVnode
});
},
componentUpdated: function(el, binding){
console.log('componentUpdated:',binding.name);
}
});
new Vue({
el:'#app',
data:{
name:'zwzhai'
}
});
</script>
3.钩子函数的定义
以下是官方提供的几个参数:
- el: 指令所绑定的元素,可以用来直接操作 DOM 。
- binding: 一个对象,包含以下属性:
- name: 指令名,不包括
v-
前缀。 - value: 指令的绑定值, 例如:
v-my-directive="1 + 1"
, value 的值是2
。 - oldValue: 指令绑定的前一个值,仅在
update
和componentUpdated
钩子中可用。无论值是否改变都可用。 - expression: 绑定值的字符串形式。 例如
v-my-directive="1 + 1"
, expression 的值是"1 + 1"
。 - arg: 传给指令的参数。例如
v-my-directive:foo
, arg 的值是"foo"
。 - modifiers: 一个包含修饰符的对象。 例如:
v-my-directive.foo.bar
, 修饰符对象 modifiers 的值是{ foo: true, bar: true }
。
- name: 指令名,不包括
- vnode: Vue 编译生成的虚拟节点,查阅 VNode API 了解更多详情。
- oldVnode: 上一个虚拟节点,仅在
update
和componentUpdated
钩子中可用。
这几个参数,大家看文档也能理解,就不多说了,关于bingding的几个属性说一下自己的看法,value这个属性,可以传字面量,也可以传单条语句(如上),还可以以变量的形式如<input type="text" v-focus="name" v-model="name">;arg这里可以传一个字符串,因为在value去访问绑定值得时候拿到的不是直接写的那个,也就是说v-focus="name",这个name永远都是一个变量,需要定义赋值,而arg可以直接访问该值,如v-focus:foo,那么在钩子函数中拿到的就是foo这个字符串。
在vue的指令中是不可以双向数据绑定的,如官方所说:除了 el
之外,其它参数都应该是只读的,尽量不要修改他们。如果需要在钩子之间共享数据,建议通过元素的 dataset 来进行。这里补充下关于dataset的知识:
data- 是html5的一个新属性,查了下浏览器支持程度,目前的主流浏览器都是支持的,IE的话要到10以上。具体的使用:在HTML中以属性的方式去写,data-yourname="value",在js中取这个属性就不用使用getAttribute这个方法,而是直接访问,ele.dataset.yourname,在js中你也可以添加和删除,添加:ele.dataset.dessert="yourname",删除:dette ele.dataset.name。此外,这个属性可以用作css选择器:.class[data-name]:{}。
最后附上自己写的一个vue小程序,简单的页面切换,使用vue-cli构建,sample的简单版,还使用的mint-ui组件库,git地址:https://github.com/Stevenzwzhai/news-vue
关于vue指令(directive)的更多相关文章
- vue从入门到进阶:自定义指令directive,插件的封装以及混合mixins(七)
一.自定义指令directive 除了核心功能默认内置的指令 (v-model 和 v-show),Vue 也允许注册自定义指令.注意,在 Vue2.0 中,代码复用和抽象的主要形式是组件.然而,有的 ...
- Vue input 控件: 通过自定义指令(directive)使用正则表达式限制input控件的输入
前言: 网站中的input输入框使用非常广泛,因业务场景不同需要对输入框做合法性校验或限制输入,比如电话号码.邮件.区号.身份证号等.input框的不合法内容主要有两种方式处理:1.用户输入内容后,通 ...
- vue指令实现拖动的高级写法
不熟悉vue自定义指令看这里: https://cn.vuejs.org/v2/guide/custom-directive.html vue指令实现拖动方法很方便也挺简单,但是网上大部分的教程代码, ...
- Vue指令实现原理
前言 自定义指令是vue中使用频率仅次于组件,其包含bind.inserted.update.componentUpdated.unbind五个生命周期钩子.本文将对vue指令的工作原理进行相应介绍, ...
- Vue指令及自定义指令的使用
导航列表: 一.vue指令 二.自定义指令 一.vue指令 回到顶部 1. v-text v-text主要用来更新textContent,可以等同于JS的text属性,不会解析标签,会把标签解析 ...
- vue2,vue指令和选项
vue特点 mvvm框架 响应式(声明式) 组件化(支持自定义组件) 丰富的指令(Dom功能的抽象) 基于选项(template,data,computed,watch,methods) vue文档集 ...
- Angular之指令Directive系列
项目筹备近期开启Angular学习,指令比较难理解所以记录备案,推荐Angualr实战学习视频大漠穷秋 Angular实战 一.指令directive概述 指令可以对元素绑定事件监听或者改变DOM结构 ...
- Vue指令总结---小白同学必看
今天主要复习一下我们最熟悉vue指令,想要代码撸得快,就要多看书,多看看官方的文档和学习指令,学习编程是一个非常享受的过程,尤其是你不断地去解决问题,获得一项技能,实现薪水的上涨.进行Vue的指令烹饪 ...
- 一个能拖动,能调整大小,能更新bind值的vue指令-vuedragx
一. 背景说明 开发一个可自定义组件化门户配置页面,期间采用了vue框架作为前端视图引擎,作为一个刚入手vue的萌新,开发第一个功能就遇到了拦路虎.需要一个拖动并且可改变大小的容器盒子.当时查看vue ...
- angularjs - 自定义指令(directive)
自定义指令(directive) 使用 .directive 函数来添加自定义的指令. 要调用自定义指令,HTML 元素上需要添加自定义指令名. 例子:使用驼峰法来命名一个指令, demoDirect ...
随机推荐
- Save()saveOrUpdate()Hibernate的merge()方法
Save save()方法能够保存实体到数据库,正如方法名称save这个单词所表明的意思.我们能够在事务之外调用这个方法,这也是我不喜欢使用这个方法保存数据的原因.假如两个实体之间有关系(例如empl ...
- React-Router学习整理
欢迎大家指导与讨论 : ) 一.前言 本文摘要:react-router的基本用法,动画效果与路由,路由权限控制,路由离开确认,根据路由切分的按需加载,路由组件的属性.本文是笔者在学习时整理的笔记,由 ...
- 关于vs2012、tfs2012、windows server 2008r2一些记录
windows server 2008r2安装在虚拟机中,装有tfs2012.sql server 2012. 物理机装有vs2012 1.用vs2012连接tfs时候,会让输入一个有效用户.输入的是 ...
- 再读《C++ Primer》——变量和基本类型
刚上大学那时,几个室友一块买了本<C++ Primer>第4版,看了一遍后就没怎么碰了,偶尔拿出来翻翻,当作工具书使用.后来知道有第5版了,一直觉得内容差不多吧.直到最近,再读其中的一些内 ...
- ReactNative新手学习之路07ListView_ renderHeader使用StaticContainer
react native新手学习之路07ListView_ renderHeader使用StaticContainer 1.某些特殊场景需要用ScrollView滚动和ListView配合但是不幸运的 ...
- 音乐播放器 EasyMusic (一)
EasyMusic 一. 代码获取 github 上链接为 https://github.com/VincentWYJ/EasyMusic, 感兴趣的朋友可以同步下来看, 欢迎提出宝贵意见或建议. 1 ...
- 如何在个人博客引擎 Hexo 中添加 Swiftype 搜索组件
在您现在看到的我的博客站点,后台使用的是 Hexo 作为博客引擎,但是默认集成的搜索组件是进行 form 提交到 Google 进行搜索的,为了更好地体验,本文介绍如何在 Hexo 博客中集成 Swi ...
- java certificate 工具 portecle.sourceforge.net
https://sourceforge.net/projects/portecle/?source=directory 当需要处理java证书的时候这个是个好工具.省得敲命令了.
- RGW/SWIFT对象存储性能测试工具--COSBench安装
Cosbench是Intel的开源云存储性能测试软件,COSBench目前已经广泛使用与云存储测试,并作为云存储的基准测试工具使用 https://github.com/intel-cloud/cos ...
- Pycharm如何添加第三方库和插件
首先打开Pycharm,点击左上角 >>File >>Setting . 打开之后点击 >>PRoject :untitled >>Projec ...