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 相关文章推荐
JS限制上传图片大小不使用控件在本地实现
Dec 19 Javascript
js获取多个tagname的节点数组
Sep 22 Javascript
jQuery Real Person验证码插件防止表单自动提交
Nov 06 Javascript
jQuery Validate表单验证深入学习
Dec 18 Javascript
JS读写CSS样式的方法汇总
Aug 16 Javascript
bootstrap fileinput完整实例分享
Nov 08 Javascript
jQuery实现浏览器之间跳转并传递参数功能【支持中文字符】
Mar 28 jQuery
详解js跨域请求的两种方式,支持post请求
May 05 Javascript
Vue-router 中hash模式和history模式的区别
Jul 24 Javascript
js的对象与函数详解
Jan 21 Javascript
微信小程序云开发之使用云函数
May 17 Javascript
uni-app 微信小程序授权登录的实现步骤
Feb 18 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 split()函数的用法详解
2013/06/05 PHP
php恢复数组的key为数字序列的方法
2015/04/28 PHP
PHP中把有符号整型转换为无符号整型方法
2015/05/27 PHP
php微信开发之百度天气预报
2016/11/18 PHP
PHP中Laravel 关联查询返回错误id的解决方法
2017/04/01 PHP
js预载入和JavaScript Image()对象使用介绍
2011/08/28 Javascript
javascript 控制input只允许输入的各种指定内容
2014/06/19 Javascript
7个让JavaScript变得更好的注意事项
2015/01/28 Javascript
javascript清空table表格的方法
2015/05/14 Javascript
Atitit.js的键盘按键事件捆绑and事件调度
2016/04/01 Javascript
JavaScript编写九九乘法表(两种任选)
2017/02/04 Javascript
vue的滚动条插件实现代码
2019/09/07 Javascript
vue项目中常见问题及解决方案(推荐)
2019/10/21 Javascript
Vue+Java+Base64实现条码解析的示例
2020/09/23 Javascript
python获取命令行输入参数列表的实例代码
2018/06/23 Python
python 读取视频,处理后,实时计算帧数fps的方法
2018/07/10 Python
pycham查看程序执行的时间方法
2018/11/29 Python
python数据归一化及三种方法详解
2019/08/06 Python
Django ORM多对多查询方法(自定义第三张表&amp;ManyToManyField)
2019/08/09 Python
Python hashlib加密模块常用方法解析
2019/12/18 Python
jupyter notebook清除输出方式
2020/04/10 Python
python如何导出微信公众号文章方法详解
2020/08/31 Python
python的数学算法函数及公式用法
2020/11/18 Python
Python3利用scapy局域网实现自动多线程arp扫描功能
2021/01/21 Python
CSS3的颜色渐变效果的示例代码
2017/09/29 HTML / CSS
Html5 Canvas动画基础碰撞检测的实现
2018/12/06 HTML / CSS
关于学习的演讲稿
2014/05/10 职场文书
党员批评与自我批评发言
2014/10/02 职场文书
2014年个人教学工作总结
2014/12/09 职场文书
观后感格式
2015/06/19 职场文书
户外拓展训练感想
2015/08/07 职场文书
合作意向书范本
2019/04/17 职场文书
PHP对接阿里云虚拟号的实现(号码隐私保护)
2021/04/06 PHP
go语言map与string的相互转换的实现
2021/04/07 Golang
java中重写父类方法加不加@Override详解
2021/06/21 Java/Android
Go语言编译原理之变量捕获
2022/08/05 Golang