标签分类
技术文章
当前位置:主页 > 计算机编程 > vue.js > 分析Vue2自定义全局指令Vue.directive和指令的生命周期

Vue2自定义全局指令Vue.directive和指令的生命周期知识点

  • 发布时间:
  • 作者:码农之家原创
  • 点击:113

分析Vue2自定义全局指令Vue.directive和指令的生命周期

这篇文章主要知识点是关于Vue2,自定义,全局指令,生命周期,分析Vue2自定义全局指令Vue.directive和指令的生命周期,Vue.directive 自定义指令的问题小结 的内容,如果大家想对相关知识点有系统深入的学习,可以参阅以下电子书

Vue.js实战
Vue.js实战高质量扫描版
  • 类型:Vue大小:196.7 MB格式:PDF出版:清华大学出版社作者:梁灏
立即下载

更多相关的学习资源可以参阅 网络与数据通信电子书图形处理电子书、等栏目。

在Vue中,自定义指令的生命周期,有5个事件钩子:1-bind 被绑定, 2-inserted 被插入, 3-update 开始更新, 4-componentUpdated 更新完成,5-unbind 解除绑定。我们可以设置指令在某一个事件发生时的具体行为。

例子如下:

页面一进后,

在控制台中设置一个新值:通过控制台设置的新name

再设置一个新值:通过控制台设置的新name

最后点击解绑,解除绑定(解除绑定之后,id="app"的Dom和vm的实例之间解除mvvm的绑定关系):

对Vue2 自定义全局指令Vue.directive和指令的生命周期介绍

代码:

<h1>自定义指令及其生命周期</h1>
<div id="app">
 <div v-mydirective.modify1.mofify22="mycolor">
  {{ name }}
 </div>
</div>
<button onclick="unbindApp()">解绑</button>
<script>
 function unbindApp() {
  vm.$destroy();
 }
 Vue.directive("mydirective",{
  bind:function (el, binding, vnode) { //1-被绑定
   console.log("1-bind 被绑定");
   console.log("el:",el);
   console.log("binding:",binding);
   console.log("vnode:",vnode);
   el.style.color=binding.value;
  },
  inserted:function (el, binding, vnode) { //2-被插入
   console.log("2-inserted 被插入");
  },
  update:function (el, binding, vnode) { //3-更新
   console.log("3-update 更新");
  },
  componentUpdated:function (el, binding, vnode) { //4-更新完成
   console.log("4-componentUpdated 更新完成");
  },
  unbind:function (el, binding, vnode) { //5-解绑
   console.log("5-unbind 解绑");
  }
 });
 
 var vm=new Vue({
  el:"#app",
  data:{
   mycolor:"blue",
   name:"mydirective指令"
  }
 });
 
</script>

以上这篇对Vue2 自定义全局指令Vue.directive和指令的生命周期介绍就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持码农之家。

Vue.directive 自定义指令的问题小结

1.今天复习一下Vue自定义指令的代码,结果出现一个很无语的结果,先贴代码。

2.

<div id="example" v-change-by="myColor"></div>
  <script src="vue.min.js"></script>
  <script>
    new Vue({
      el:"#example",
      data:{
        msg:"",
        myColor:"#000"
      }
    });
    Vue.directive("change-by",{
      bind:(el,binding)=>{
        el.style.background=binding.value;
      }
    });
  </script>

3.结果打开页面,一片空白,宽高都有设置,div并没有变黑。检查代码怎么都是对的,没有语法错误。然后考虑到是不是vue.min.js文件的问题,然后从官网下载了开发版,用vue.js。结果有惊喜的发现。

Vue.directive 自定义指令的问题小结

4.原来生产版本vue.min.js不支持报错,真的神坑!

5.终于理解了原因,然后很重要一点就是指令要写在vue实例化对象前面,要不然会报错 Failed to resolve directive;最后贴出正确顺序代码

<div id="example" v-change-by="myColor"></div>
  <script>
    Vue.directive("change-by",{
      bind:(el,binding)=>{
        el.style.background=binding.value;
      }
    });
    new Vue({
      el:"#example",
      data:{
        msg:"",
        myColor:"#000"
      }
    });
  </script>

