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 相关文章推荐
JavaScript 10件让人费解的事情
Feb 15 Javascript
javascript 延迟加载技术(lazyload)简单实现
Jan 17 Javascript
jquery放大镜效果超漂亮噢
Nov 15 Javascript
jQuery中DOM树操作之使用反向插入方法实例分析
Jan 23 Javascript
jquery实现可点击伸缩与展开的菜单效果代码
Aug 31 Javascript
jQuery EasyUI Dialog拖不下来如何解决
Sep 28 Javascript
JS创建对象几种不同方法详解
Mar 01 Javascript
快速获取/设置iframe内对象元素的几种js实现方法
May 20 Javascript
HTML5 实现的一个俄罗斯方块实例代码
Sep 19 Javascript
在vue中使用SockJS实现webSocket通信的过程
Aug 29 Javascript
Vuejs 实现简易 todoList 功能 与 组件实例代码
Sep 10 Javascript
Vue项目环境搭建详细总结
Sep 26 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
JAVA/JSP学习系列之二
2006/10/09 PHP
destoon整合ucenter后注册页面不跳转的解决方法
2014/06/21 PHP
php采用file_get_contents代替使用curl实例
2014/11/07 PHP
数理公式,也可以这么唯美
2021/03/10 无线电
javascript深入理解js闭包
2010/07/03 Javascript
JQUERY设置IFRAME的SRC值的代码
2010/11/30 Javascript
JavaScript中链式调用之研习
2011/04/07 Javascript
为JavaScript类型增加方法的实现代码(增加功能)
2011/12/29 Javascript
JQuery插件开发示例代码
2013/11/06 Javascript
深入理解JSON数据源格式
2014/01/10 Javascript
AngularJS中重新加载当前路由页面的方法
2018/03/09 Javascript
node.js到底要不要加分号浅析
2018/07/11 Javascript
浅谈Vue初学之props的驼峰命名
2018/07/19 Javascript
Vue-Router的使用方法
2018/09/05 Javascript
JavaScript闭包相关知识解析
2019/10/19 Javascript
JS实现放大镜效果
2020/09/21 Javascript
vue 使用class创建和清除水印的示例代码
2020/12/25 Vue.js
[11:57]《一刀刀一天》第十七期:TI中国军团加油!
2014/05/26 DOTA
简单介绍Python中的JSON使用
2015/04/28 Python
简单谈谈python中的lambda表达式
2018/01/19 Python
Python动态语言与鸭子类型详解
2019/07/01 Python
django框架实现模板中获取request 的各种信息示例
2019/07/01 Python
Django实现auth模块下的登录注册与注销功能
2019/10/10 Python
Python hashlib常见摘要算法详解
2020/01/13 Python
pytorch三层全连接层实现手写字母识别方式
2020/01/14 Python
用Python做一个久坐提醒小助手的示例代码
2020/02/10 Python
python数据分析:关键字提取方式
2020/02/24 Python
python爬取2021猫眼票房字体加密实例
2021/02/19 Python
常用的四种CSS透明属性介绍
2014/04/12 HTML / CSS
密封类可以有虚函数吗
2014/08/11 面试题
举例说明类变量和实例变量的区别
2016/06/30 面试题
大学生毕业求职的自我评价
2013/09/29 职场文书
大型车展策划方案
2014/02/01 职场文书
学校总务处领导干部个人对照检查材料思想汇报
2014/10/06 职场文书
会计工作检讨书
2015/02/19 职场文书
《小摄影师》教学反思
2016/02/18 职场文书