对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、CSS加载中的小问题探讨
Nov 26 Javascript
JQuery获取表格数据示例代码
May 26 Javascript
页面刷新时记住滚动条的位置jquery代码
Jun 17 Javascript
jquery库文件略庞大用纯js替换jquery的方法
Aug 12 Javascript
浅谈javascript中自定义模版
Jan 29 Javascript
分享Javascript实用方法二
Dec 13 Javascript
JS中生成随机数的用法及相关函数
Jan 09 Javascript
对比分析Django的Q查询及AngularJS的Datatables分页插件
Feb 07 Javascript
bootstrap+jQuery实现的动态进度条功能示例
May 25 jQuery
vue 使用Jade模板写html,stylus写css的方法
Feb 23 Javascript
微信小程序有旋转动画效果的音乐组件实例代码
Aug 22 Javascript
Vue2.0使用嵌套路由实现页面内容切换/公用一级菜单控制页面内容切换(推荐)
May 08 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异步执行的常用方式详解
2013/06/03 PHP
PHP会话操作之cookie用法分析
2016/09/28 PHP
PHP isset()与empty()的使用区别详解
2017/02/10 PHP
Laravel实现表单提交
2017/05/07 PHP
PHP实现websocket通信的方法示例
2018/08/28 PHP
TP5(thinkPHP5框架)实现显示错误信息及行号功能的方法
2019/06/03 PHP
Yii框架小部件(Widgets)用法实例详解
2020/05/15 PHP
JavaScript confirm选择判断
2008/10/18 Javascript
jquery插件splitScren实现页面分屏切换模板特效
2015/06/16 Javascript
JavaScript中的Promise使用详解
2015/06/24 Javascript
jQuery同步提交示例代码
2015/12/12 Javascript
深入对Vue.js $watch方法的理解
2017/03/20 Javascript
JS实现微信里判断页面是否被分享成功的方法
2017/06/06 Javascript
深入理解jquery的$.extend()、$.fn和$.fn.extend()
2017/07/08 jQuery
JavaScript中 ES6变量的结构赋值
2018/07/10 Javascript
Vue的路由及路由钩子函数的实现
2019/07/02 Javascript
Vue 路由间跳转和新开窗口的方式(query、params)
2019/12/25 Javascript
Vue封装全局过滤器Filters的步骤
2020/09/16 Javascript
vue实现日历表格(element-ui)
2020/09/24 Javascript
linux系统使用python监控apache服务器进程脚本分享
2014/01/15 Python
Python命令行参数解析模块getopt使用实例
2015/04/13 Python
教你一步步利用python实现贪吃蛇游戏
2019/06/27 Python
使用Python爬取弹出窗口信息的实例
2020/03/14 Python
python3中for循环踩过的坑记录
2020/12/14 Python
美国创意礼品网站:UncommonGoods
2017/02/03 全球购物
Expedia意大利旅游网站:酒店、机票和租车预订
2017/10/30 全球购物
微软巴西官方网站:Microsoft Brasil
2019/09/26 全球购物
历史学专业个人的自我评价
2013/10/13 职场文书
医务工作者先进事迹材料
2014/01/26 职场文书
《在大海中永生》教学反思
2014/02/24 职场文书
租房协议书
2014/04/10 职场文书
销售顾问工作计划书
2014/09/15 职场文书
民主生活会汇报材料
2014/12/15 职场文书
党校培训学习心得体会
2016/01/06 职场文书
pytest进阶教程之fixture函数详解
2021/03/29 Python
python库Tsmoothie模块数据平滑化异常点抓取
2022/06/10 Python