一、自定义指令的创建和使用

Vue自带的指令很多,v-for/v-if/v-else/v-else-if/v-model/v-bind/v-on/v-show/v-html/v-text...
但是这些指令都是比较偏向于工具化,有些时候在实现具体的业务逻辑的时候,发现不够用,如何来自定义指令.

1、自定义指令
①创建
new Vue({
  directives:{
    change:{
      bind:function(){},
      update:function(){},
      unbind:function(){}
    }
  }
})

在自定义指令时,在指令对应的配置对象中有3个处理函数指令对应的操作
bind
  指令在绑定到元素要执行的操作
update
  如果在调用指令时候,传了参数,当参数变化时候,就会执行update所指定的方法
unbind
  解绑要执行的操作

②使用自定义指令
directives:{
  hello:{
    bind:function(){},
    update:function(){},
    unbind:function(){}
  }
}

使用:
  v-hello

注意事项:
建议在给指令的命名采用小驼峰式的命名方式,比如changeBackgroundColor,在使用的时候,采用烤串式写法 v-change-background-color

(方法:参数,返回值)

bind方法以及update方法 都是有参数的,
一个是el,对应的是调用指令的元素
一个bindings,是一个对象:name/rawName/value/oldValue...

<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<script src="js/vue.js"></script>
<title></title>
</head>
<body> <div id="container">
<p>{{msg}}</p>
<!-- 准备实现需求:
在h1标签上面,加上一个按钮,当点击按钮时候,对count实现一次
自增操作,当count等于5的时候,在控制台输出‘it is a test’
-->
<button @click="handleClick">clickMe</button>
<h1
v-if="count < 6"
v-change="count">it is a custom directive</h1>
</div> <script>
//directive
new Vue({
el: '#container',
data: {
msg: 'Hello Vue',
count:0
},
methods:{
handleClick: function () {
//按钮单击,count自增
this.count++;
}
},
directives:{
change:{
bind: function (el,bindings) {
console.log('指令已经绑定到元素了');
console.log(el);
console.log(bindings);
//准备将传递来的参数
// 显示在调用该指令的元素的innerHTML
el.innerHTML = bindings.value;
},
update: function (el,bindings) {
console.log('指令的数据有所变化');
console.log(el);
console.log(bindings);
el.innerHTML = bindings.value;
if(bindings.value == 5)
{
console.log(' it is a test');
}
},
unbind: function () {
console.log('解除绑定了');
}
}
}
})
</script> </body>
</html>
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<script src="js/vue.js"></script>
<title></title>
</head>
<body> <div id="container">
<p>{{msg}}</p>
<h1 v-change-background-color="myBgColor">
it is a header1
</h1>
</div> <script>
new Vue({
el: '#container',
data: {
msg: 'Hello Vue',
myBgColor:'#ff0000'
},
directives:{
changeBackgroundColor:{
bind: function (el,bindings) {
console.log('in bind ');
console.log(bindings.value);
el.style.backgroundColor = bindings.value;
}
}
}
})
</script> </body>
</html>

<h4 v-change-background-color="'red'">背景色</h4>这样也是可以的,但是写死了,不好

