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 相关文章推荐
繁简字转换功能
Jul 19 Javascript
?牟┛途W扣了一??效果出?? target=
May 27 Javascript
javascript 计算两个整数的百分比值
Dec 26 Javascript
转换字符串为json对象的方法详解
Nov 29 Javascript
使用原生js封装webapp滑动效果(惯性滑动、滑动回弹)
May 06 Javascript
jQuery()方法的第二个参数详解
Apr 29 Javascript
判断访客终端类型集锦
Jun 05 Javascript
jQuery 1.9.1源码分析系列(十)事件系统之主动触发事件和模拟冒泡处理
Nov 24 Javascript
jquery按回车键实现表单提交的简单实例
May 25 Javascript
基于Vue2的独立构建与运行时构建的差别(详解)
Dec 06 Javascript
Vue入门之animate过渡动画效果
Apr 08 Javascript
在vue项目实现一个ctrl+f的搜索功能
Feb 28 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警告Creating default object from empty value 问题的解决方法
2014/04/02 PHP
php常用的安全过滤函数集锦
2014/10/09 PHP
使用新浪微博API的OAuth认证发布微博实例
2015/03/27 PHP
PHP实现的CURL非阻塞调用类
2018/07/26 PHP
PHP获取远程http或ftp文件的md5值的方法
2019/04/15 PHP
PHP语言对接抖音快手小红书视频/图片去水印API接口源码
2020/08/11 PHP
很全的显示阴历(农历)日期的js代码
2009/01/01 Javascript
写出更好的JavaScript之undefined篇(上)
2009/11/22 Javascript
JQuery 选择器、过滤器介绍
2011/02/14 Javascript
js中有关IE版本检测
2012/01/04 Javascript
jQuery之选择组件的深入解析
2013/06/19 Javascript
JSF中confirm弹出框的用法示例介绍
2014/01/07 Javascript
jQuery实现异步获取json数据的2种方式
2014/08/29 Javascript
jquery实现多屏多图焦点图切换特效的方法
2015/05/04 Javascript
Svg.js实例教程及使用手册详解(一)
2016/05/16 Javascript
js中获取jsp表单中radio类型的值简单实例
2016/08/15 Javascript
详解Vuejs2.0 如何利用proxyTable实现跨域请求
2017/08/03 Javascript
JavaScript体验异步更好的解决办法
2018/01/08 Javascript
nodejs log4js 使用详解
2019/05/31 NodeJs
vue+elementUI组件table实现前端分页功能
2020/11/15 Javascript
TypeScript 引用资源文件后提示找不到的异常处理技巧
2020/07/15 Javascript
详解python的数字类型变量与其方法
2016/11/20 Python
Python之ReportLab绘制条形码和二维码的实例
2018/01/15 Python
Python使用爬虫抓取美女图片并保存到本地的方法【测试可用】
2018/08/30 Python
pyttsx3实现中文文字转语音的方法
2018/12/24 Python
Python提取支付宝和微信支付二维码的示例代码
2019/02/15 Python
Python字符串的常见操作实例小结
2019/04/08 Python
使用virtualenv创建Python环境及PyQT5环境配置的方法
2019/09/10 Python
党的群众路线教育实践活动个人承诺书
2014/05/22 职场文书
治安消防安全责任书
2014/07/23 职场文书
民警个人对照检查剖析材料
2014/09/17 职场文书
干部作风整顿自我剖析材料和整改措施
2014/09/18 职场文书
小区门卫的岗位职责
2014/09/26 职场文书
银行求职自荐信范文
2015/03/04 职场文书
法定代表人免职证明
2015/06/24 职场文书
2016年暑假家长对孩子评语
2015/12/01 职场文书