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 相关文章推荐
JQuery AJAX实现目录浏览与编辑的代码
Oct 21 Javascript
checkbox 复选框不能为空
Jul 11 Javascript
JQuery分别取得每行最后一列和最后一行的示例代码
Aug 18 Javascript
JS页面延迟执行一些方法(整理)
Nov 11 Javascript
js+CSS实现弹出居中背景半透明div层的方法
Feb 26 Javascript
jQuery hover事件简单实现同时绑定2个方法
Jun 07 Javascript
jQuery包裹节点用法完整示例
Sep 13 Javascript
JavaScript中return用法示例
Nov 29 Javascript
在vue中使用css modules替代scroped的方法
Mar 10 Javascript
vue elementUI 表单校验功能之数组多层嵌套
Jun 04 Javascript
vue element 中的table动态渲染实现(动态表头)
Nov 21 Javascript
VUE 实现element upload上传图片到阿里云
Aug 12 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
基于php下载文件的详解
2013/06/02 PHP
关于file_get_contents返回为空或函数不可用的解决方案
2013/06/24 PHP
php Calender(日历)代码分享
2014/01/03 PHP
解决laravel 表单提交-POST 异常的问题
2019/10/15 PHP
php判断数组是否为空的实例方法
2020/05/10 PHP
自己写的Javascript计算时间差函数
2013/10/28 Javascript
JavaScript中的console.profile()函数详细介绍
2014/12/29 Javascript
nodejs URL模块操作URL相关方法介绍
2015/03/03 NodeJs
js匿名函数作为函数参数详解
2016/06/01 Javascript
Nodejs中 npm常用命令详解
2016/07/04 NodeJs
浅谈javascript中的加减时间
2016/07/12 Javascript
ES6使用let命令更简单的实现块级作用域实例分析
2017/03/31 Javascript
Angularjs中的验证input输入框只能输入数字和小数点的写法(推荐)
2017/08/16 Javascript
温故知新——JavaScript中的字符串连接问题最全总结(推荐)
2017/08/21 Javascript
JS实现不用中间变量temp 实现两个变量值得交换方法
2018/02/04 Javascript
防止Layui form表单重复提交的实现方法
2019/09/10 Javascript
angula中使用iframe点击后不执行变更检测的问题
2020/05/10 Javascript
在vue中封装的弹窗组件使用队列模式实现方法
2020/07/23 Javascript
Python自定义进程池实例分析【生产者、消费者模型问题】
2016/09/19 Python
详解python单元测试框架unittest
2018/07/02 Python
Python走楼梯问题解决方法示例
2018/07/25 Python
详解python程序中的多任务
2020/09/16 Python
selenium学习教程之定位以及切换frame(iframe)
2021/01/04 Python
SkinCeuticals官网:美国药妆品牌
2018/04/19 全球购物
Derek Rose官网:英国高档睡衣、家居服和内衣品牌
2020/01/18 全球购物
学生学习总结的自我评价
2013/10/22 职场文书
《胖乎乎的小手》教学反思
2014/02/26 职场文书
优质服务演讲稿
2014/05/14 职场文书
放飞梦想演讲稿600字
2014/08/26 职场文书
2015年行政助理工作总结
2015/04/30 职场文书
党小组评议意见
2015/06/02 职场文书
2019学子的答谢词范本!
2019/07/05 职场文书
如何用Navicat操作MySQL
2021/05/12 MySQL
react合成事件与原生事件的相关理解
2021/05/13 Javascript
SpringBoot2零基础到精通之数据库专项精讲
2022/03/22 Java/Android
解决spring.thymeleaf.cache=false不起作用的问题
2022/06/10 Java/Android