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自动下载文件到本地的实现代码
Apr 28 Javascript
jquery实现省市select下拉框的替换(示例代码)
Feb 22 Javascript
将中国标准时间转换成标准格式的代码
Mar 20 Javascript
jQuery中filter()方法用法实例
Jan 06 Javascript
jQuery+ajax实现无刷新级联菜单示例
May 21 Javascript
JS截取与分割字符串常用技巧总结
Nov 10 Javascript
基于jquery实现简单的手风琴特效
Nov 24 Javascript
jQuery自定义组件(导入组件)
Nov 08 Javascript
微信小程序 支付功能实现PHP实例详解
May 12 Javascript
详解vue2父组件传递props异步数据到子组件的问题
Jun 29 Javascript
jQuery轻量级表单模型验证插件
Oct 15 jQuery
微信小程序canvas开发水果老虎机的思路详解
Feb 07 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 CKEditor 上传图片实现代码
2009/11/06 PHP
PHP 中文处理技巧
2010/04/25 PHP
使用php+Ajax实现唯一校验实现代码[简单应用]
2011/11/29 PHP
一个经典的PHP验证码类分享
2014/11/18 PHP
php使用Cookie实现和用户会话的方法
2015/01/21 PHP
ThinkPHP整合datatables实现服务端分页的示例代码
2018/02/10 PHP
PHP微信H5支付开发实例
2018/07/25 PHP
Firefox window.close()的使用注意事项
2009/04/11 Javascript
Prototype 学习 工具函数学习($w,$F方法)
2009/07/12 Javascript
javascript URL编码和解码使用说明
2010/04/12 Javascript
jquery获取css中的选择器(实例讲解)
2013/12/02 Javascript
socket.io学习教程之基础介绍(一)
2017/04/29 Javascript
javascript修改浏览器title方法 JS动态修改浏览器标题
2017/11/30 Javascript
浅谈js闭包理解
2019/03/28 Javascript
nodejs 递归拷贝、读取目录下所有文件和目录
2019/07/18 NodeJs
[09:23]国际邀请赛采访专栏:iG战队VK,Tongfu战队Cu
2013/08/05 DOTA
跟老齐学Python之通过Python连接数据库
2014/10/28 Python
Python 对象中的数据类型
2017/05/13 Python
用python处理图片之打开\显示\保存图像的方法
2018/05/04 Python
在Python中append以及extend返回None的例子
2019/07/20 Python
python实现简单图书管理系统
2019/11/22 Python
tensorflow对图像进行拼接的例子
2020/02/05 Python
利用Python脚本批量生成SQL语句
2020/03/04 Python
Python3 hashlib密码散列算法原理详解
2020/03/30 Python
pytorch读取图像数据转成opencv格式实例
2020/06/02 Python
基于django2.2连oracle11g解决版本冲突的问题
2020/07/02 Python
python主要用于哪些方向
2020/07/05 Python
智利最大的网上商店:Linio智利
2016/11/24 全球购物
这段代码难道不该打印出56吗
2013/02/27 面试题
2014年元旦感言
2014/03/06 职场文书
中学生励志演讲稿
2014/04/26 职场文书
上课迟到检讨书300字
2014/10/15 职场文书
安全保证书格式
2015/02/28 职场文书
工作自我推荐信范文
2015/03/25 职场文书
2015年国培研修感言
2015/08/01 职场文书
2019最新版火锅店的创业计划书 !
2019/07/12 职场文书