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 强制类型转换函数
May 17 Javascript
基于jquery的simpleValidate简易验证插件
Jan 31 Javascript
JavaScript返回网页中超链接数量的方法
Apr 03 Javascript
浅析2种JavaScript继承方式
Dec 04 Javascript
jQuery图片前后对比插件beforeAfter用法示例【附demo源码下载】
Sep 20 Javascript
简单谈谈Vue 模板各类数据绑定
Sep 25 Javascript
微信小程序开发图片拖拽实例详解
May 05 Javascript
详解vue数据渲染出现闪烁问题
Jun 29 Javascript
Node.JS 循环递归复制文件夹目录及其子文件夹下的所有文件
Sep 18 Javascript
基于打包工具Webpack进行项目开发实例
May 29 Javascript
JS实现移动端双指缩放和旋转方法
Dec 13 Javascript
JavaScript中的惰性载入函数及优势
Feb 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
第七节 类的静态成员 [7]
2006/10/09 PHP
php表单提交问题的解决方法
2011/04/12 PHP
Ubuntu中启用php的mail()函数并解决发送邮件速度慢问题
2015/03/27 PHP
在Linux系统下一键重新安装WordPress的脚本示例
2015/06/30 PHP
js防止表单重复提交的两种方法
2013/09/30 Javascript
JS获取各种宽度、高度的简单介绍
2014/12/19 Javascript
jQuery实现鼠标划过展示大图的方法
2015/03/09 Javascript
javascript实现跨域的方法汇总
2015/06/25 Javascript
批量下载对路网图片并生成html的实现方法
2016/06/07 Javascript
jquery弹出框插件jquery.ui.dialog用法分析
2016/08/20 Javascript
JS中BOM相关知识点总结(必看篇)
2016/11/22 Javascript
Javascript中数组去重与拍平的方法示例
2017/02/03 Javascript
jacascript DOM节点——元素节点、属性节点、文本节点
2017/04/18 Javascript
利用Three.js如何实现阴影效果实例代码
2017/09/26 Javascript
JS和JQuery实现雪花飘落效果
2017/11/30 jQuery
详解Vue webapp项目通过HBulider打包原生APP
2018/06/29 Javascript
微信小程序实现收藏与取消收藏切换图片功能
2018/08/03 Javascript
element-ui组件table实现自定义筛选功能的示例代码
2019/03/15 Javascript
vue滚动tab跟随切换效果
2020/06/29 Javascript
详解vuejs中执行npm run dev出现页面cannot GET/问题
2020/04/26 Javascript
JSONObject与JSONArray使用方法解析
2020/09/28 Javascript
pytyon 带有重复的全排列
2013/08/13 Python
python 使用re.search()筛选后 选取部分结果的方法
2018/11/28 Python
如何解决django-celery启动后迅速关闭
2019/10/16 Python
python获取系统内存占用信息的实例方法
2020/07/17 Python
python获得命令行输入的参数的两种方式
2020/11/02 Python
node中使用shell脚本的方法步骤
2021/03/23 Javascript
网络工程师的自我评价
2013/10/02 职场文书
老公给老婆的道歉信
2014/01/10 职场文书
餐饮收银员岗位职责
2014/02/07 职场文书
金融管理应届生求职信
2014/02/20 职场文书
珍惜资源保护环境的建议书
2014/05/14 职场文书
2014年党员承诺书范文
2014/05/20 职场文书
机电专业求职信
2014/06/14 职场文书
关于十八大的演讲稿
2014/09/15 职场文书
解除劳动合同协议书
2014/09/17 职场文书