Vue.directive使用注意
首先,Vue.directive要在实例初始化之前,不然会报错,还有,定义的指令不支持驼峰式写法,也会报下面同样的错,虽然在源码中没有找到在哪里统一处理大小写,但是在有关directive的方法中捕捉到的指令命名统一变为小写,所以,还是用'-'或者'_'分割吧。
vue.js:491 [Vue warn]: Failed to resolve directive: xxx
然后,其定义方式有两种,一种是Vue.directive('xxx', function(el, bind, vNode){}),其中el为dom,vNode为vue的虚拟dom,bind为一较复杂对象,详情可见Vue-directive钩子函数中的参数的参数,还有一种,为
Vue.directive('my-directive', {bind: function () {},inserted: function () {},update: function () {},componentUpdated: function () {},unbind: function () {}
})
参数代表的含义,参见钩子函数描述
最后,要使用自定义的指令,只需在对用的元素中,加上'v-'的前缀形成类似于内部指令'v-if','v-text'的形式。
// Vue.directiveVue.directive('test_directive', function(el, bind, vNode){el.style.color = bind.value;});var app = new Vue({el: '#app',data: {num: 10,color: 'red'},methods: {add: function(){this.num++;}}});
当然,也可以将method中的方法加入,bind.value即为methods中的方法。
<div id="app"><div v-test_directive="changeColor">{{num}}</div><button @click="add">增加</button></div><script type="text/javascript">// Vue.directiveVue.directive('test_directive', function(el, bind, vNode){el.style.color = bind.value();});var app = new Vue({el: '#app',data: {num: 10,color: 'red'},methods: {add: function(){this.num++;},changeColor: function(){return this.color;}}});
这种形式,可以模仿'v-once',并进行一定的复杂逻辑,但是想要完全达到'v-once',可能需要考虑Vue-directive的钩子函数各个周期。下面是固定num的值,使得add的方法无效。
<div id="app"><div v-test_directive="changeColor">{{num}}</div><button @click="add">增加</button></div><script type="text/javascript">// Vue.directiveVue.directive('test_directive', function(el, bind, vNode){el.style.color = bind.value();});var app = new Vue({el: '#app',data: {num: 10,color: 'red'},methods: {add: function(){this.num++;},changeColor: function(){this.num = 20;return this.color;}}});
因为小生刚刚接触vue,所以,希望前辈能多加指点。
Vue.directive使用注意相关推荐
- vue filter对象_学习vue源码(3) 手写Vue.directive、Vue.filter、Vue.component方法
一.Vue.directive Vue.directive(id,[definition]); 1)参数 { string } id{ Function | Object } [ definition ...
- Vue.directive自定义指令
Vue除了内部指令,我们也可以定义一些属于自己的指令,比如我们要定义一个v-diy的指令,作用就是让文字变成红色. 写好了这个功能,我们现在就自己定义一个全局的指令.我们这里使用Vue.directi ...
- vue指令02---自动获取焦点(全局自定义指令Vue.directive())和全局过滤器Vue.filter() 的学习...
1.1 自动获取焦点 在自动获取焦点的学习中涉及到了一个钩子函数 mounted(),它表示页面一加载进来就执行函数里面的内容,(和window.onload相似,这样有助于理解),mounted 钩 ...
- Vue.directive注册指令
指令定义函数提供了几个钩子函数(可选): vue指令的生命周期 bind: 只调用一次,指令第一次绑定到元素时调用,用这个钩子函数可以定义一个在绑定时执行一次的初始化动作. inserted: 被绑定 ...
- Vue.directive()的用法和实例
官网实例: https://cn.vuejs.org/v2/api/#Vue-directive https://cn.vuejs.org/v2/guide/custom-directive.html ...
- Vue directive 自定义指令
Vue自定义指令一共有5个钩子函数,分别是: bind.inserted.update.componentUpdate .unbind bind:只调用一次,指令第一次绑定到元素时调用.在这里可以进行 ...
- vue中自定义指令Vue.directive(指令名, 对象)
1.自定义全局指令 可以在不同的组件实例中使用, 也就是说在全局任意位置都可以使用Vue.directive(指令名, 对象); // 对象中定义了 该指令的所有生命周期函数方法,也叫钩子函数Vue. ...
- vue.directive自定义指令 vue.set使用示例
- vue从入门到进阶:自定义指令directive,插件的封装以及混合mixins(七)
一.自定义指令directive 除了核心功能默认内置的指令 (v-model 和 v-show),Vue 也允许注册自定义指令.注意,在 Vue2.0 中,代码复用和抽象的主要形式是组件.然而,有的 ...
- vue 自定义指令(directive)实例
一.内置指令 1.v-bind:响应并更新DOM特性:例如:v-bind:href v-bind:class v-bind:title v-bind:bb 2.v-on:用于监听DOM事件: 例 ...
最新文章
- BNUOJ 52305 Around the World 树形dp
- Go程序性能分析pprof
- eureka 和zookeeper 区别 优势【转】
- 65.4. Other GUI - phpOraAdmin
- 微信小程序 - 非Form数据怎么发送到后端?
- 学习编程你要记住以下几点
- xshell使用xftp传输文件 、使用pure-ftpd搭建ftp服务
- 编程基本功:为了突出工作重点,正确造假
- MySQL必知必会——数据库基础知识和MySQL基本使用
- 如何将时间字体LED化(类似电子表)显示
- linux查看网卡光强,LINUX OV5640驱动
- STM32F407的外部中断设置_RCC_APB2PeriphClockCmd_RCC_APB2Periph_SYSCFG
- 【Python打卡2019】20190406之货币兑换
- 服务器识别不了移动硬盘
- Python网络编程(OSI Socket)
- ASO优化常见的问题精选之ASO指数是什么?
- javaMail邮件发送功能(多收件人,多抄送人,多密送人,多附件)
- JS实现鼠标经过和离开图片放大缩小效果
- 软件设计之UML—UML的构成[上]
- C语言的 a, *a, a