Vue.directive使用注意(小结)


Posted in Javascript onAugust 31, 2018

指令钩子函数会被传入以下参数:

  1. el:指令所绑定的元素,可以用来直接操作 DOM 。
  2. binding:一个对象,包含以下属性:vnode:Vue 编译生成的虚拟节点。移步 VNode API 来了解更多详情。
    1. ◦name:指令名,不包括 v- 前缀。
    2. ◦value:指令的绑定值,例如:v-my-directive="1 + 1" 中,绑定值为 2。
    3. ◦oldValue:指令绑定的前一个值,仅在 update 和 componentUpdated 钩子中可用。无论值是否改变都可用。
    4. ◦expression:字符串形式的指令表达式。例如 v-my-directive="1 + 1" 中,表达式为 "1 + 1"。
    5. ◦arg:传给指令的参数,可选。例如 v-my-directive:foo 中,参数为 "foo"。
    6. ◦modifiers:一个包含修饰符的对象。例如:v-my-directive.foo.bar 中,修饰符对象为 { foo: true, bar: true }。
  3. oldVnode:上一个虚拟节点,仅在 update 和 componentUpdated 钩子中可用。

具体事例

clickoutside.js

用途:clickoutside.js主要用于解决点解元素外的地方时执行函数  主要应用的常见有弹出层点击遮罩层是隐藏窗口,或者一些弹出层点击其他地方要消失的场景

v-clickoutside具体是怎么实现的

答:主要是通过在bind中定义函数 通过判断是否包含元素,执行binding.value函数

export default {
 /*
  @param el 指令所绑定的元素
  @param binding {Object} 
  @param vnode vue编译生成的虚拟节点
  */
 bind (el, binding, vnode) {
  const documentHandler = function(e) {  
   if(!vnode.context || el.contains(e.target)) {
    return false;
   }
   if (binding.expression) {
    binding.value(e)
   }
  }
 
   document.addEventListener('click', documentHandler)
 },
 update (el, binding) {
 
 },
 unbind(el) {
  document.removeEventListener('click', documentHandler);
 }
}

Vue.directive使用注意

首先,Vue.directive要在实例初始化之前,不然会报错,还有,定义的指令不支持驼峰式写法,也会报下面同样的错,虽然在源码中没有找到在哪里统一处理大小写,但是在有关directive的方法中捕捉到的指令命名统一变为小写,所以,还是用'-'或者'_'分割吧。

vue.js:491 [Vue warn]: Failed to resolve directive: xxx

然后,其定义方式有两种,一种是Vue.directive('xxx', function(el, bind, vNode){}),其中el为dom,vNode为vue的虚拟dom,bind为一较复杂对象,详情可见Vue-directive钩子函数中的参数的参数,还有一种,为

Vue.directive('my-directive', {
 bind: function () {},
 inserted: function () {},
 update: function () {},
 componentUpdated: function () {},
 unbind: function () {}
})

参数代表的含义,参见钩子函数描述

最后,要使用自定义的指令,只需在对用的元素中,加上'v-'的前缀形成类似于内部指令'v-if','v-text'的形式。

// Vue.directive
      Vue.directive('test_directive', function(el, bind, vNode){
        el.style.color = bind.value;
      });
      var app = new Vue({
        el: '#app',
        data: {
          num: 10,
          color: 'red'
        },
        methods: {
          add: function(){
            this.num++;
          }
        }
      });

当然,也可以将method中的方法加入,bind.value即为methods中的方法。

<div id="app">
      <div v-test_directive="changeColor">{{num}}</div>
      <button @click="add">增加</button>
    </div>

    <script type="text/javascript">
      // Vue.directive
      Vue.directive('test_directive', function(el, bind, vNode){
        el.style.color = bind.value();
      });
      var app = new Vue({
        el: '#app',
        data: {
          num: 10,
          color: 'red'
        },
        methods: {
          add: function(){
            this.num++;
          },
          changeColor: function(){
            return this.color;
          }
        }
      });

这种形式,可以模仿'v-once',并进行一定的复杂逻辑,但是想要完全达到'v-once',可能需要考虑Vue-directive的钩子函数各个周期。下面是固定num的值,使得add的方法无效。

<div id="app">
      <div v-test_directive="changeColor">{{num}}</div>
      <button @click="add">增加</button>
    </div>

    <script type="text/javascript">
      // Vue.directive
      Vue.directive('test_directive', function(el, bind, vNode){
        el.style.color = bind.value();
      });
      var app = new Vue({
        el: '#app',
        data: {
          num: 10,
          color: 'red'
        },
        methods: {
          add: function(){
            this.num++;
          },
          changeColor: function(){
            this.num = 20;

            return this.color;
          }
        }
      });

