互联网官方网站,网站开发的晋升晋升空间路径,网站备案 电信,网站建设费用计入哪个会计科目欢迎大家前往腾讯云社区#xff0c;获取更多腾讯海量技术实践干货哦~ 本文由蔡述雄发表于云社区专栏 需求背景 组件库是做UI和前端日常需求中经常用到的#xff0c;把一个按钮#xff0c;导航#xff0c;列表之类的元素封装起来#xff0c;方便日常使用#xff0c;调用方… 欢迎大家前往腾讯云社区获取更多腾讯海量技术实践干货哦~ 本文由蔡述雄发表于云社区专栏 需求背景 组件库是做UI和前端日常需求中经常用到的把一个按钮导航列表之类的元素封装起来方便日常使用调用方法只需直接写上qui-button/qui-button或者qui-nav/qui-nav这样的代码就可以是不是很方便呢接下来我们将要完成以下页面 这是我们组件库的首页包含三个子页面按钮页面、列表页面、导航页面点击进去子页面会由路由来配置。先看我们的目录结构 pages目录存放我们的页面包括首页和三个子页面components目录存放我们的具体组件包括按钮组件箭头组件列表组件和导航组件组件和页面其实是一样的文件类型只是由于功能不一样我们就叫不同的称呼 先看路由配置的代码吧 路由配置 import Vue from vue
import Router from vue-router
// 引用页面模板-供路由使用
import index from ../pages/index.vue
import pageQuiButton from ../pages/pageQuiButton.vue
import pageQuiList from ../pages/pageQuiList.vue
import pageQuiNav from ../pages/pageQuiNav.vueVue.use(Router)export default new Router({routes: [{path: /,name: index,component: index},{path: /btn,name: btn,component: pageQuiButton},{path: /list,name: list,component: pageQuiList},{path: /nav,name: nav,component: pageQuiNav}]
}) 有了上一篇的分析之后这里应该很容易看出来几个路由地址 首页http://localhost:8080/#/ 按钮子页http://localhost:8080/#/btn 列表子页http://localhost:8080/#/list 导航子页http://localhost:8080/#/nav 具体每一页的内容分别对应每一页的.vue文件不知大家是否还记得入口页App.vue这个文件承载着一些公用的元素还有就是一个路由容器我们的首页index.vue到时候也是挂载在路由容器中的看看App.vue的代码 入口页App.vue templatediv idapph1 classpage-titlea href#/开发组件库/a/h1router-view/router-view/div
/templatescriptexport default {name: app
}
/scriptstyle scopedimport ./assets/css/App.css;
/style 简单分析一下入口页的代码h1标签是一个公用元素也就是说到时候每个子页面都会带着这个h1他的作用就是方便我们快速回到首页子页面的内容会注入到router-view中。这里值得关注的地方是style标签我们可以在style标签里面直接写样式也可以直接引入一个样式文件scoped关键字表示这个样式是私有的也就是说即使两个组件写着一样的#app{}样式也不会冲突程序会加上命名空间这也就是为什么在script标签中有个name参数。 首页index.vue templatediv classmod-module mod-paralleldiv classimg-list type-fulldiv classimg-boxp classimg-itema classpage-link href#/btn按钮/a/p/divdiv classimg-boxp classimg-itema classpage-link href#/list列表/a/p/divdiv classimg-boxp classimg-itema classpage-link href#/nav导航/a/p/div/div/div
/templatestyle scopedimport ./css/index.css;
/style 首页的代码也是非常简单和我们平时写html差不多就是几个跳转链接跳到对应的子页面程序运行的时候会将template标签里面的内容都注入到App.vue页面中的router-view标签中从而实现无刷新的路由跳转。 从下面的内容开始我们的知识将会深入一些。我们先不急着看其他几个子页面因为子页面里面只是引用对应的组件所以我们先从组件开始入手。 按钮组件quiButton.vue templatebutton classqui-btnspan{{msg}}/span/button
/templatescriptexport default {data:function(){return {msg:下载}}}
/script
style scopedimport ./css/reset.import.css;import ./css/qui-btn.import.css;
/style 按钮组件很简单就是一个正常的button标签script标签中暴露这个组件的data属性data是Vue的属性值不是乱写的~~。当按钮组件被初始化的时候msg自定义属性会被绑定到span标签中的{{msg}}中两个花括号用来绑定属性这种写法学过模版化前端代码的人应该都比较熟悉。这里需要注意一个地方如果不是组件的话正常data的写法可以直接写一个对象比如data{ msg 下载 }但由于组件是会在多个地方引用的JS中直接共享对象会造成引用传递也就是说修改了msg后所有按钮的msg都会跟着修改所以这里用function来每次返回一个对象实例。 这就是一个非常简单的按钮组件结构、样式文案。 这时候问题来了按钮中的文案我希望可以异化不能每次都初始化一个叫做“下载”文案的按钮吧希望可以以属性的方式来使用比如这样子写就可以改变我们的按钮文案 qui-btn msg确定 classsmall/qui-btn 没问题属性的接口暴露只需要写在prosp里面就可以了如下所示修改下script标签的内容 scriptexport default {props: {msg: {default: 下载}}}
/script 把属性写在props里面就可以暴露给其他页面调用了在组件中props是专门用来暴露组件的属性接口的这里给了一个默认值‘下载’后面我们要使用的话只需要btn msg确认/btn 就可以修改按钮的默认文案了。 我们在上一篇文章的开头就讲了Vue是数据驱动模式的当我在btn结构写上msg确认的时候对应script里面的msg属性就会自动修改了。 按钮事件 按钮总少不了点击事件吧那在Vue中怎么绑定事件呢用methods属性看下代码 templatebutton classqui-btn v-on:clickbtnClickEventspan{{msg}}/span/button
/templatescriptexport default {props: {msg: {default: 下载}},methods: { //绑定事件的关键代码btnClickEvent: function(){alert(this.msg);}}}
/script methods属性中可以写任何的自定义函数写完之后绑定的方式也很简单在button上写关键字v-on:click把对应的事件写上就可以了以上代码实现的就是点击按钮弹出按钮中的文案v-XXX是Vue里的一些关键字叫做指令我们后面会慢慢学到更多的指令v-on:click可以缩写为click当然还有其他的事件比如v-on:tab等等 使用按钮组件pageQuiButton.vue 现在我们大致做了一个按钮组件了那么怎么调用它呢去到我们的pageQuiButton子页面。 //pageQuiButton.vue
templatediv idpageQuiButton!--使用--qui-btn msg确定 classsmall/qui-btn/div
/template
scriptimport quiBtn from ../components/quiButton.vue /*引用*/export default {name: pageQuiButton,components: {qui-btn: quiBtn /*注册自定义标签*/}}
/script 从script开始解析首先引入我们的组件赋值给变量quiBtn使用时候直接将quiBtn作为对象的一部分写进components属性这是Vue用来存储引用组件的关键字同时对应我们自定义的标签 qui-btn完成这些操作之后我们就可以在template中使用自定义的按钮组件qui-btn上面也说了用msg属性来自定义按钮的文案。完成之后我们就可以在页面中看到具体效果点击按钮弹出对应的文案。 上述我们将按钮事件写成默认的alert(this.msg)如果有些按钮想要异化怎么办。之前说了msg属性可以支持自定义那么按钮的点击事件如何支持自定义呢 //pageQuiButton.vue
//监听子组件的事件
qui-btn v-on:btnClickEventdoSth msg我可以点击 /qui-btn 上面的代码在引用组件的时候注册了一个事件这个btnClickEvent事件是之前我们在按钮组件中绑定到按钮的click事件中的然后我们给这个事件一个自定义的方法doSth同时在script中声明这个自定义的方法如下 //pageQuiButton.vue
//页面中引用子组件并监听子组件的事件
scriptimport quiBtn from ../components/quiButton.vueexport default {name: pageQuiButton,components: {qui-btn: quiBtn},methods: {doSth: function(){alert(你点击了组件的click:btnClickEvent);}}}
/script 专业一点的说这种做法叫做监听由引用方暂且叫做父组件监听子组件的内置方法同时在子组件中需要触发这个事件以下是在子组件中的关键代码 //quiButton.vue
//子组件中的代码
scriptexport default {props: {msg: {default: 下载}},methods: {btnClickEvent: function(){alert(先弹出默认的文案);this.$emit(btnClickEvent);//关键代码父组件触发自定义事件}}}
/script 这里的关键代码就是$emit也叫触发机制父组件监听子组件触发。如果觉得绕以下描述可能会比较好理解小B子组件有一个电话号码子组件注册的事件有一天小B把电话号码告诉了小A父组件让小A打电话给他于是小A就拨打了小B的电话号码监听这时候整个沟通流程没有结束必须要小B接听了电话触发两人之间才算完成了打电话这件事情。 完成这步之后引用方父组件就可以给不同子组件调用不同的事件处理了 qui-btn v-on:btnClickEventdoSth1 msg确定 /qui-btn
qui-btn v-on:btnClickEventdoSth2 msg取消 /qui-btn
script
/*这里只是简单展示*/methods: {doSth1: function(){alert(111);},doSth2: function(){alert(222);}}
/script 给按钮加图标 有时候单纯的文案异化还不够比如一些按钮是图标文字类型的而且图标还可能不一样那应该怎么办呢 如果按钮组件的结构除了开发时候预设的那些dom结构之外允许我们在调用的时候添加一些自己想要的结构那是不是解决了呢是的Vue早就为我们考虑了这一点他就是slot标签。 下面给我们的按钮组件加上一段结构 //quiButton.vue
templatebutton classqui-btn v-on:clickbtnClickEventslot nameicon/slot!--重点在这里--span{{msg}}/span/button
/template 加入了关键字slot并赋予一个name值之后我们再看看引用如何使用 //pageQuiButton.vue
qui-btn msg下载 classwith-iconimg sloticon classico srcxxx.png /
/qui-btn img上有个关键字sloticon对应组件中的nameicon渲染的时候会将img整个替换掉组件中的对应name的slot标签其实很好理解slot的翻译是插槽的意思相当于把img这块内容插到一个名叫icon的插槽里面去。 中场休息一下 学到这里我们已经学会了用props给按钮自定义文案用on和emit给按钮自定义点击触发用slot给按钮添加一些自定义结构。当你回头去翻文档的时候你会发现props事件slot这三样刚好就是学习组件通讯中最最最关键的三个环节。将这三个环节以实际案例解析出来后好像也没有那么难了吧~ 上述我们已经讨论了如何制作一个按钮组件以及如何使用我们的按钮组件。 接下来我们通过制作一个导航组件来了解Vue中对于for循环的巧妙使用。 导航组件quiNav.vue 我们将完成这样一个导航组件点击导航中的tab可以给当前tab加上一个active类同时切换底部的黄色滑条并且输出当前tab的文案同时支持自定义事件。 由于在现实项目中我们导航的tab个数是不定的所以制作组件的时候我们希望可以暴露一个属性来支持导航的tab个数而tab的长相和应用其实是一样的那么这时候我们可以用一个for循环来输出每一个tab。先看看关键代码 //quiNav.vue
templatediv classqui-nav nav-type-1a v-for(item, index) in items !--关键代码v-for--span classnav-txt{{item.text}}/span/a/div
/templatescriptexport default {data:function(){return {items:[{text: 首页,active : true},{text: 列表,active : false},{text: 关于,active : false},{text: 招聘,active : false}]}}}}
/script 该段代码的关键地方在于a标签上v-for关键字还记得我们在前面说过的v-on绑定事件吗v-XXX关键字是Vue预留的可以把它理解为js中的for in 循环items是我们在data里面定义的对象还记得为什么data要写在function中返回吗。v-for(item,index) in items暴露了item和index两个接口这是Vue提供的代表items中的每一项以及该项对应的下标接着我们就可以在标签中使用绑定item.text了。 这段代码理解了之后我们再延伸一个动态添加class的概念。我们希望每个tab都有默认的class类名(比如nav-item类)在点击每个tab的时候当前tab添加active类其他的tab删除这个active类。在Vue怎么实现呢 动态类名 //quiNav.vue
templatediv classqui-nav nav-type-1a v-for(item, index) in items :class[commonClass,item.active ? activeClass : ] span classnav-txt{{item.text}}/span/a/div
/templatescriptexport default {data:function(){return {commonClass:nav-item,activeClass:active,items:[...//数据]}}}
/script 在template中添加了一句关键代码 :class[commonClass,item.active ? activeClass : ] :class给组件绑定一个class属性类似jQuery中的attr方法这里的写法是缩写他的全拼应该是v-bind:又一个v-XXX写法。注意到最前面有个冒号classXXX和classXXX的区别在于不带冒号的是静态的字符串绑定带冒号的是动态的变量绑定。我们给class绑定了一个数组这个数组带有变量先看commonClass这个变量在data中定义了然后数组的第二个元素是一个JS的三元运算符item.active?activeClass:当每个item中的active值为true时绑定activeClass变量对应的类如果为false则为空。最后的结果是当item.active为true时候tab的class值为nav-item active当为false就只有nav-item。 上面的代码可以理解的话那么我们切换tab的active类就转换为修改每个item里面的active的值再次体现数据驱动。 那么问题来了怎么去修改每个item里面的active值呢没错给每个tab绑定一个点击事件当点击事件触发的时候修改当前tab对应item的active值。于是代码变成了如下 templatediv classqui-nav nav-type-1a v-for(item, index) in items :class[commonClass,item.active ? activeClass : ] v-on:clicknavClickEvent(items,index) span classnav-txt{{item.text}}/span/a/div
/templatescriptexport default {data:function(){return {commonClass:nav-item,activeClass:active,items:[{text: 首页,active : true},......]}},methods:{navClickEvent:function(items,index){/*默认切换类的动作*/items.forEach(function(el){el.active false;});items[index].active true;/*开放用户自定义的接口*/this.$emit(navClickEvent,items,index);}}}
/script 我们利用for循环给每个a标签绑定了一个click事件对应methods中定义的navClickEvent接收两个参数items和index你也可以传人item和index看个人代码喜好然后当点击的时候把items中的每个item.active置为false把当前的tab的active值置为true这样就可以动态切换active类了。最后再触发一次自定义事件参考按钮制作自定义事件。 以上就是我们导航组件的内容了回想下我们做了啥for循环输出每个tab为每个tab绑定动态的class类名同时在点击事件中动态切换类底部的小黄条其实是利用active类做的CSS 小结 回顾下我们这一篇章都学了什么内容。 页面路由的配置按钮组件自定义属性props按钮组件自定义事件 $on $emit按钮组件自定义子块slotfor循环实现导航组件动态类名上述内容已经基本上涵盖了组件的重要知识点主要是父组件页面和子组件之间的调用和通讯数据交互绑定好好消耗一下我们会发现其实Vue的总体逻辑思想和jQuery是一样的毕竟最后都回归到javascript只是由于代码设计角度的不同我们可能看到和以前调用jQuery时候的写法不一致但其实都有对方的影子在里面相信理解了Vue的代码思想之后以后我们学习React等其他类似的框架的时候也会比较得心应手了。 下一篇文章《包学会之浅入浅出Vue.js结业篇》中我们将会学习如何用多个组件来组成一个大的组件也就是真正意义上的父子组件之间的关系。再忍耐一下就可以出山了新领域的大门就在前面让我们大步往前跨吧。 文末附上所有相关代码和官方文档地址~~~ http://cn.vuejs.org/v2/guide/ 相关阅读【每日课程推荐】机器学习实战快速入门在线广告业务及CTR相应知识 此文已由作者授权腾讯云社区发布更多原文请点击 搜索关注公众号「云加社区」第一时间获取技术干货关注后回复1024 送你一份技术课程大礼包 海量技术实践经验尽在云加社区
