Vue.directive()的用法和实例详解


Posted in Javascript onMarch 04, 2018

官网实例:

https://cn.vuejs.org/v2/api/#Vue-directive

https://cn.vuejs.org/v2/guide/custom-directive.html

指令定义函数提供了几个钩子函数(可选):

bind: 只调用一次,指令第一次绑定到元素时调用,用这个钩子函数可以定义一个在绑定时执行一次的初始化动作。
inserted: 被绑定元素插入父节点时调用(父节点存在即可调用,不必存在于 document 中)。

update: 被绑定元素所在的模板更新时调用,而不论绑定值是否变化。通过比较更新前后的绑定值,可以忽略不必要的模板更新(详细的钩子函数参数见下)。

componentUpdated: 被绑定元素所在模板完成一次更新周期时调用。

unbind: 只调用一次, 指令与元素解绑时调用。

本人菜鸟型,看官网蒙圈,然后百度Vue.directive()的实例和用法,有的很高深,有的不健全,我贴上两个简单的demo,希望对看到的朋友有帮助:

1、官网给出的demo,刷新页面input自动获取焦点:

<div id="app"> 
<SPAN style="WHITE-SPACE: pre"> </SPAN><input type="text" v-focus/> 
</div> 

<div id="app">
 <input type="text" v-focus/>
</div>

// 注册一个全局自定义指令 v-focus  
Vue.directive('focus', { 
  // 当绑定元素插入到 DOM 中。  
  inserted: function (el,binding) { 
    <SPAN style="WHITE-SPACE: pre"> </SPAN>// 聚焦元素  
    <SPAN style="WHITE-SPACE: pre"> </SPAN>el.focus(); 
  } 
}); 
new Vue({ 
el:'#app' 
}); 
// 注册一个全局自定义指令 v-focus
Vue.directive('focus', {
  // 当绑定元素插入到 DOM 中。
  inserted: function (el,binding) {
   // 聚焦元素
   el.focus();
 }
});
new Vue({

el:'#app'
});

2、一个拖拽的demo: 1)被拖拽的元素必须用position定位,才能被拖动;

2)自定义指令完成后需要实例化Vue,挂载元素;

3)inserted: 被绑定元素插入父节点时调用(父节点存在即可调用,不必存在于 document 中)。

<style type="text/css"> 
  .one,.two{ 
    height:100px; 
    width:100px; 
    border:1px solid #000; 
    position: absolute; 
    -webkit-user-select: none; 
    -ms-user-select: none; 
    -moz-user-select: -moz-none; 
    cursor: pointer; 
  } 
  .two{ 
    left:200px; 
  } 
</style> 
<div id="app"> 
  <div class="one" v-drag>拖拽one</div> 
  <div class="two" v-drag>拖拽two</div> 
</div> 
<style type="text/css">
 .one,.two{
 height:100px;
 width:100px;
 border:1px solid #000;
 position: absolute;
 -webkit-user-select: none;
 -ms-user-select: none;
 -moz-user-select: -moz-none;
 cursor: pointer;
 }
 .two{
 left:200px;
 }
</style>
<div id="app">
 <div class="one" v-drag>拖拽one</div>
 <div class="two" v-drag>拖拽two</div>
</div>
[javascript] view plain copy print?Vue.directive('drag', { 
  inserted:function(el){ 
    el.onmousedown=function(e){ 
      let l=e.clientX-el.offsetLeft; 
      let t=e.clientY-el.offsetTop; 
      document.onmousemove=function(e){ 
        el.style.left=e.clientX-l+'px'; 
        el.style.top=e.clientY-t+'px'; 
      }; 
      el.onmouseup=function(){ 
        document.onmousemove=null; 
        el.onmouseup=null; 
      } 
    } 
  } 
}) 
new Vue({ 
el:'#app' 
});

总结

以上所述是小编给大家介绍的Vue.directive()的用法和实例详解,希望对大家有所帮助,如果大家有任何疑问欢迎给我留言,小编会及时回复大家的!

