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生成随机大小写字母的方法
Feb 20 Javascript
jQuery 鼠标经过(hover)事件的延时处理示例
Apr 14 Javascript
jQuery实现iframe父窗体和子窗体的相互调用
Jun 17 Javascript
js实现图片粘贴上传到服务器并展示的实例
Nov 08 Javascript
three.js中文文档学习之通过模块导入
Nov 20 Javascript
js数据类型检测总结
Aug 05 Javascript
Vue 实现拖动滑块验证功能(只有css+js没有后台验证步骤)
Aug 24 Javascript
详解vue-cli 3.0 build包太大导致首屏过长的解决方案
Nov 10 Javascript
Vue v-model组件封装(类似弹窗组件)
Jan 08 Javascript
JS实现“全选”和&quot;全不选&quot;功能代码实例
Feb 06 Javascript
JS实现密码框效果
Sep 10 Javascript
javascript实现前端分页功能
Nov 26 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&amp;mysql 日期操作小记
2012/02/27 PHP
关于php程序报date()警告的处理(date_default_timezone_set)
2013/10/22 PHP
laravel入门知识点整理
2020/09/15 PHP
脚本收藏iframe
2006/07/21 Javascript
使用Modello编写JavaScript类
2006/12/22 Javascript
JQuery 构建客户/服务分离的链接模型中Table中的排序分析
2010/01/22 Javascript
jQuery Jcrop插件实现图片选取功能
2011/11/23 Javascript
event.currentTarget与event.target的区别介绍
2012/12/31 Javascript
jquery使用append(content)方法注意事项分享
2014/01/06 Javascript
JS中的二叉树遍历详解
2016/03/18 Javascript
一步一步封装自己的HtmlHelper组件BootstrapHelper(三)
2016/09/14 Javascript
vue子组件使用自定义事件向父组件传递数据
2017/05/27 Javascript
浅谈Vue SSR 的 Cookies 问题
2017/11/20 Javascript
JS html事件冒泡和事件捕获操作示例
2019/05/01 Javascript
Python中apply函数的用法实例教程
2014/07/31 Python
python 字典中取值的两种方法小结
2018/08/02 Python
python实现对输入的密文加密
2019/03/20 Python
Django框架组成结构、基本概念与文件功能分析
2019/07/30 Python
Django bulk_create()、update()与数据库事务的效率对比分析
2020/05/15 Python
keras 多gpu并行运行案例
2020/06/10 Python
keras自动编码器实现系列之卷积自动编码器操作
2020/07/03 Python
Python基于xlrd模块处理合并单元格
2020/07/28 Python
pytorch学习教程之自定义数据集
2020/11/10 Python
使用css3实现的tab选项卡代码分享
2014/12/09 HTML / CSS
美国创意礼品网站:UncommonGoods
2017/02/03 全球购物
美国在线乐器和设备商店:Musician’s Friend
2018/07/06 全球购物
日本小田急百货官网:Odakyu
2018/07/19 全球购物
请问如下代码执行后a和b的值分别是什么
2016/05/05 面试题
C/C++程序员常见面试题二
2015/11/19 面试题
会计学个人自荐信模板
2013/12/13 职场文书
元旦文艺汇演主持词
2014/03/26 职场文书
【HBU】数据库第四周 单表查询
2021/04/05 SQL Server
Python打包exe时各种异常处理方案总结
2021/05/18 Python
Java 数据结构七大排序使用分析
2022/04/02 Java/Android
SQL Server的存储过程与触发器以及系统函数和自定义函数
2022/04/10 SQL Server
最新动漫情报:2022年7月新番定档超过30部, OVERLORD骨王第四季也在其中噢
2022/05/04 日漫