vue自定义指令directive实例详解


Posted in Javascript onJanuary 17, 2018

下面给大家介绍vue自定义指令directive,具体内容如下所示:

vue自定义指令directive实例详解 

官网截图实例

vue除了一些核心的内部定义的指令(v-model,v-if,v-for,v-show)外,vue也允许用户注册自己的一些功能性的指令,有时候你实在是要对Dom操作,这个时候是自定义指令最合适的了。

来直接看例子:当页面加载时使得元素获得焦点(autofocus 在移动版 Safari 是不支持的),就是当页面加载好了,不做任何的操作使得表单自动获得焦点,光标自动在某个表单上代码如下:

Vue.directive('zsqfocus', { // 注册一个全局自定义指令 `v-zsqfocus`,在main.js文件里
 inserted: function (el) { // 当被绑定的元素插入到 DOM 中时自动调用
 el.focus() // 聚焦元素
 }
})

如果想注册局部指令,组件中也接受一个 directives 的选项:

<script>
export default {
 directives: { // 指令的定义
  zsqfocus: {
   inserted: function (el) { // 获得焦点
    el.focus()
   }
  }
  }
 }
</script>

然后你可以在模板中任何组件上使用新的 v-zsqfocus 属性,如下:

<template>
 <input v-zsqfocus /> //调用 
</template>

举了一个跟官网一样的例子,directives跟methods,mounted等是一个级别的可以同时使用。

PS:下面看下vue之自定义指令directive的实例代码,具体代码如下所示:

<template>
 <div>
  <input v-model="dir1" v-my-directive1="dir1"/>
 <input v-model="dir2" v-my-directive2="dir2"/>
 </div>
</template>
<script>
 export default {
  data(){
   return {



 dir1:'',



 dir2:''



 }
  },
  directives:{


 //直接绑定函数,作用等同于update,不做准备工作和扫尾工作
   myDirective1(val){
    console.log(val)
   },


 myDirective2:{




bind(){





 //第一次绑定到元素的准备工作




},




update(val,old){





//在绑定到元素后立即以初始值第一次调用,然后每次example2变化都会调用update





console.log(val)




},





unbind(){





//销毁前的清理工作




}


 }
  }
 }
</script>

总结

以上所述是小编给大家介绍的vue自定义指令directive实例详解,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
拖动一个HTML元素
Dec 22 Javascript
LazyLoad 延迟加载(按需加载)
May 31 Javascript
Js base64 加密解密介绍
Oct 11 Javascript
DOM 事件流详解
Jan 20 Javascript
js获取微信版本号的方法
May 12 Javascript
AngularJS ng-controller 指令简单实例
Aug 01 Javascript
angular中的http拦截器Interceptors的实现
Feb 21 Javascript
Angular实现的进度条功能示例
Feb 18 Javascript
angularJs使用ng-repeat遍历后选中某一个的方法
Sep 30 Javascript
Vue自定义属性实例分析
Feb 23 Javascript
详解ES6 export default 和 import语句中的解构赋值
May 28 Javascript
Vue通过配置WebSocket并实现群聊功能
Dec 31 Javascript
移动web开发之touch事件实例详解
Jan 17 #Javascript
详解layui弹窗父子窗口之间传参数的方法
Jan 16 #Javascript
微信小程序实现image组件图片自适应宽度比例显示的方法
Jan 16 #Javascript
基于VUE移动音乐WEBAPP跨域请求失败的解决方法
Jan 16 #Javascript
AngularJS监听ng-repeat渲染完成的两种方法
Jan 16 #Javascript
微信小程序实现流程进度的图样式功能
Jan 16 #Javascript
使用vue官方提供的模板vue-cli搭建一个helloWorld案例分析
Jan 16 #Javascript
You might like
DC动画电影《黑暗正义联盟》曝预告 5月5日上线数字平台
2020/04/09 欧美动漫
Cakephp 执行主要流程
2010/03/24 PHP
thinkPHP实现表单自动验证
2014/12/24 PHP
Zend Framework入门应用实例详解
2016/12/11 PHP
Yii框架视图、视图布局、视图数据块操作示例
2019/10/14 PHP
跟着JQuery API学Jquery 之三 筛选
2010/04/09 Javascript
js实现带搜索功能的下拉框实时搜索实时匹配
2013/11/05 Javascript
iscroll动态加载数据完美解决方法
2017/07/18 Javascript
jQuery+vue.js实现的九宫格拼图游戏完整实例【附源码下载】
2017/09/12 jQuery
微信小程序实践之动态控制组件的显示/隐藏功能
2018/07/18 Javascript
JavaScript引用类型之基本包装类型实例分析【Boolean、Number和String】
2018/08/09 Javascript
微信小程序激励式视频广告组件使用详解
2019/12/06 Javascript
小程序双头slider选择器的实现示例
2020/03/31 Javascript
Vue如何基于vue-i18n实现多国语言兼容
2020/07/17 Javascript
[01:07:41]IG vs VGJ.T 2018国际邀请赛小组赛BO2 第一场 8.18
2018/08/19 DOTA
Python下载网络文本数据到本地内存的四种实现方法示例
2018/02/05 Python
Python面向对象程序设计示例小结
2019/01/30 Python
详解python函数的闭包问题(内部函数与外部函数详述)
2019/05/17 Python
django基于存储在前端的token用户认证解析
2019/08/06 Python
pytorch模型预测结果与ndarray互转方式
2020/01/15 Python
python和js交互调用的方法
2020/06/23 Python
详解HTML5中的Communication API基本使用方法
2016/01/29 HTML / CSS
Schecker荷兰:狗狗用品和配件
2019/06/06 全球购物
Bata印度官网:源自欧洲舒适鞋履品牌
2020/01/30 全球购物
WatchShop法国:英国排名第一的独立手表零售商
2020/02/17 全球购物
争论的故事教学反思
2014/02/06 职场文书
道德之星事迹材料
2014/05/03 职场文书
2014年教研员工作总结
2014/12/23 职场文书
表扬信格式模板
2015/05/05 职场文书
护士心得体会范文
2016/01/25 职场文书
关于拾金不昧的感谢信(五篇)
2019/10/18 职场文书
导游词之日月潭
2019/11/05 职场文书
详解python的内存分配机制
2021/05/10 Python
python中出现invalid syntax报错的几种原因分析
2022/02/12 Python
java中为什么说子类的构造方法默认访问的是父类的无参构造方法
2022/04/13 Java/Android
springboot创建的web项目整合Quartz框架的项目实践
2022/06/21 Java/Android