Javascript 相关文章推荐
两个select之间option的互相添加操作(jquery实现)
Nov 12 Javascript
JavaScript中检测变量是否存在遇到的一些问题
Nov 11 Javascript
常规表格多表头查询示例
Feb 21 Javascript
Egret引擎开发指南之编译项目
Sep 03 Javascript
自己封装的常用javascript函数分享
Jan 07 Javascript
JS+CSS实现仿雅虎另类滑动门切换效果
Oct 13 Javascript
JavaScript学习小结之被嫌弃的eval函数和with语句实例详解
Aug 01 Javascript
Js遍历键值对形式对象或Map形式的方法
Aug 08 Javascript
详解vue-cli与webpack结合如何处理静态资源
Sep 19 Javascript
React组件对子组件children进行加强的方法
Jun 23 Javascript
vue+vant实现商品列表批量倒计时功能
Jan 13 Javascript
antd配置config-overrides.js文件的操作
Oct 31 Javascript
Vue.directive 自定义指令的问题小结
Mar 04 #Javascript
JavaScript图片处理与合成总结
Mar 04 #Javascript
微信web端后退强制刷新功能的实现代码
Mar 04 #Javascript
编写React组件项目实践分析
Mar 04 #Javascript
Vue组件开发技巧总结
Mar 04 #Javascript
代码详解javascript模块加载器
Mar 04 #Javascript
Vue用v-for给src属性赋值的方法
Mar 03 #Javascript
You might like
php 友好URL的实现(吐血推荐)
2008/10/04 PHP
php模拟ping命令(php exec函数的使用方法)
2013/10/25 PHP
php中sql注入漏洞示例 sql注入漏洞修复
2014/01/24 PHP
利用php输出不同的心形图案
2016/04/22 PHP
ASP中用Join和Array,可以加快字符连接速度的代码
2007/08/22 Javascript
JavaScript Distilled 基础知识与函数
2010/04/07 Javascript
jquerymobile checkbox及时刷新才能获取其准确值
2012/04/14 Javascript
jQuery原生的动画效果
2015/07/10 Javascript
JS中artdialog弹出框控件之提交表单思路详解
2016/04/18 Javascript
限制只能输入数字的实现代码
2016/05/16 Javascript
浅谈js的url解析函数封装
2016/06/28 Javascript
微信小程序 获取设备信息 API实例详解
2016/10/02 Javascript
Vue.js实现简单动态数据处理
2017/02/13 Javascript
vue.js加载新的内容(实例代码)
2017/06/01 Javascript
JQuery元素快速查找与操作
2018/04/22 jQuery
Vue中使用的EventBus有生命周期
2018/07/12 Javascript
详解Vue 动态组件与全局事件绑定总结
2018/11/11 Javascript
VUE简单的定时器实时刷新的实现方法
2019/01/20 Javascript
关于uniApp editor微信滑动问题
2021/01/15 Javascript
[42:20]Secret vs Liquid 2019国际邀请赛小组赛 BO2 第二场 8.15
2019/08/17 DOTA
Python连接DB2数据库
2016/08/27 Python
python3中int(整型)的使用教程
2017/03/23 Python
Python 编程速成(推荐)
2019/04/15 Python
利用pyecharts实现地图可视化的例子
2019/08/12 Python
python禁用键鼠与提权代码实例
2019/08/16 Python
Opodo英国旅游网站:预订廉价航班、酒店和汽车租赁
2018/07/14 全球购物
定义一结构体变量,用其表示点坐标,并输入两点坐标,求两点之间的距离
2015/08/17 面试题
工程班组长岗位职责
2013/12/30 职场文书
大学生两会精神学习心得体会
2014/03/10 职场文书
企业宣传策划方案
2014/05/29 职场文书
机械专业求职信范文
2014/07/15 职场文书
高中教师先进事迹材料
2014/08/22 职场文书
委托书的写法
2014/09/16 职场文书
外贸采购员岗位职责
2015/04/03 职场文书
广告公司文案策划岗位职责
2015/04/14 职场文书
2016国培学习心得体会
2016/01/08 职场文书