vue自定义指令的创建和使用的更多相关文章

  1. 每个人都能实现的vue自定义指令

    前文 先来bb一堆废话哈哈.. 用vue做项目也有一年多了.除了用别人的插件之外.自己也没尝试去封装指令插件之类的东西来用. 刚好最近在项目中遇到一个问题.(快速点击按钮多次触发多次绑定的方法),于是 ...

  2. Vue自定义指令使用场景

    当你第一次接触vue的时候,一定会使用到其中的几个指令,比如:v-if.v-for.v-bind...这些都是vue为我们写好的,用起来相当的爽.如果有些场景不满足,需要我们自己去自定义,那要怎么办呢 ...

  3. vue 自定义指令的魅力

    [第1103期]vue 自定义指令的魅力 点点 前端早读课 2017-11-08 前言 很多事情不能做过多的计划,因为计划赶不上变化.今日早读文章由富途@点点翻译分享. 正文从这开始- 在你初次接触一 ...

  4. vue自定义指令

    Vue自定义指令: Vue.directive('myDr', function (el, binding) { el.onclick =function(){ binding.value(); } ...

  5. vue 自定义指令的使用案例

    参考资料: 1. vue 自定义指令: 2. vue 自定义指令实现 v-loading: v-loading,是 element-ui 组件库中的一个用于数据加载过程中的过渡动画指令,项目中也很少需 ...

  6. vue自定义指令(Directive中的clickoutside.js)的理解

    阅读目录 vue自定义指令clickoutside.js的理解 回到顶部 vue自定义指令clickoutside.js的理解 vue自定义指令请看如下博客: vue自定义指令 一般在需要 DOM 操 ...

  7. Vue自定义指令报错:Failed to resolve directive: xxx

    Vue自定义指令报错 Failed to resolve directive: modle 这个报错有2个原因: 1.指令单词拼错 2.Vue.directive() 这个方法没有写在 new Vue ...

  8. vue自定义指令clickoutside使用以及扩展用法

    vue自定义指令clickoutside使用以及扩展用法 产品使用vue+element作为前端框架.在功能开发过程中,难免遇到使用element的组件没办法满足特殊的业务需要,需要对其进行定制,例如 ...

  9. vue自定义指令clickoutside扩展--多个元素的并集作为inside

    都是个人理解,如果发现错误,恳请大家批评指正,谢谢.还有我说的会比较啰嗦,因为是以自身菜鸡水平的视角来记录学习理解的过程,见谅. 1.前言 产品使用vue+element作为前端框架.在功能开发过程中 ...

随机推荐

  1. SCUT - 106 - 花式ac - 主席树/启发式合并Treap

    https://scut.online/p/106 错在这组样例,发现是离散化之后,对k访问的时候也是应该访问离散化之后的k. 12 4 1 1 2 2 5 5 4 4 3 3 2 1 1 3 3 5 ...

  2. github提交用户权限被拒

    场景介绍: 之前登陆了朋友的github账号,保存了朋友的GitHub信息在本地.今天想重新提交一个项目到自己的GitHub账号时,一直用朋友的账号提交且提示权限被拒. 解决: 方法一,GitHub配 ...

  3. char 指针如何判断字符串需要输出长度

    先上代码: #include <stdio.h> #include <string.h> ] = "; int func1(const char *ip) { pri ...

  4. c++知识点总结3

    http://akaedu.github.io/book/ week1 引用:相当于变量的别名.下面r和n就相当于同一回事 ; int &r=n; 引用做函数参数: void swap(int ...

  5. 解决 vue-cli构建项目自动打开浏览器问题

    1.打开项目下的config/index.js 2.找到module.exports的 dev下的 autoOpenBrowser ,将 false 改成 true 3.控制台输入:npm run d ...

  6. 基于impi zabbix监控r720 测试过程

    1.F2进入服务器bios 修改network  使这台服务器能够被远程访问. 2.在远程的centos 7 服务器上安装  impitool工具包 #ipmitool -I lanplus -H X ...

  7. csv导入数据

    1.关闭Neo4j服务器进程 2.删除graph.db数据库文件  /data/databases/  rm -rf graph.db 3.重新启动Neo4j服务器 4.数据导入import 5.wi ...

  8. 【串线篇】spring boot配置嵌入式servlet容器

    SpringBoot默认使用Tomcat作为嵌入式的Servlet容器 问题? 一.如何定制和修改Servlet容器的相关配置 1.方法1修改和server有关的配置(ServerProperties ...

  9. uiautomator2 使用注意的地方

    uiautomator2项目地址:https://github.com/openatx/uiautomator2#basic-api-usages 下面记录一些自己在使用过程中的坑,仅供参考 1.通过 ...

  10. @ControllerAdvice全局数据绑定

        @ModelAttribute 注解标记该方法的返回数据是一个全局数据,默认情况下,这个全局数据的 key 就是返回的变量名,value 就是方法返回值,当然开发者可以通过 @ModelAtt ...