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 文本滚动效果的实例代码
Aug 17 Javascript
javascript 函数声明与函数表达式的区别介绍
Oct 05 Javascript
jquery中插件实现自动添加用户的具体代码
Nov 15 Javascript
jQuery中toggle()函数的使用实例
Apr 17 Javascript
jquery使用经验小结
May 20 Javascript
js实现网页图片延时加载 提升网页打开速度
Jan 26 Javascript
jQuery简单实现iframe的高度根据页面内容自适应的方法
Aug 01 Javascript
JS实现微信弹出搜索框 多条件查询功能
Dec 13 Javascript
js编写三级联动简单案例
Dec 21 Javascript
详解Vue使用 vue-cli 搭建项目
Apr 20 Javascript
Vue.js实现输入框绑定的实例代码
Aug 24 Javascript
JavaScript实现网页下拉菜单效果
Nov 20 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
如何使用脚本模仿登陆过程
2006/11/22 PHP
php线性表的入栈与出栈实例分析
2015/06/12 PHP
PHP中遍历数组的三种常用方法实例分析
2019/06/24 PHP
Firebug 字幕文件JSON地址获取代码
2009/10/28 Javascript
一个JavaScript变量声明的知识点
2013/10/28 Javascript
node.js中的fs.lchownSync方法使用说明
2014/12/16 Javascript
javascript实现表格排序 编辑 拖拽 缩放
2015/01/02 Javascript
js实现模拟计算器退格键删除文字效果的方法
2015/05/07 Javascript
Bootstrap表单组件教程详解
2016/04/26 Javascript
JavaScript 节流函数 Throttle 详解
2016/07/04 Javascript
JS实现HTML表格排序功能
2016/08/05 Javascript
利用JQuery阻止事件冒泡
2016/12/01 Javascript
vue.js实现数据动态响应 Vue.set的简单应用
2017/06/15 Javascript
webpack file-loader和url-loader的区别
2019/01/15 Javascript
jquery validate 实现动态增加/删除验证规则操作示例
2019/10/28 jQuery
在vue中使用防抖和节流,防止重复点击或重复上拉加载实例
2019/11/13 Javascript
如何基于JS截获动态代码
2019/12/25 Javascript
js实现自定义右键菜单
2020/05/18 Javascript
Python调用C++程序的方法详解
2017/01/24 Python
Flask解决跨域的问题示例代码
2018/02/12 Python
Python 批量合并多个txt文件的实例讲解
2018/05/08 Python
树莓派采用socket方式文件传输(python)
2019/06/22 Python
Tensorflow:转置函数 transpose的使用详解
2020/02/11 Python
微软美国官方网站:Microsoft美国
2018/05/10 全球购物
美国家居装饰和豪华家具购物网站:One Kings Lane
2018/12/24 全球购物
波兰在线儿童和婴儿用品零售商:pinkorblue
2019/06/29 全球购物
介绍一下mysql的日期和时间函数
2013/03/28 面试题
个人简历自荐信
2013/12/05 职场文书
保护环境的建议书
2014/03/12 职场文书
不忘国耻振兴中华演讲稿
2014/05/14 职场文书
工作求职信
2014/07/04 职场文书
2015年小学一年级班主任工作总结
2015/05/21 职场文书
辩护词格式
2015/05/22 职场文书
nginx搭建图片服务器的过程详解(root和alias的区别)
2021/03/31 Servers
Vue深入理解插槽slot的使用
2022/08/05 Vue.js