详解Vue.directive 自定义指令


Posted in Javascript onMarch 27, 2019

一、什么是全局API?

全局API并不在构造器里,而是先声明全局变量或者直接在Vue上定义一些新功能,Vue内置了一些全局API,比如我们今天要学习的指令Vue.directive。说的简单些就是,在构造器外部用Vue提供给我们的API函数来定义新的功能。

二、Vue.directive自定义指令

我们在第一季就学习了内部指令,我们也可以定义一些属于自己的指令,比如我们要定义一个v-jspang的指令,作用就是让文字变成绿色。

在自定义指令前我们写一个小功能,在页面上有一个数字为10,数字的下面有一个按钮,我们每点击一次按钮后,数字加1.

三、自定义指令中传递的三个参数

el: 指令所绑定的元素,可以用来直接操作DOM。

binding:  一个对象,包含指令的很多信息。

vnode: Vue编译生成的虚拟节点。

四、自定义指令的生命周期

自定义指令有五个生命周期(也叫钩子函数),分别是 bind,inserted,update,componentUpdated,unbind

  1. bind:只调用一次,指令第一次绑定到元素时调用,用这个钩子函数可以定义一个绑定时执行一次的初始化动作。
  2. inserted:被绑定元素插入父节点时调用(父节点存在即可调用,不必存在于document中)。
  3. update:被绑定于元素所在的模板更新时调用,而无论绑定值是否变化。通过比较更新前后的绑定值,可以忽略不必要的模板更新。
  4. componentUpdated:被绑定元素所在模板完成一次更新周期时调用。
  5. unbind:只调用一次,指令与元素解绑时调用。
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <script type="text/javascript" src="../assets/js/vue.js"></script>
  <title>vue.directive 自定义指令</title>
</head>
<body>
  <h1>vue.directive 自定义指令</h1>
  <hr>
  <div id="app">
    <div v-jspang="color" id="aaa">
      {{num}}
    </div>
    <p>
      <button @click='jia'>加分</button>
    </p>
    <p>
      <button onclick='unbind()'>解绑</button>
    </p>
  </div>
 
  <script type="text/javascript">
 
    function unbind(){
      app.$destroy();
    }
 
    //自定义指令
    Vue.directive('jspang',{
      bind:function(el,binding,vnode){//被绑定
        /**
            var s=JSON.stringify;
            el.innerHTML = 
              'name:'    + s(binding.name) +'<br>' + 
              'value:'    + s(binding.value) +'<br>' + 
              'expression:' + s(binding.expression) +'<br>' ;
        **/
        el.style='color:'+binding.value;
         
 
        console.log('1 - bind');
      },
      inserted:function(){//绑定到节点
        console.log('2 - inserted');
      },
      update:function(){//组件更新
        console.log('3 - update');
      },
      componentUpdated:function(){//组件更新完成
        console.log('4 - componentUpdated');
      },
      unbind:function(){//解绑
        console.log('5 - unbind');
      }
 
    })
 
    var app=new Vue({
      el:'#app',
      data:{
        color:'green',
        num:10
      },
      methods:{
        jia:function(){
          this.num++;
        }
      }
    })
  </script>
</body>
</html>
bind:function(){//被绑定
   console.log('1 - bind');
},
inserted:function(){//绑定到节点
   console.log('2 - inserted');
},
update:function(){//组件更新
   console.log('3 - update');
},
componentUpdated:function(){//组件更新完成
   console.log('4 - componentUpdated');
},
unbind:function(){//解绑
   console.log('1 - bind');
}

