全网整合营销服务商

电脑端+手机端+微信端=数据同步管理

免费咨询热线:400-708-3566

vue.js内部自定义指令与全局自定义指令的实现详解(利用directive)

前言

大家都知道在Vue中,我们平时数据驱动视图时候,内部自带的指令有时候解决不了一些需求,这时候,Vue给我们一个很好用的东东来实现自定义指令,这就是directive。下面话不多说了,来一起看看详细的介绍:

directive

这个单词是我们写自定义指令的关键字哦

自定义指令为我们提供了几个钩子函数,这时候你一定好奇什么是钩子函数,说简单点,就是集中表现状态

  • bind: 只调用一次,指令第一次绑定到元素时调用,用这个钩子函数可以定义一个在绑定时执行一次的初始化动作。
  • inserted: 被绑定元素插入父节点时调用(父节点存在即可调用,不必存在于 document 中)。
  • update: 被绑定元素所在的模板更新时调用,而不论绑定值是否变化。通过比较更新前后的绑定值,可以忽略不必要的模板更新(详细的钩子函数参数见下)。
  • componentUpdated: 被绑定元素所在模板完成一次更新周期时调用。
  • unbind: 只调用一次, 指令与元素解绑时调用。

下面我们开始上代码,让我们更好的理解自定义指令怎么做

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>Document</title>
 <script src="https://unpkg.com/vue/dist/vue.js"></script>
</head>
<body>
 <div id="app">
 
 <div class="ab" v-css="{'color':'red','font-size':'30px'}">
 hello
 </div>
 <input type="text" v-focus>
 </div>
 
</body>
</html>

在html中,我们看到了两个指令v-cssv-focus

我们自定义指令时候,一定前面要带上v-

Vue.directive("css",{
 //钩子函数 ,el就是当前元素
 inserted(el,binding){
 //el绑定的元素本身
 //binding就是css指令里面的的对象元素
 let styleobj=binding.value,arr=[];
 for(let key in styleobj){
  arr.push(key+":"+styleobj[key])
  }
 arr=arr.join(";");
 el.style.cssText=arr;
 },
 bind(el,binding) {
 //指令绑定在元素上时候执行,只执行一次
 }
});
 new Vue({
   el:'#app',
 data:{
  show:true
 },
 directives:{
 focus:{
  inserted(el,binding){
  //el绑定的元素本身
  //binding就是css指令里面的的对象元素
  el.focus();
  }
  }
 }
 });

在js里面我们可以看到

Vue.directive("css",{})

我们在 new Vue外部定义了这样一段代码,这就是我们全局自定义指令的模板方式

  • css是自定义指令的名字
  • {}里面我们写上钩子函数就可以

我们所有的钩子函数里面,基本都会有2个参数el,binding

  • el: 指令所绑定的元素,可以用来直接操作 DOM 。
  • binding 绑定元素本身的一个对象

从上面我们可以看到,binding里面保留绑定指令的name和value,这些很重要

局部自定义指令

directives:{
 name:{

 }
 }

区别在于,我们写在new Vue里面,里面api操作和上面的全局自定义指令一样

下面我们开始看代码运行结果

我们可以看到样式引用上去了

文本框也获取了焦点

总结

以上就是这篇文章的全部内容了,希望本文的内容对大家的学习或者工作能带来一定的帮助,如果有疑问大家可以留言交流,谢谢大家对的支持。


# vue  # 自定义全局指令  # vue.js  # 自定义指令  # directive  # Vue.js directive自定义指令详解  # Vue.js源码分析之自定义指令详解  # Vue.js自定义指令学习使用详解  # 浅谈Vue.js中如何实现自定义下拉菜单指令  # 详解Vue.js组件可复用性的混合(mixin)方式和自定义指令  # Vue.js自定义指令的基本使用详情  # 自定义  # 绑定  # 可以看到  # 这就是  # 东来  # 这时候  # 定值  # 几个  # 会有  # 大家都  # 让我们  # 说了  # 不多  # 给我们  # 很重要  # 怎么做  # 这篇文章  # 你一定  # 自带  # 谢谢大家 


相关文章: 建站主机核心功能解析:服务器选择与网站搭建流程指南  相册网站制作软件,图片上的网址怎么复制?  网站制作说明怎么写,简述网页设计的流程并说明原因?  如何在景安云服务器上绑定域名并配置虚拟主机?  建站主机与服务器功能差异如何区分?  代刷网站制作软件,别人代刷火车票靠谱吗?  存储型VPS适合搭建中小型网站吗?  焦点电影公司作品,电影焦点结局是什么?  如何用西部建站助手快速创建专业网站?  岳西云建站教程与模板下载_一站式快速建站系统操作指南  相亲简历制作网站推荐大全,新相亲大会主持人小萍萍资料?  ,购物网站怎么盈利呢?  如何选择美橙互联多站合一建站方案?  如何配置FTP站点权限与安全设置?  网站建设设计制作营销公司南阳,如何策划设计和建设网站?  简历在线制作网站免费,免费下载个人简历的网站是哪些?  宝盒自助建站智能生成技巧:SEO优化与关键词设置指南  如何通过山东自助建站平台快速注册域名?  如何撰写建站申请书?关键要点有哪些?  如何在万网自助建站中设置域名及备案?  导航网站建站方案与优化指南:一站式高效搭建技巧解析  如何选择高性价比服务器搭建个人网站?  成都网站制作报价公司,成都工业用气开户费用?  建站之星后台密码遗忘如何找回?  c# F# 的 MailboxProcessor 和 C# 的 Actor 模型  微信推文制作网站有哪些,怎么做微信推文,急?  如何用低价快速搭建高质量网站?  C++如何编写函数模板?(泛型编程入门)  *服务器网站为何频现安全漏洞?  孙琪峥织梦建站教程如何优化数据库安全?  网站制作中优化长尾关键字挖掘的技巧,建一个视频网站需要多少钱?  网站制作企业,网站的banner和导航栏是指什么?  如何在宝塔面板创建新站点?  建站一年半SEO优化实战指南:核心词挖掘与长尾流量提升策略  javascript中的try catch异常捕获机制用法分析  桂林网站制作公司有哪些,桂林马拉松怎么报名?  胶州企业网站制作公司,青岛石头网络科技有限公司怎么样?  安云自助建站系统如何快速提升SEO排名?  制作表格网站有哪些,线上表格怎么弄?  定制建站流程步骤详解:一站式方案设计与开发指南  长沙做网站要多少钱,长沙国安网络怎么样?  如何在IIS7中新建站点?详细步骤解析  建站主机选购指南:核心配置与性价比推荐解析  建站之星图片链接生成指南:自助建站与智能设计教程  如何选择PHP开源工具快速搭建网站?  Android自定义控件实现温度旋转按钮效果  如何基于PHP生成高效IDC网络公司建站源码?  专业网站设计制作公司,如何制作一个企业网站,建设网站的基本步骤有哪些?  学生网站制作软件,一个12岁的学生写小说,应该去什么样的网站?  建站主机与虚拟主机有何区别?如何选择最优方案? 

您的项目需求

*请认真填写需求信息,我们会在24小时内与您取得联系。