6.最后输出页面,完美...小问题,要注意。

Vue.directive 自定义指令的问题小结

总结

以上所述是小编给大家介绍的Vue.directive 自定义指令的问题小结,希望对大家有所帮助,如果大家有任何疑问欢迎给我留言,小编会及时回复大家的!

以上就是本次给大家分享的全部知识点内容总结,大家还可以在下方相关文章里找到解决axios.interceptors.respon、 vue项目中使用md5加密以及、 儿童python编程入门书籍推、 等vue.js文章进一步学习,感谢大家的阅读和支持。

上一篇:vue2.0+vuex的日期选择组件功能实现方法

下一篇:Vue.js修饰符知识点详解

展开 +

收起 -

学习笔记
网友NO.445327

Vue.directive()的用法和实例详解

官网实例: https://cn.vuejs.org/v2/api/#Vue-directive https://cn.vuejs.org/v2/guide/custom-directive.html 指令定义函数提供了几个钩子函数(可选): bind: 只调用一次,指令第一次绑定到元素时调用,用这个钩子函数可以定义一个在绑定时执行一次的初始化动作。 inserted: 被绑定元素插入父节点时调用(父节点存在即可调用,不必存在于 document 中)。 update: 被绑定元素所在的模板更新时调用,而不论绑定值是否变化。通过比较更新前后的绑定值,可以忽略不必要的模板更新(详细的钩子函数参数见下)。 componentUpdated: 被绑定元素所在模板完成一次更新周期时调用。 unbind: 只调用一次, 指令与元素解绑时调用。 本人菜鸟型,看官网蒙圈,然后百度 Vue.directive() 的实例和用法,有的很高深,有的不健全,我贴上两个简单的demo,希望对看到的朋友有帮助: 1、官网给出的demo,刷新页面input自动获取焦点: div id="app" SPAN /SPANinput type="text" v-focus/ /div div id="app" input type="text" v-focus//div// 注册一个全局自定义指令 v-focus Vue.directive('focus', { // 当绑定元素插入到 DOM 中。 inserted: function (el,binding) { SPAN /SPAN// 聚焦元素 SPAN /SPANel.focus(); } }); new Vue({ el:'#app' }); // 注册一个全局自定义指令 v-focusVue.directive('focus', { // 当绑定元素插入到 DOM 中。 inserted: function (el,bindi……

网友NO.105795

vue directive定义全局和局部指令及指令简写

directive定义全局和局部指令以及指令简写 1.使用Vue.directive()定义一个全局指令 Vue.directive('指令名称',{对象}) 2.参数一:指令的名称,定义时指令前面不需要写v- 3.参数二:是一个对象,该对象中有相关的操作函数 4.在调用的时候必须写v- 5.自定义指令中的常用的3个钩子函数: 5.1bind: 1.指令绑定到元素上回立刻执行bind函数,只执行一次 2.每个函数中第一个参数永远是el,表示绑定指令的元素,el参数是原生js对象 3.通过el.focus()是无法获取焦点的,因为只有插入DOM后才生效 5.2inserted: 1.inserted表示一个元素,插入到DOM中会执行inserted函数,只触发一次 5.3updated: 1.当VNode更新的时候会执行updated,可以触发多次 6.定义一个局部指令 测试案例步骤: 1.首先需要在html中创建一个盒子 2.接着需要通过实例化Vue并且通过el将盒子所对应的id进行绑定 3.在盒子里面所对应的要自定义的标签上通过v-xxx标注 局部定义的格式: directives:{ 'xxx':{ bind:function(el,binding){ el.style.xxx = binding.value } } } 7.指令函数的简写 function等同于将代码写入bind和update里 directive:{ 'xxx':function(el,binding){ el.style.xxx = binding.value } }!DOCTYPE htmlhtml head meta charset="utf-8" / title/title script src="js/vue-2.4.0.js" type="text/javascript" charset="utf-8"/script /head body div id="box" p v-fontsize="'20px'" v-color="'gr……

网友NO.447991

Vue.directive使用注意(小结)

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

<
1
>

Copyright 2018-2019 xz577.com 码农之家

版权责任说明