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 相关文章推荐
超级好用的jQuery圆角插件 Corner速成
Aug 31 Javascript
javascript浏览器窗口之间传递数据的方法
Jan 20 Javascript
JavaScript设置body高度为浏览器高度的方法
Feb 09 Javascript
JavaScript文档碎片操作实例分析
Dec 12 Javascript
详解Immutable及 React 中实践
Mar 01 Javascript
全站最详细的Vuex教程
Apr 13 Javascript
用Vue写一个分页器的示例代码
Apr 22 Javascript
Webpack中publicPath路径问题详解
May 03 Javascript
gulp构建小程序的方法步骤
May 31 Javascript
vue使用混入定义全局变量、函数、筛选器的实例代码
Jul 29 Javascript
node.js express框架实现文件上传与下载功能实例详解
Oct 15 Javascript
vue自定义插件封装,实现简易的elementUi的Message和MessageBox的示例
Nov 20 Vue.js
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
使用zend studio for eclipse不能激活代码提示功能的解决办法
2009/10/11 PHP
PHP中PDO基础教程 入门级
2011/09/04 PHP
CodeIgniter安全相关设置汇总
2014/07/03 PHP
PHP中mysqli_affected_rows作用行数返回值分析
2014/12/26 PHP
THINKPHP3.2使用soap连接webservice的解决方法
2017/12/13 PHP
Laravel 验证码认证学习记录小结
2019/12/20 PHP
javascript 跳转代码集合
2009/12/03 Javascript
30分钟就入门的正则表达式基础教程
2013/02/25 Javascript
实例说明为什么不要行内使用javascript
2014/04/18 Javascript
js中的setInterval和setTimeout使用实例
2014/05/09 Javascript
js与C#进行时间戳转换
2014/11/14 Javascript
js生成随机数的过程解析
2015/11/24 Javascript
详解JavaScript时间格式化
2015/12/23 Javascript
JavaScript中创建对象的模式汇总
2016/04/19 Javascript
js截取字符串功能的实现方法
2017/09/27 Javascript
JS基于对象的特性实现去除数组中重复项功能详解
2017/11/17 Javascript
Angular ng-animate和ng-cookies用法详解
2018/04/18 Javascript
jQuery中的for循环var与let的区别
2018/04/21 jQuery
微信小程序实现授权登录
2019/05/15 Javascript
Vue图片浏览组件v-viewer用法分析【支持旋转、缩放、翻转等操作】
2019/11/04 Javascript
vue中根据时间戳判断对应的时间(今天 昨天 前天)
2019/12/20 Javascript
[01:04:49]KG vs LGD 2019国际邀请赛小组赛 BO2 第二场 8.15
2019/08/16 DOTA
python类继承用法实例分析
2015/05/27 Python
使用Python写CUDA程序的方法
2017/03/27 Python
浅谈python内置变量-reversed(seq)
2017/06/21 Python
python 读取鼠标点击坐标的实例
2018/12/29 Python
python常用排序算法的实现代码
2019/11/08 Python
TensorFlow Saver:保存和读取模型参数.ckpt实例
2020/02/10 Python
Pandas DataFrame求差集的示例代码
2020/12/13 Python
CK澳大利亚官网:Calvin Klein澳大利亚
2020/12/12 全球购物
工会主席岗位责任制
2014/02/11 职场文书
普通党员对照检查材料
2014/09/24 职场文书
授权委托书怎么写
2014/09/25 职场文书
2015年大学生社会实践评语
2015/03/26 职场文书
化妆品促销活动总结
2015/05/07 职场文书
oracle重置序列从0开始递增1
2022/02/28 Oracle