因为小生刚刚接触vue,所以,希望前辈能多加指点。也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
myFocus slide3D v1.1.0 使用方法与下载
Jan 12 Javascript
Node.js和PHP根据ip获取地理位置的方法
Mar 14 Javascript
BootStrap 智能表单实战系列(二)BootStrap支持的类型简介
Jun 13 Javascript
详解js树形控件—zTree使用总结
Dec 28 Javascript
JS判断指定dom元素是否在屏幕内的方法实例
Jan 23 Javascript
JS正则表达式验证中文字符
May 08 Javascript
angular.js指令中的controller、compile与link函数的不同之处
May 10 Javascript
小程序页面动态配置实现方法
Feb 05 Javascript
了解JavaScript表单操作和表单域
May 27 Javascript
使用Element的InfiniteScroll 无限滚动组件报错的解决
Jul 27 Javascript
vue接通后端api以及部署到服务器操作
Aug 13 Javascript
vuex Module将 store 分割成模块的操作
Dec 07 Vue.js
解决angular2 获取到的数据无法实时更新的问题
Aug 31 #Javascript
vue 项目中使用Loading组件的示例代码
Aug 31 #Javascript
解决Angular2 router.navigate刷新页面的问题
Aug 31 #Javascript
浅谈angularJS2中的界面跳转方法
Aug 31 #Javascript
详解vue使用vue-layer-mobile组件实现toast,loading效果
Aug 31 #Javascript
Angular2之二级路由详解
Aug 31 #Javascript
基于jQuery ztree实现表格风格的树状结构
Aug 31 #jQuery
You might like
解析PHP汉字转换拼音的类
2013/06/18 PHP
php实现压缩合并js的方法【附demo源码下载】
2016/09/22 PHP
Yii2使用$this-&gt;context获取当前的Module、Controller(控制器)、Action等
2017/03/29 PHP
PHP实现的激活用户注册验证邮箱功能示例
2017/06/06 PHP
多种方法实现JS动态添加事件
2013/11/01 Javascript
js设置function参数默认值(适合没有传参情况)
2014/02/24 Javascript
yui3的AOP(面向切面编程)和OOP(面向对象编程)
2015/05/01 Javascript
JS获取当前页面名称的简单实例
2016/08/19 Javascript
IntersectionObserver API 详解篇
2016/12/11 Javascript
jQuery Masonry瀑布流布局神器使用详解
2017/05/25 jQuery
通过示例彻底搞懂js闭包
2017/08/10 Javascript
vue组件Prop传递数据的实现示例
2017/08/17 Javascript
jQuery实现点击下拉框中的值累加到文本框中的方法示例
2017/10/28 jQuery
JS实现图片放大镜插件详解
2017/11/06 Javascript
JS+HTML5 Canvas实现简单的写字板功能示例
2018/08/30 Javascript
使用webpack编译es6代码的方法步骤
2019/04/28 Javascript
layui 对table中的数据进行转义的实例
2019/09/12 Javascript
webpack中的模式(mode)使用详解
2020/02/20 Javascript
javascript将16进制的字符串转换为10进制整数hex
2020/03/05 Javascript
JavaScript Blob对象原理及用法详解
2020/10/14 Javascript
微信小程序实现拼图小游戏
2020/10/22 Javascript
一个小示例告诉你Python语言的优雅之处
2014/07/04 Python
Python实现读取并保存文件的类
2017/05/11 Python
解决安装python3.7.4报错Can''t connect to HTTPS URL because the SSL module is not available
2019/07/31 Python
python装饰器练习题及答案
2019/11/01 Python
Python高阶函数、常用内置函数用法实例分析
2019/12/26 Python
Python中如何添加自定义模块
2020/06/09 Python
基于python模拟bfs和dfs代码实例
2020/11/19 Python
入党自我评价优缺点
2014/01/25 职场文书
信息学院毕业生自荐信范文
2014/03/04 职场文书
《四季》教学反思
2014/04/08 职场文书
商务英语专业大学生职业生涯规划书
2014/09/14 职场文书
2014年人大工作总结
2014/12/10 职场文书
外贸英文求职信范文
2015/03/19 职场文书
nginx设置资源请求目录的方式详解
2022/05/30 Servers
create-react-app开发常用配置教程
2022/06/25 Javascript