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


Posted in Javascript onAugust 30, 2018

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

Javascript 相关文章推荐
用Javascript 和 CSS 实现脚注(Footnote)效果
Sep 09 Javascript
jquery中dom操作和事件的实例学习 下拉框应用
Dec 01 Javascript
jQuery+JSON+jPlayer实现QQ空间音乐查询功能示例
Jun 17 Javascript
js实现页面转发功能示例代码
Aug 05 Javascript
javascript的解析执行顺序在各个浏览器中的不同
Mar 17 Javascript
jQuery EasyUI API 中文帮助文档和扩展实例
Aug 01 Javascript
Angular 应用技巧总结
Sep 14 Javascript
javascript 注释代码的几种方法总结
Jan 04 Javascript
JavaScript简单生成 N~M 之间随机数的方法
Jan 13 Javascript
Node.js实现连接mysql数据库功能示例
Sep 15 Javascript
Vue父子组建的简单通信之控制开关Switch的实现
Jun 04 Javascript
详解一个基于react+webpack的多页面应用配置
Jan 21 Javascript
原生JS实现简单的倒计时功能示例
Aug 30 #Javascript
JavaScript fetch接口案例解析
Aug 30 #Javascript
vue组件表单数据回显验证及提交的实例代码
Aug 30 #Javascript
原生JS实现的简单小钟表功能示例
Aug 30 #Javascript
使用Node搭建reactSSR服务端渲染架构
Aug 30 #Javascript
webpack4+Vue搭建自己的Vue-cli项目过程分享
Aug 29 #Javascript
JS实现的input选择图片本地预览功能示例
Aug 29 #Javascript
You might like
php中常量DIRECTORY_SEPARATOR用法深入分析
2014/11/14 PHP
ThinkPHP3.2.3数据库设置新特性
2015/03/05 PHP
自动生成文章摘要的代码[JavaScript 版本]
2007/03/20 Javascript
javascript 日期时间函数(经典+完善+实用)
2009/05/27 Javascript
JQuery 浮动导航栏实现代码
2009/08/27 Javascript
jquery ready(fn)事件使用介绍
2013/08/21 Javascript
cookie中的path与domain属性详解
2013/12/18 Javascript
在Ubuntu上安装最新版本的Node.js
2014/07/14 Javascript
jquery实现表格中点击相应行变色功能效果【实例代码】
2016/05/09 Javascript
解决node.js安装包失败的几种方法
2016/09/02 Javascript
vue.js初学入门教程(2)
2016/11/07 Javascript
JS数组操作之增删改查的简单实现
2017/08/21 Javascript
一些可能会用到的Node.js面试题
2019/06/15 Javascript
判断“命令按钮”是否被鼠标单击详解
2019/07/31 Javascript
JavaScript实现拖拽和缩放效果
2020/08/24 Javascript
[04:21]狐狸妈带你到现场 DOTA2 TI中国区预选赛线下赛路线指引
2014/05/22 DOTA
[01:03:00]DOTA2上海特级锦标赛A组败者赛 EHOME VS CDEC第一局
2016/02/25 DOTA
12步入门Python中的decorator装饰器使用方法
2016/06/20 Python
如何实现删除numpy.array中的行或列
2018/05/08 Python
基于python的BP神经网络及异或实现过程解析
2019/09/30 Python
python绘制无向图度分布曲线示例
2019/11/22 Python
python温度转换华氏温度实现代码
2020/12/06 Python
教你一分钟在win10终端成功安装Pytorch的方法步骤
2021/01/28 Python
html2canvas生成的图片偏移不完整的解决方法
2020/05/19 HTML / CSS
美国当红的名品折扣网:Gilt Groupe
2016/08/15 全球购物
美国轻奢时尚购物网站:REVOLVE(支持中文)
2020/07/18 全球购物
shallow copy和deep copy的区别
2016/05/09 面试题
英语专业学子个人的自我评价
2013/10/02 职场文书
大学生职业规划前言模板
2013/12/27 职场文书
巾帼建功标兵事迹材料
2014/05/11 职场文书
党的群众路线教育实践活动党员个人整改措施
2014/10/27 职场文书
党员剖析材料范文
2014/12/18 职场文书
信访工作个人总结
2015/03/03 职场文书
2019年12月24日平安夜祝福语集锦
2019/12/24 职场文书
《月歌。》宣布制作10周年纪念剧场版《RABBITS KINGDOM THE MOVIE》
2022/04/02 日漫
Spring Boot项目传参校验的最佳实践指南
2022/04/05 Java/Android