当前位置:主页 > vue.js教程 > 分析Vue2自定义全局指令Vue.directive和指令的生命周期

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

发布:2019-08-02 11:45:59 148


我们帮大家精选了相关的编程文章,网友何高翰根据主题投稿了本篇教程内容,涉及到Vue2、自定义、全局指令、生命周期、分析Vue2自定义全局指令Vue.directive和指令的生命周期相关内容,已被359网友关注,涉猎到的知识点内容可以在下方电子书获得。

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

在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和指令的生命周期介绍就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持码农之家。


相关文章

  • JAVA中通过自定义注解进行数据验证的方法

    发布:2022-09-23

    给大家整理一篇关于JAVA的教程,java 自定义注解验证可自己添加所需要的注解,下面这篇文章主要给大家介绍了关于JAVA中通过自定义注解进行数据验证的相关资料,文中通过示例代码介绍的非常详细,需要的朋友可以参考借鉴


  • 详解vue2.5.2如何使用http请求获取静态json数据

    发布:2020-01-11

    这篇文章主要介绍了vue2.5.2使用http请求获取静态json数据的实例代码,需要的朋友可以参考下


  • 详解使用Jquery实现自定义tooltip

    发布:2020-03-02

    这篇文章主要介绍了Jquery实现自定义tooltip的方法,需要的朋友可以参考下


  • django-suit模板添加自定义的菜单、页面及设置访问权限的实现方法

    发布:2020-01-19

    这篇文章主要给大家介绍了关于利用django-suit模板添加自定义的菜单、页面及设置访问权限的相关资料,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要


  • vue2.0中proxyTable用axios进行跨域请求的设置方法

    发布:2020-01-02

    这篇文章主要介绍了vue2.0设置proxyTable使用axios进行跨域请求,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧


  • Templates实战之更优雅实现自定义View构造方法详解

    发布:2023-03-04

    本篇文章介绍如何利用Android Studio提供的Live Templates更优雅实现自定义View的构造方法,说句人话就是:简化自定义View构造参数模板代码的编写,实现自动生成,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪


  • 微信小程序自定义导航栏的制作方法

    发布:2020-01-31

    这篇文章主要给大家介绍了关于微信小程序自定义导航栏的相关资料,文中通过示例代码介绍的非常详细,对大家学习或者使用微信小程序具有一定的参考学习价值,需要的朋友们下面来一起学


  • php自定义错误日志实例

    发布:2020-06-04

    这篇文章主要介绍了php 自定义错误日志实例详解的相关资料,需要的朋友可以参考下


网友讨论