Vue - 自定义指令
1、Vue.directive(id,definition)注册一个全局自定义指令，接收两个参数，指令ID以及定义对象
2、钩子函数：将作用域与DOM进行链接，链接函数用来创建可以操作DOM的指令
bind - 只调用一次，在指令第一次绑定到元素上时候调用
update - 在bind之后立即以初始值为参数第一次调用，之后绑定值变化的时候，参数为新值与旧值
unbind - 只调用一次，在指令从元素上解绑的时候调用
-------------------------------------------------------------------------------------------------------------------------------------------------------------------------------
-------------------------------------------------------------------------------------------------------------------------------------------------------------------------------
Vue.directive('my-directive',{
bind : function(){
//准备工作
//例如，添加事件处理器或只需要运行一次的高耗任务
},
update : function(){
//值更新时的工作
//也会以初始值为参数调用一次
},
unbind : function(){
//清理工作
//例如，删除bind()添加的事件监听器
}
})
//调用
<div v-my-directive="someValue"></div>
//只需要update函数，可以传一个函数替代定义对象
Vue.directive('my-directive',function(value){})
-------------------------------------------------------------------------------------------------------------------------------------------------------------------------------
-------------------------------------------------------------------------------------------------------------------------------------------------------------------------------
<!-- 如果指令需要多个值，可以传入一个js对象 -->
<!-- 指令可以使用合法的js表达式 -->
<body id="example">
<div id="demo" v-demo="{color : 'white',text : 'hello!'}"></div>
</body>
<script>
Vue.directive('demo',function(value){
console.info(value.color); //white
console.info(value.text) // hello!
})
var demo = new Vue({
el : '#demo'
})
</script>
-------------------------------------------------------------------------------------------------------------------------------------------------------------------------------
-------------------------------------------------------------------------------------------------------------------------------------------------------------------------------
当指令使用字面修饰符，值将按普通字符串处理并传递给update方法，update方法只调用一次，因为普通字符串不能影响数据变化
<body id="example">
<div id="demo" v-demo.literal="foo bar baz"></div>
</body>
<script>
Vue.directive('demo',function(value){
console.info(value); //foo bar baz
})
var demo = new Vue({
el : '#demo'
})
</script>
3、以属性的形式使用自定义属性
<body id="demo">
<my-directive class="hello" name="hi"></my-directive>
</body>
<script type="text/javascript">
Vue.elementDirective('my-directive',{
//api同普通指令一致
bind : function(){
console.info(this.el.className);
console.info(this.el.getAttribute('name'))
}
}) var demo = new Vue({
el : '#demo'
})
</script>
-------------------------------------------------------------------------------------------------------------------------------------------------------------------------------
-------------------------------------------------------------------------------------------------------------------------------------------------------------------------------
<body id="demo">
<my-directive class="hello" name="hi" a="params"></my-directive>
</body>
<script type="text/javascript">
Vue.elementDirective('my-directive',{
params : ['a'], //api同普通指令一致
bind : function(){
console.info(this.el.className);
console.info(this.el.getAttribute('name'))
}
}) var demo = new Vue({
el : '#demo'
})
</script> <!-- 或者需要自动更新的时候，需要一个回调 -->
<body id="demo">
<my-directive class="hello" name="hi" v-bind:a="someValue"></my-directive>
<input type="text" v-model="someValue">
</body>
<script type="text/javascript">
Vue.elementDirective('my-directive',{
params : ['a'], paramWatchers : {
a : function(val,oldValue){
console.info('a changes');
}
}
}) var demo = new Vue({
el : '#demo',
data : {
someValue : 'value'
}
})
</script>
4、自定义属性用在对象上，对象内部属性变化的时候触发update，在指令定义对象中指定deep:true
<body id="demo">
<div v-my-directive="a"></div>
<button @click="change">change</button>{{a,b,c}}
</body>
<script>
Vue.directive('my-directive',function(){
deep : true, update : function(obj){
//当obj的嵌套属性变化时候调用
console.info(obj.b.c);
}
})
var demoVM = new Vue({
el : '#demo', data : {
a : {b : {c : 2}}
}, method : {
change : function(){
demoVM.a.b.c = 4;
}
}
})
</script>
5、acceptStatement让自定义指令接受内联语句
<body id="demo">
<div v-my-directive="a++"></div>
{{a}}
</body>
<script>
Vue.directive('my-directive',function(){
acceptStatement : true, update : function(fn){
//当obj的嵌套属性变化时候调用
console.info(fn.toString())
fu();
}
})
var demoVM = new Vue({
el : '#demo', data : {
a : 5
}
})
</script>
6、v-on绑定多个事件时，要是是不同的事件类型，例如点击，focus，change，会按照业务需求进行选择，要是绑定了2个甚至多个click事件，那么v-on只会绑定第一个click事件
Vue - 自定义指令的更多相关文章
- vue自定义指令
Vue自定义指令: Vue.directive('myDr', function (el, binding) { el.onclick =function(){ binding.value(); } ...
- vue 自定义指令的使用案例
参考资料: 1. vue 自定义指令: 2. vue 自定义指令实现 v-loading: v-loading,是 element-ui 组件库中的一个用于数据加载过程中的过渡动画指令,项目中也很少需 ...
- vue自定义指令(Directive中的clickoutside.js)的理解
阅读目录 vue自定义指令clickoutside.js的理解 回到顶部 vue自定义指令clickoutside.js的理解 vue自定义指令请看如下博客: vue自定义指令 一般在需要 DOM 操 ...
- Vue自定义指令报错：Failed to resolve directive: xxx
Vue自定义指令报错 Failed to resolve directive: modle 这个报错有2个原因: 1.指令单词拼错 2.Vue.directive() 这个方法没有写在 new Vue ...
- vue自定义指令clickoutside使用以及扩展用法
vue自定义指令clickoutside使用以及扩展用法 产品使用vue+element作为前端框架.在功能开发过程中,难免遇到使用element的组件没办法满足特殊的业务需要,需要对其进行定制,例如 ...
- vue自定义指令clickoutside扩展--多个元素的并集作为inside
都是个人理解,如果发现错误,恳请大家批评指正,谢谢.还有我说的会比较啰嗦,因为是以自身菜鸡水平的视角来记录学习理解的过程,见谅. 1.前言 产品使用vue+element作为前端框架.在功能开发过程中 ...
- 每个人都能实现的vue自定义指令
前文 先来bb一堆废话哈哈.. 用vue做项目也有一年多了.除了用别人的插件之外.自己也没尝试去封装指令插件之类的东西来用. 刚好最近在项目中遇到一个问题.(快速点击按钮多次触发多次绑定的方法),于是 ...
- vue自定义指令，比onerror更优雅的方式实现当图片加载失败时使用默认图，提供三种方法
首先,来看下效果图(演示一下图片正常加载与加载失败时的效果) 在线体验地址:https://hxkj.vip/demo/vueImgOnerror/ 一.常规方法解决 我们都知道,img标签支持one ...
- Vue自定义指令使用场景
当你第一次接触vue的时候,一定会使用到其中的几个指令,比如:v-if.v-for.v-bind...这些都是vue为我们写好的,用起来相当的爽.如果有些场景不满足,需要我们自己去自定义,那要怎么办呢 ...
- Vue自定义指令使用方法详解 和 使用场景
Vue自定义指令的使用,具体内容如下 1.自定义指令的语法 Vue自定义指令语法如下: Vue.directive(id, definition) 传入的两个参数,id是指指令ID,definitio ...
随机推荐
- Redis实战阅读笔记——开始
Redis实战这本书,看完以后最大的不是redis本身的东西,而是作者面对实际问题的分析而给出的设计方案,可以看成NoSql设计的应用.个人从这方面收获很多,至于Redis本身的东西,这个就花一两个小 ...
- D3.js学习（三）
上一节中,我们已经画出了图表,并且给图表添加了坐标轴的标签和标题,在这一节中,我们将要学习几个绘制线条不同特性的几个函数,以及给图表添加格栅.ok,进入话题! 如何给线条设置绘制的样式? 这个其实非常 ...
- ecshop 秒杀并发时库存会被减到小于0的解决办法
ecshop 秒杀并发时库存会被减到小于0更新库存后,再进行库存检查,如果库存为负数,则执行事务的回滚. begin();//开始一个事物处理开始 $sql = "UPDATE " ...
- Makefile文件学习总结
Makefile文件相当于是一种脚本编程语言,目的是实现自动化编译.编写makefile文件的过程中可以使用变量.控制结构和函数等一般编程语言的特性. Makefile文件的组成内容.makefile ...
- (转)android 蓝牙通信编程
转自:http://blog.csdn.net/pwei007/article/details/6015907 Android平台支持蓝牙网络协议栈,实现蓝牙设备之间数据的无线传输. 本文档描述了怎样 ...
- CF576E
*在#里发他一直WA这道CF题,然后我就去看了看,感觉还挺有趣的,那我就在这里整理一下我的思路..毕竟一边听歌.. 题意: 给个图,每条边初始无色,每次给一个询问(e,c)表示把e涂成颜色c,如果此时 ...
- Node.js配合node-http-proxy解决本地开发ajax跨域问题
情景: 前后端分离,本地前端开发调用接口会有跨域问题,一般有以下3种解决方法: 1. 后端接口打包到本地运行(缺点:每次后端更新都要去测试服下一个更新包,还要在本地搭建java运行环境,麻烦) 2. ...
- 使用vue1.0+es6+vue-cli+webpack+iview-ui+jQuery 撸一套高质量的后台管理系统
首先按照vue.js官网的指令安装: 1.本地安装好node.js 2.根据官方命令行工具 详情 这样一个官方的脚手架工具就已经搭建好了:但是有一点需要注意的是由于现在按照官方的搭建方法是搭建vue2 ...
- [Sass]声明变量
[Sass]声明变量 定义变量的语法: 在有些编程语言中(如,JavaScript)声明变量都是使用关键词"var"开头,但是在 Sass 不使用这个关键词,而是使用大家都喜欢的美 ...
- oracleDBA-D3
1.静态参数文件 PFILE:使用操作系统提供的VIM进行编辑,包含多个参数文件 参数文件名是:init.ora(如: D:\app\Administrator\admin\orcl\pfile) 其 ...