vue自定义指令的创建和使用方法实例分析


Posted in Javascript onDecember 04, 2018

本文实例讲述了vue自定义指令的创建和使用方法。分享给大家供大家参考,具体如下:

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

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="https://cdn.bootcss.com/vue/2.0.1/vue.min.js"></script>
  <title>3water.com vue自定义指令</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>

使用在线HTML/CSS/JavaScript代码运行工具:http://tools.3water.com/code/HtmlJsRun测试,可得到如下运行效果:

vue自定义指令的创建和使用方法实例分析

<!DOCTYPE html>
<html>
<head lang="en">
  <meta charset="UTF-8">
  <script src="https://cdn.bootcss.com/vue/2.0.1/vue.min.js"></script>
  <title>3water.com vue自定义指令</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>

使用在线HTML/CSS/JavaScript代码运行工具:http://tools.3water.com/code/HtmlJsRun测试,可得到如下运行效果:

vue自定义指令的创建和使用方法实例分析

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

希望本文所述对大家vue.js程序设计有所帮助。

Javascript 相关文章推荐
javascript 验证日期的函数
Mar 18 Javascript
Jqgrid设置全选(选择)及获取选择行的值示例代码
Dec 28 Javascript
JavaScript实现的购物车效果可以运用在好多地方
May 09 Javascript
angularJS 入门基础
Feb 09 Javascript
Ajax与服务器(JSON)通信实例代码
Nov 05 Javascript
javascript入门之string对象【新手必看】
Nov 22 Javascript
jQuery命名空间与闭包用法示例
Jan 12 Javascript
js实现数组去重方法及效率?Ρ? target=
Feb 14 Javascript
Bootstrap实现各种进度条样式详解
Apr 13 Javascript
JS数组操作之增删改查的简单实现
Aug 21 Javascript
ES6学习教程之模板字符串详解
Oct 09 Javascript
基于vue实现滚动条滚动到指定位置对应位置数字进行tween特效
Apr 18 Javascript
用vuex写了一个购物车H5页面的示例代码
Dec 04 #Javascript
vue实现的双向数据绑定操作示例
Dec 04 #Javascript
使用jquery模拟a标签的click事件无法实现跳转的解决
Dec 04 #jQuery
jQuery利用FormData上传文件实现批量上传
Dec 04 #jQuery
vue实现的组件兄弟间通信功能示例
Dec 04 #Javascript
微信小程序模板template简单用法示例
Dec 04 #Javascript
vue项目刷新当前页面的三种方法
Dec 04 #Javascript
You might like
PHP header函数分析详解
2011/08/06 PHP
php+ajax导入大数据时产生的问题处理
2014/06/11 PHP
PHP获取二维数组中某一列的值集合
2015/12/25 PHP
用js查找法实现当前栏目的高亮显示的代码
2007/11/24 Javascript
Javascript客户端将指定区域导出到Word、Excel的代码
2008/10/22 Javascript
JavaScript 继承详解(二)
2009/07/13 Javascript
Iframe 自适应高度并实时监控高度变化的js代码
2009/10/30 Javascript
为JavaScript提供睡眠功能(sleep) 自编译JS引擎
2010/08/16 Javascript
return false,对阻止事件默认动作的一些测试代码
2010/11/17 Javascript
40款非常棒的jQuery 插件和制作教程(系列一)
2011/10/26 Javascript
jQuery 滑动方法slideDown向下滑动元素
2014/01/16 Javascript
js判断url是否有效的两种方法
2014/03/04 Javascript
使用JS实现jQuery的addClass, removeClass, hasClass函数功能
2014/10/31 Javascript
jQuery学习笔记之Ajax用法实例详解
2015/12/01 Javascript
JS实现的表格操作类详解(添加,删除,排序,上移,下移)
2015/12/22 Javascript
js实现对ajax请求面向对象的封装
2016/01/08 Javascript
Angular懒加载机制刷新后无法回退的快速解决方法
2016/08/30 Javascript
jQuery中Find选择器用法示例
2016/09/21 Javascript
微信小程序开发之toast等弹框提示使用教程
2017/06/08 Javascript
Easyui和zTree两种方式分别实现树形下拉框
2017/08/04 Javascript
Vue实现一个图片懒加载插件
2019/03/11 Javascript
详解jQuery-each()方法
2019/03/13 jQuery
vue+express+jwt持久化登录的方法
2019/06/14 Javascript
讲解Python的Scrapy爬虫框架使用代理进行采集的方法
2016/02/18 Python
Python实现生成随机数据插入mysql数据库的方法
2017/12/25 Python
利用python库在局域网内传输文件的方法
2018/06/04 Python
python实现图书借阅系统
2019/02/20 Python
Python 占位符的使用方法详解
2019/07/10 Python
Python使用for生成列表实现过程解析
2020/09/22 Python
Python中qutip用法示例详解
2020/10/02 Python
Python 列表反转显示的四种方法
2020/11/16 Python
css3 background属性调整增强介绍
2010/12/18 HTML / CSS
自我评价200字分享
2013/12/17 职场文书
致100米运动员广播稿
2014/02/14 职场文书
绿化工程实施方案
2014/03/17 职场文书
公司仓管员岗位职责
2015/04/01 职场文书