以上所述是小编给大家介绍的Vue.directive 自定义指令详解整合,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
利用JQuery制作符合Web标准的QQ弹出消息
Jan 14 Javascript
javascript刷新父页面的各种方法汇总
Sep 03 Javascript
JavaScript组件焦点与页内锚点间传值的方法
Feb 02 Javascript
jQuery获取页面及个元素高度、宽度的总结——超实用
Jul 28 Javascript
js纯数字逐一停止显示效果的实现代码
Mar 16 Javascript
Extjs实现下拉菜单效果
Apr 01 Javascript
jQuery使用ajax方法解析返回的json数据功能示例
Jan 10 Javascript
JS 仿支付宝input文本输入框放大组件的实例
Nov 14 Javascript
微信web端后退强制刷新功能的实现代码
Mar 04 Javascript
对于防止按钮重复点击的尝试详解
Apr 22 Javascript
微信小程序网络请求实现过程解析
Nov 06 Javascript
如何HttpServletRequest文件对象并储存
Aug 14 Javascript
vue 列表页跳转详情页获取id以及详情页通过id获取数据
Mar 27 #Javascript
js取0-9随机取4个数不重复的数字代码实例
Mar 27 #Javascript
vue 详情跳转至列表页实现列表页缓存
Mar 27 #Javascript
vue中多个倒计时实现代码实例
Mar 27 #Javascript
JavaScript偏函数与柯里化实例详解
Mar 27 #Javascript
vue实现鼠标移入移出事件代码实例
Mar 27 #Javascript
JavaScript惰性载入函数实例分析
Mar 27 #Javascript
You might like
PHP生成月历代码
2007/06/14 PHP
zend framework配置操作数据库实例分析
2012/12/06 PHP
PHP实现的日历功能示例
2018/09/01 PHP
实例讲解php将字符串输出到HTML
2019/01/27 PHP
2007/12/23更新创意无限,简单实用(javascript log)
2007/12/24 Javascript
一个tab标签切换效果代码
2009/03/27 Javascript
IE和firefox浏览器的event事件兼容性汇总
2009/12/06 Javascript
JavaScript中对象property的读取和写入方法介绍
2014/12/30 Javascript
javascript的switch用法注意事项分析
2015/02/02 Javascript
jquery制做精致的倒计时特效
2016/06/13 Javascript
利用bootstrapValidator验证UEditor
2016/09/14 Javascript
AngularJs $parse、$eval和$observe、$watch详解
2016/09/21 Javascript
用JS实现简单的登录验证功能
2017/07/28 Javascript
纯js实现画一棵树的示例
2017/09/05 Javascript
Vue 使用 Mint UI 实现左滑删除效果CellSwipe
2018/04/27 Javascript
浅谈微信页面入口文件被缓存解决方案
2018/09/29 Javascript
如何使用less实现随机下雪动画详解
2019/01/02 Javascript
Vue使用.sync 实现父子组件的双向绑定数据问题
2019/04/04 Javascript
Jquery Datatables的使用详解
2020/01/30 jQuery
深入分析jQuery.one() 函数
2020/06/03 jQuery
Python中实现远程调用(RPC、RMI)简单例子
2014/04/28 Python
5个很好的Python面试题问题答案及分析
2018/01/19 Python
解决pycharm安装第三方库失败的问题
2020/05/09 Python
Python 没有main函数的原因
2020/07/10 Python
解决pytorch 的state_dict()拷贝问题
2021/03/03 Python
css3实现元素环绕中心点布局的方法示例
2019/01/15 HTML / CSS
受外贸欢迎的美国主机:BlueHost
2017/05/16 全球购物
达拉斯牛仔官方商店:Dallas Cowboys Pro Shop
2018/02/10 全球购物
宝拉珍选英国官网:Paula’s Choice英国
2019/05/29 全球购物
瑞士最大的图书贸易公司:Orell Füssli
2019/12/28 全球购物
乡镇交通安全实施方案
2014/03/29 职场文书
人力资源求职信
2014/05/25 职场文书
班级文化标语
2014/06/23 职场文书
求职信的正确写法
2014/07/10 职场文书
理财计划书
2014/08/14 职场文书
2015年学校信息技术工作总结
2015/05/25 职场文书