对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 相关文章推荐
js Html结构转字符串形式显示代码
Nov 15 Javascript
jquery插件制作 手风琴Panel效果实现
Aug 17 Javascript
用js读、写、删除Cookie代码分享及详细注释说明
Jun 05 Javascript
浅析javascript操作 cookie对象
Dec 26 Javascript
JS实现新浪博客左侧的Blog管理菜单效果代码
Oct 22 Javascript
AngulerJS学习之按需动态加载文件
Feb 13 Javascript
JavaScript脚本语言是什么_动力节点Java学院整理
Jun 26 Javascript
JavaScript获取用户所在城市及地理位置
Apr 21 Javascript
JavaScript实现JSON合并操作示例【递归深度合并】
Sep 07 Javascript
巧妙运用v-model实现父子组件传值的方法示例
Apr 07 Javascript
js基础之事件捕获与冒泡原理
Oct 09 Javascript
JS实现图片懒加载(lazyload)过程详解
Apr 02 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
PHP4之COOKIE支持详解
2006/10/09 PHP
php中设置多级目录session的问题
2011/08/08 PHP
PHP中最容易忘记的一些知识点总结
2013/04/28 PHP
深入PHP购物车模块功能分析(函数讲解,附源码)
2013/06/25 PHP
set_exception_handler函数在ThinkPHP中的用法
2014/10/31 PHP
PHP用正则匹配form表单中所有元素的类型和属性值实例代码
2017/02/28 PHP
PHP分享图片的生成方法
2018/04/25 PHP
jquery对表单操作2
2011/04/06 Javascript
javascript中match函数的用法小结
2014/02/08 Javascript
SeaJS入门教程系列之使用SeaJS(二)
2014/03/03 Javascript
JavaScript插件化开发教程 (一)
2015/01/27 Javascript
浅谈Javascript中Object与Function对象
2015/09/26 Javascript
JS简单模拟触发按钮点击功能的方法
2015/11/30 Javascript
微信小程序 animation API详解及实例代码
2016/10/08 Javascript
Angular1.x自定义指令实例详解
2017/03/01 Javascript
js实现倒计时关键代码
2017/05/05 Javascript
关于vue-router的beforeEach无限循环的问题解决
2017/09/09 Javascript
Angular4编程之表单响应功能示例
2017/12/13 Javascript
详解用vue2.x版本+adminLTE开源框架搭建后台应用模版
2019/03/15 Javascript
vue中多路由表头吸顶实现的几种布局方式
2019/04/12 Javascript
Python中的rfind()方法使用详解
2015/05/19 Python
Python中的urllib模块使用详解
2015/07/07 Python
PyQT5 QTableView显示绑定数据的实例详解
2019/06/25 Python
python并发编程多进程 模拟抢票实现过程
2019/08/20 Python
pytorch模型存储的2种实现方法
2020/02/14 Python
南非最大的花卉和送礼服务:NetFlorist
2017/09/13 全球购物
中班中秋节活动反思
2014/02/18 职场文书
护士求职自荐信范文
2014/03/19 职场文书
领导干部保密承诺书
2014/08/30 职场文书
2014乡镇班子个人对照检查材料思想汇报
2014/09/26 职场文书
应届毕业生求职简历自我评价
2015/03/02 职场文书
办公室主任岗位职责范本
2015/03/31 职场文书
2015年转正工作总结范文
2015/04/02 职场文书
2015年教学管理工作总结
2015/05/20 职场文书
幼儿园园长工作总结2015
2015/05/25 职场文书
整理Python中常用的conda命令操作
2021/06/15 Python