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 相关文章推荐
jquery ajax提交表单数据的两种实现方法
Apr 29 Javascript
jQuery中live方法的重复绑定说明
Oct 21 Javascript
jQuery中scrollTop()方法用法实例
Jan 16 Javascript
javascript 判断两个日期之差的示例代码
Sep 05 Javascript
jQuery on()绑定动态元素出现的问题小结
Feb 19 Javascript
JavaScript中的splice方法用法详解
Jul 20 Javascript
javascript 删除数组元素和清空数组的简单方法
Feb 24 Javascript
Angular2利用组件与指令实现图片轮播组件
Mar 27 Javascript
JavaScript闭包和回调详解
Aug 09 Javascript
JS+CSS实现网页加载中的动画效果
Oct 27 Javascript
jQuery EasyUI window窗口使用实例代码
Dec 25 jQuery
vue 实现左右拖拽元素并且不超过他的父元素的宽度
Nov 30 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程序
2006/10/09 PHP
PHP笔记之:基于面向对象设计的详解
2013/05/14 PHP
php根据分类合并数组的方法实例详解
2013/11/06 PHP
微信公众平台开发教程⑥ 微信开发集成类的使用图文详解
2019/04/10 PHP
JQuery触发radio或checkbox的change事件
2012/12/18 Javascript
Javascript/Jquery——简单定时器的多种实现方法
2013/07/03 Javascript
jquery-syntax动态语法着色示例代码
2014/05/14 Javascript
手写的一个兼容各种浏览器的javascript getStyle函数(获取元素的样式)
2014/06/06 Javascript
Javascript aop(面向切面编程)之around(环绕)分析
2015/05/01 Javascript
jQuery弹出遮罩层效果完整示例
2016/09/13 Javascript
js实现消息滚动效果
2017/01/18 Javascript
zTree jQuery 树插件的使用(实例讲解)
2017/09/25 jQuery
基于vue+axios+lrz.js微信端图片压缩上传方法
2019/06/25 Javascript
原生js实现轮播图特效
2020/05/04 Javascript
vue父子组件间引用之$parent、$children
2020/05/20 Javascript
[01:30]2016国际邀请赛中国区预选赛神秘商店火爆开启
2016/06/26 DOTA
python字符串加密解密的三种方法分享(base64 win32com)
2014/01/19 Python
python遍历目录的方法小结
2016/04/28 Python
Python执行时间的计算方法小结
2017/03/17 Python
根据DataFrame某一列的值来选择具体的某一行方法
2018/07/03 Python
Django实战之用户认证(初始配置)
2018/07/16 Python
Python动态参数/命名空间/函数嵌套/global和nonlocal
2019/05/29 Python
Python正则表达式匹配日期与时间的方法
2019/07/07 Python
在PyCharm的 Terminal(终端)切换Python版本的方法
2019/08/02 Python
Python web如何在IIS发布应用过程解析
2020/05/27 Python
python opencv把一张图片嵌入(叠加)到另一张图片上的实现代码
2020/06/11 Python
地图可视化神器kepler.gl python接口的使用方法
2020/12/22 Python
韩国流行时尚女装网站:Dintchina(中文)
2018/07/19 全球购物
美国珠宝精品店:Opulent Jewelers
2019/08/20 全球购物
微软马来西亚官方网站:Microsoft马来西亚
2019/11/22 全球购物
高中毕业生自我鉴定范文
2013/09/26 职场文书
学期自我鉴定
2013/11/04 职场文书
应聘收银员个人的求职信
2013/11/30 职场文书
涪陵白鹤梁导游词
2015/02/09 职场文书
银行自荐信怎么写
2015/03/05 职场文书
mybatis源码解读之executor包语句处理功能
2022/02/15 Java/Android