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 相关文章推荐
判断一个变量是数组Array类型的方法
Sep 16 Javascript
Node.js中对通用模块的封装方法
Jun 06 Javascript
js实现网页随机切换背景图片的方法
Nov 01 Javascript
jQuery的图片滑块焦点图插件整理推荐
Dec 07 Javascript
scrollWidth,clientWidth,offsetWidth的区别
Jan 13 Javascript
JS实现的网页倒计时数字时钟效果
Mar 02 Javascript
Javascript函数式编程语言
Oct 11 Javascript
关于javascript中限定时间内防止按钮重复点击的思路详解
Aug 16 Javascript
利用Vue.js实现求职在线之职位查询功能
Jul 03 Javascript
javascript获取元素的计算样式
May 24 Javascript
JavaScript setInterval()与setTimeout()计时器
Dec 27 Javascript
Vue中keep-alive的两种应用方式
Jul 15 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编程最快明白》第八讲:php启发和小结
2010/11/01 PHP
php实现通过soap调用.Net的WebService asmx文件
2017/02/27 PHP
laravel框架实现敏感词汇过滤功能示例
2020/02/15 PHP
Centos7安装swoole扩展操作示例
2020/03/26 PHP
Javascript下IE与Firefox下的差异兼容写法总结
2010/06/18 Javascript
jQuery实现的Div窗口震动效果实例
2015/08/07 Javascript
vue中如何引入jQuery和Bootstrap
2017/04/10 jQuery
原生js轮播特效
2017/05/18 Javascript
使用live-server快速搭建本地服务器+自动刷新的方法
2018/03/09 Javascript
jQuery实现ajax回调函数带入参数的方法示例
2018/06/26 jQuery
vue 组件之间事件触发($emit)与event Bus($on)的用法说明
2020/07/28 Javascript
Python备份Mysql脚本
2008/08/11 Python
Python连接MySQL并使用fetchall()方法过滤特殊字符
2016/03/13 Python
浅谈python对象数据的读写权限
2016/09/12 Python
Python 由字符串函数名得到对应的函数(实例讲解)
2017/08/10 Python
详解Python中 sys.argv[]的用法简明解释
2017/12/20 Python
Python基础学习之时间转换函数用法详解
2019/06/18 Python
python变量的存储原理详解
2019/07/10 Python
Python代码使用 Pyftpdlib实现FTP服务器功能
2019/07/22 Python
python flask web服务实现更换默认端口和IP的方法
2019/07/26 Python
在Python中使用MySQL--PyMySQL的基本使用方法
2019/11/19 Python
python线程定时器Timer实现原理解析
2019/11/30 Python
Python测试框架:pytest学习笔记
2020/10/20 Python
游戏商店:Eneba
2020/04/25 全球购物
索桥的故事教学反思
2014/02/06 职场文书
大学秋游活动方案
2014/02/11 职场文书
网络工程师专家职业发展路线
2014/02/14 职场文书
农林经济管理专业自荐信
2014/09/01 职场文书
寒暑假实习证明书模板
2014/11/29 职场文书
2015年全国“爱牙日”宣传活动总结
2015/03/23 职场文书
人民检察院起诉书
2015/05/20 职场文书
2015大一新生军训感言
2015/08/01 职场文书
Django实现drf搜索过滤和排序过滤
2021/06/21 Python
解决Swagger2返回map复杂结构不能解析的问题
2021/07/02 Java/Android
Python+腾讯云服务器实现每日自动健康打卡
2021/12/06 Python
python实现一个简单的贪吃蛇游戏附代码
2022/06/28 Python