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 ...
随机推荐
- sqlserver事务加锁机制
锁的概述 一. 为什么要引入锁 多个用户同时对数据库的并发操作时会带来以下数据不一致的问题: 丢失更新A,B两个用户读同一数据并进行修改,其中一个用户的修改结果破坏了另一个修改的结果,比如订票系统 脏 ...
- webservice客户端开发
一.根据约定条件生成客户端 1.需要axis.jar包 2.调用 import org.apache.axis.client.Call; import org.apache.axis.client.S ...
- 等价类划分方法的应用（jsp）
[问题描述] 在三个文本框中输入字符串,要求均为1到6个英文字符或数字,按submit提交. [划分等价类] 条件1: 字符合法; 条件2: 输入1长度合法; 条件3: 输入2长度合法: 条件4: 输 ...
- vim 添加php自动补全 并格式化代码
自动补全,修改/etc/vimrc的配置 vim /etc/vimrc 添加: filetype plugin on autocmd FileType php set omnifunc=phpcomp ...
- C和指针 第十六章 习题
16.8 计算平均年龄 #include <stdlib.h> #include <stdio.h> #define MAX_LEN 512 int main() { int ...
- redis的一些操作
public class WnsRedisFactory { private static Cache pool = null; private static JedisConnectionFacto ...
- 异步控制---实现函数asyncAll，在执行完传入数组中func1，func2，func3异步函数后，输出“end”
实现函数asyncAll,在执行完传入数组中func1,func2,func3异步函数后,输出"end" function func1(callback) { setTimeout ...
- VS2015编译boost1.62
VS2015编译boost1.62 Boost库是一个可移植.提供源代码的C++库,作为标准库的后备,是C++标准化进程的开发引擎之一. Boost库由C++标准委员会库工作组成员发起,其中有些内容有 ...
- ajax——CORS跨域调用REST API 的常见问题以及前后端的设置
RESTful架构是目前比较流行的一种互联网软件架构,在此架构之下的浏览器前端和手机端能共用后端接口. 但是涉及到js跨域调用接口总是很头疼,下边就跟着chrome的报错信息一起来解决一下. 假设:前 ...
- Ansible Ubuntu 安装部署
一.安装: $ sudo apt-get install ansible 二.配置: a.基本配置 $ cd /etc/ansible/ $ sudo cp hosts hosts_back 备份一个 ...