Vue 自定义指令功能完整实例


Posted in Javascript onSeptember 17, 2019

本文实例讲述了Vue 自定义指令功能。分享给大家供大家参考,具体如下:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>自定义指令</title>
  <script type="text/javascript" src="https://cdn.bootcss.com/vue/2.6.10/vue.min.js"></script>
</head>
<body>
<h1>自定义指令</h1>
<hr>
<div id="app">
  <div v-json="color">{{num}}</div>
  <p><button @click="add">加一</button></p>
</div>
<p>
  <button οnclick="unbind()">解绑</button>
</p>
</body>
</html>
<script>
  function unbind(){
    //vue 提供的解绑指令
    app.$destroy()
  }
  //自定义指令 有五个钩子函数(声明周期)
  //bind: 只调用一次。指令第一次绑定到元素时调用。用这个钩子函数可以定义一个绑定时执行一次的初始化动作
  //inserted: 被绑定元素插入父节点时调用 (父节点存在即可调用,不必存在于document中)
  // update: 被绑定于元素所在的模板更新时被调用,而无论绑定值是否发生变化 通过比较更新前后的绑定值,可以 忽略不必要的模板更新
  //componentUpdated: 被绑定元素所在模板完成一次更新周期时调用
  // unbind:只调用一次,指令与元素解绑时调用
  Vue.directive('json',{
    bind:function(el,binding){//被绑定
      console.log('1 - bind');
      el.style='color:'+binding.value;
    },
    inserted:function(){//绑定到节点
      console.log('2 - inserted');
    },
    update:function(){//组件更新
      console.log('3 - update');
    },
    componentUpdated:function(){//组件更新完成
      console.log('4 - componentUpdated');
    },
    unbind:function(){//解绑
      console.log('5 - unbind');
    }
  });
  //自定义指令
  // Vue.directive('json',function(el,binding){
  //   el.style='color:'+binding.value;
  // });
  var app = new Vue({
    el:'#app',
    data:{
      num:1,
      color:'red'
    },
    methods:{
      add:function(){
        this.num++
      }
    }
  })
</script>

感兴趣的朋友可以使用在线HTML/CSS/JavaScript代码运行工具:http://tools.3water.com/code/HtmlJsRun测试上述代码运行效果。

希望本文所述对大家vue.js程序设计有所帮助。

Javascript 相关文章推荐
深入理解JavaScript系列(7) S.O.L.I.D五大原则之开闭原则OCP
Jan 15 Javascript
jQuery的remove()方法使用详解
Aug 11 Javascript
谷歌Chrome浏览器扩展程序开发小记
Jan 06 Javascript
浅析函数声明和函数表达式——函数声明的声明提前
May 03 Javascript
jQuery简单实现中间浮窗效果
Sep 04 Javascript
js css3实现图片拖拽效果
Mar 04 Javascript
JavaScript实现与使用发布/订阅模式详解
Jan 19 Javascript
详解vue-cli3多环境打包配置
Mar 28 Javascript
记录vue做微信自定义分享的一些问题
Sep 12 Javascript
javascript事件循环event loop的简单模型解释与应用分析
Mar 14 Javascript
使用jQuery实现购物车
Oct 29 jQuery
javascript实现固定侧边栏
Feb 09 Javascript
JS扁平化输出数组的2种方法解析
Sep 17 #Javascript
JS代码屏蔽F12,右键,粘贴,复制,剪切,选中,操作实例
Sep 17 #Javascript
uni app仿微信顶部导航条功能
Sep 17 #Javascript
layui 关闭open弹出框 刷新table表格页面的方法
Sep 16 #Javascript
解决layer.confirm选择完之后消息框不消失的问题
Sep 16 #Javascript
解决layui轮播图有数据不显示的情况
Sep 16 #Javascript
基于layui轮播图满屏是高度自适应的解决方法
Sep 16 #Javascript
You might like
建立动态的WML站点(三)
2006/10/09 PHP
PHP 魔术函数使用说明
2010/05/14 PHP
PHP采用curl模仿用户登陆新浪微博发微博的方法
2014/11/07 PHP
centos 7.2下搭建LNMP环境教程
2016/11/20 PHP
PHP实现断点续传乱序合并文件的方法
2018/09/06 PHP
通过代码实例解析PHP session工作原理
2020/12/11 PHP
PHP7 参数处理机制修改
2021/03/09 PHP
得到jQuery detach()后节点中的某个值实现代码
2013/02/05 Javascript
用javascript判断IE版本号简单实用且向后兼容
2013/09/11 Javascript
js判断出两个字符串最大子串的函数实现方法
2016/11/01 Javascript
详解自动生成博客目录案例
2016/12/09 Javascript
浅谈javascript中的 “ &amp;&amp; ” 和 “ || ”
2017/02/02 Javascript
浅谈vue的iview列表table render函数设置DOM属性值的方法
2017/09/30 Javascript
JS实现提示框跟随鼠标移动
2019/08/27 Javascript
el-form 多层级表单的实现示例
2020/09/10 Javascript
[43:24]完美世界DOTA2联赛PWL S3 INK ICE vs DLG 第二场 12.12
2020/12/17 DOTA
在Python中实现替换字符串中的子串的示例
2018/10/31 Python
Python 存储字符串时节省空间的方法
2019/04/23 Python
Django中使用 Closure Table 储存无限分级数据
2019/06/06 Python
对python中url参数编码与解码的实例详解
2019/07/25 Python
Pytorch训练过程出现nan的解决方式
2020/01/02 Python
英国女性运动服品牌:Sweaty Betty
2018/11/08 全球购物
Turnbull & Asser官网:英国皇室御用的顶级定制衬衫
2019/01/31 全球购物
C语言编程题
2015/03/09 面试题
毕业实习个人鉴定范文
2013/12/10 职场文书
毕业生就业自荐书
2013/12/15 职场文书
幼儿园教师考核制度
2014/02/01 职场文书
理想点亮人生演讲稿
2014/05/21 职场文书
党员四风剖析材料
2014/08/27 职场文书
发展党员工作情况汇报
2014/10/28 职场文书
保安辞职信范文
2015/02/28 职场文书
2015年城管个人工作总结
2015/05/15 职场文书
求职自荐信该如何书写?
2019/06/24 职场文书
创业计划书之物流运送
2019/09/17 职场文书
用基于python的appium爬取b站直播消费记录
2021/04/17 Python
python区块链持久化和命令行接口实现简版
2022/05/25 Python