对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 相关文章推荐
关于Jquery操作Cookie取值错误的解决方法
Aug 26 Javascript
js拖动div 当鼠标移动时整个div也相应的移动
Nov 21 Javascript
js防止DIV布局滚动时闪动的解决方法
Oct 30 Javascript
原生js结合html5制作小飞龙的简易跳球
Mar 30 Javascript
jQuery选择器源码解读(八):addCombinator函数
Mar 31 Javascript
javascript函数特点实例分析
May 14 Javascript
jQuery取消ajax请求的方法
Jun 09 Javascript
JavaScript学习笔记整理_setTimeout的应用
Sep 19 Javascript
tween.js缓动补间动画算法示例
Feb 13 Javascript
一文了解vue-router之hash模式和history模式
May 31 Javascript
微信小程序引入Vant组件库过程解析
Aug 06 Javascript
解决Vue打包上线之后部分CSS不生效的问题
Nov 12 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程序设计中的MVC编程思想
2014/07/28 PHP
JS 建立对象的方法
2007/04/21 Javascript
JavaScript经典效果集锦
2010/07/06 Javascript
php析构函数的具体用法小结
2014/03/11 Javascript
JavaScript数组深拷贝和浅拷贝的两种方法
2014/04/16 Javascript
js实现点击链接后窗口缩小并居中的方法
2015/03/02 Javascript
基于javascript制作微信聊天面板
2020/08/09 Javascript
详解vue-cli + webpack 多页面实例配置优化方法
2017/07/13 Javascript
jQuery第一次运行页面默认触发点击事件的实例
2018/01/10 jQuery
vue实现个人信息查看和密码修改功能
2018/05/06 Javascript
vue打包使用Nginx代理解决跨域问题
2018/08/27 Javascript
微信小程序自定义可滑动日历界面
2018/12/28 Javascript
node.js的Express服务器基本使用教程
2019/01/09 Javascript
Vue使用.sync 实现父子组件的双向绑定数据问题
2019/04/04 Javascript
vue循环数组改变点击文字的颜色
2019/10/14 Javascript
vue中使用WX-JSSDK的两种方法(推荐)
2020/01/18 Javascript
小程序中手机号识别的示例
2020/12/14 Javascript
[01:04:14]VP vs TNC 2018国际邀请赛小组赛BO2 第二场 8.17
2018/08/20 DOTA
详解Python中__str__和__repr__方法的区别
2015/04/17 Python
使用Python来编写HTTP服务器的超级指南
2016/02/18 Python
通过Pandas读取大文件的实例
2018/06/07 Python
浅谈Python中eval的强大与危害
2019/03/13 Python
Keras Convolution1D与Convolution2D区别说明
2020/05/22 Python
定制别致的瑜伽垫:Sugarmat
2019/06/21 全球购物
Nordgreen台湾官网:极简北欧设计手表
2019/08/21 全球购物
Java基础知识面试要点
2016/07/29 面试题
工商学院毕业生自荐信
2013/11/12 职场文书
优秀社区干部事迹材料
2014/02/03 职场文书
高中微机老师自我鉴定
2014/02/16 职场文书
反对四风自我剖析材料
2014/10/07 职场文书
公务员党的群众路线教育实践活动学习心得体会
2014/10/30 职场文书
小学生家长意见
2015/06/03 职场文书
成事在人观后感
2015/06/16 职场文书
初二英语教学反思
2016/02/15 职场文书
MySQL Router的安装部署
2021/04/24 MySQL
pycharm代码删除恢复的方法
2021/06/26 Python