专栏首页蔡述雄的专栏包学会之浅入浅出Vue.js:结业篇
原创

包学会之浅入浅出Vue.js:结业篇

蔡述雄,现腾讯用户体验设计部QQ空间高级UI工程师。智图图片优化系统首席工程师,曾参与《众妙之门》书籍的翻译工作。目前专注前端图片优化与新技术的探研。

在第一篇《包学会之浅入浅出Vue.js:开学篇》和上一篇《包学会之浅入浅出Vue.js:升学篇》的学习中,我们首先了解了Vue环境的搭建以及两个重要思想——路由和组件的学习,通过组件库中的按钮组件和导航组件,相信大家也开始了解相应的知识点,接下来我们会详细分析下如何完成由多个组件组成一个复用组件的开发流程。

下面先看看我们的需求

列表组件quiList.vue

本节我们主要要完成这样一个列表功能,每一行的列表是一个组件,列表内可能出现按钮组件或者箭头组件,点击按钮组件可以自定义事件,同时可以根据不同的参数来决定当前列表是带按钮的列表or带箭头的列表。

首先看看quiList.vue

//quiList.vue
<template>
  <div class="qui-list">
    <span class="list-tips">{{tipsText}}</span>
    <qui-btn v-on:btnClickEvent="btnClickEvent" :msg=msg class="small"></qui-btn>
  </div>
</template>

<script>
  import quiButton from '../components/quiButton.vue'
  export default{
    props:{
      msg: {
        default: '下载'
      },
      tipsText: {
        default: '默认的文案'
      }
    },
    components: {
      'qui-btn': quiButton
    },
    methods:{
      btnClickEvent:function(){
          alert('按钮点击事件')
      }
    }
  }
</script>

上面的知识点基本上就是我们之前学过的,只不过记住quiList本身是一个组件,而在这个组件里面,我们又引入了按钮组件quiButton,也就是组件内引用组件,实际上就是组件的嵌套,注意到这里:msg=msg的使用,这里冒号表示绑定的是一个变量msg,然后这个属性通过props暴露出去(本身在按钮中就暴露了msg给列表组件使用),借用下面一张图理解下:

至于点击事件,也是我们之前学习过的事件的绑定。现在引入一个新问题,是否有一个参数,可以决定列表组件的右侧是放置按钮组件呢?还是箭头组件。

动态组件

Vue中提供了一些特定关键字:is和特定的结构<component>来生成动态组件,让我们修改下script里面的内容先:

<script>
  import quiButton from '../components/quiButton.vue'
  import quiArrow from '../components/quiArrow.vue'
  export default{
    props:{
      msg: {
        default: '下载'
      },
      tipsText: {
        default: '默认的文案'
      },
      currentView:{
        default: 'qui-btn'
      }
    },
    components: {
      'qui-btn': quiButton,
      'qui-arrow': quiArrow
    },
    methods: {
      clickEvent: function () {

      }
    }
  }
</script>

首先我们先Import多一个箭头组件,在components中添加一个自定义标签‘qui-arrow’,注意到我们多了一个currentView的自定义属性,默认值是qui-btn,现在再看看template标签里面写什么:

<template>
  <div class="qui-list">
    <span class="list-tips">{{tipsText}}</span>
    <component :is="currentView" v-on:btnClickEvent="clickEvent" :msg=msg class="small"  keep-alive></component>
  </div>
</template>

我们把qui-btn标签去掉了,取而代之的是一个component标签,这是Vue自带的一个标签,可以把它当作一个容器,这个容器可以用来装按钮,也可以用来装箭头。决定这个容器装的是哪个组件的关键代码在于:is="currentView",当currentView的值为qui-btn的时候,这个容器就是按钮组件,当它是qui-arrow的时候,就是箭头组件。而我们刚才给这个变量定义的默认值是qui-btn

keep-alive关键字保持这个组件在内存中是常驻的,由于动态组件可能需要动态切换,这样保持组件活跃可以减少组件变化时候的内存消耗。

可以看到我们的component上还保留着按钮的点击事件和msg信息,这些没有关系,只要箭头组件中不出现同样的变量就不会发生冲突。

<qui-list tipsText="自定义文案,默认右边是按钮" msg="弹层"></qui-list>
<qui-list v-on:btnClickEvent="test"></qui-list>
<qui-list ref="child1" tipsText="最右边是箭头" currentView="qui-arrow"></qui-list>

使用列表组件的时候,只需要给暴露出来的currentView指定一个值,就可以决定右侧是按钮还是箭头了。注意最后一个qui-list上有一个ref的属性,这个属性代表组件集合,当页面中有很多组件的时候,可以通过几种方法来获取对应的某个组件的信息:

console.log(this.$children[0].msg);//通过数组获取
console.log(this.$refs.child1.msg);//通过对象集合获取

其实关于动态组件,不一定要用:is+component来实现,在Vue中有一个指令叫做v-if / v-else / v-else-if,统称判断指令,配合展示指令v-show,可以根据指定的值来决定对应的组件是否应该展示,另外这种做法我不展示了,就当做一个作业吧,有兴趣的还是建议实战一下,毕竟我们也只是教大家入门学习,后面还是希望大家能够自己去扩展学习。

生命周期

这里简单讲一下什么是组件的生命周期,上面我们通过refs来获取组件对象的信息,那么在什么时候或者说哪个时机点去做这件事呢,组件从引用到调用到销毁(比较少操作)有以下几个关键回调函数:

<script>
  export default {
    components: {
      'qui-list': quiList
    },
    beforeCreate:function(){},//组件实例化之前
    created:function(){},//组件实例化了
    beforeMount:function(){},//组件写入dom结构之前
    mounted:function(){//组件写入dom结构了
      console.log(this.$children);
      console.log(this.$refs);
    },
    beforeUpdate:function(){},//组件更新前
    updated:function(){},//组件更新比如修改了文案
    beforeDestroy:function(){},//组件销毁之前
    destroyed:function(){}//组件已经销毁
  }
</script>

所以要想使用refs的内容,就需要在组件写入dom之后才能开始调用哦!

我还需要学什么

目前为止,我们三篇文章已经学了大部分的关于组件和路由的知识,当然这并不是Vue的全部,只是相对于其他的知识点,这些可以算是一个垫脚石,看懂了这些,对后面其他API的应用,帮助很大。下面我列举一些其他的,后续大家可以去官网查看资料的一些关键点,其实都不难,只要有一些小小的项目demo实践,你会发现Vue也不过如此。

过渡

过渡其实就是CSS3动画,transition这些,只是写CSS3变成好像在写JS一样,有点类似于greenSock的一些思想。

指令

目前为止我们学习了一些常用指令,像v-on,v-bind,v-for,还有几个常用的像刚才提到的判断指令和v-show指令,还有v-model指令(主要用于input等表单组件)。当知道指令作用的时候,学习起来其实并不难。

Render

渲染这个方法是我觉得应该用心去学习的,它可以方便我们写出更好的面向对象的组件,而学习它的成本在于这个接口更接近于原生JS代码的使用。如果有需要,后续也可以写一篇关于Render的文章。

总结

三篇系列文暂时在这里告一段落,有些童靴可能到这里还是觉得没有学会Vue,对不起,可能是我的标题太夸张了,也可能因为我的例子还不够清晰,文笔也还不好理解。不过没关系,回顾我们的学习历程,你可以按照这个知识点的学习过程,去找更多的文章,毕竟“熟读唐诗三百首,不会作诗也会吟”嘛。当然,学习过程中我们自己更多的练习和尝试才能锻炼巩固知识。至于浅入之后是浅出还是深出,还是要靠大家自己去定义了!

文末附上所有相关代码和官方文档地址~~~

http://cn.vuejs.org/v2/guide/

附件:

原创声明,本文系作者授权云+社区发表,未经许可,不得转载。

如有侵权,请联系 yunjia_community@tencent.com 删除。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • 包学会之浅入浅出Vue.js:开学篇

    Vue 是国人写的,技术文档也妥妥的是中文,想到这我就有学习的动力。

    蔡述雄
  • 包学会之浅入浅出Vue.js:升学篇

    上一篇《包学会之浅入浅出Vue.js:开学篇》中,我们初步了解单页面组件这个概念,现在通过一个项目,来进一步解析组件的应用吧。

    蔡述雄
  • 腾讯工程师们怎么玩 Vue.js?

    Vue.js 是国人尤雨溪开发的一套前端框架。从去年开始,就火遍了国内外。本文精选了腾云阁中分享的相关优质技术文章,从入门、实战、源码、优化等多个方面进行了阐述...

    云加社区
  • 重磅!Vue3.0终终终于要来了!

    距离尤雨溪大神在Vue.js 伦敦大会上介绍 Vue 3.0要发布的内容,并在个人博客上发布Vue 3.0 的开发路线,已经有一段时间了。今天春节期间,尤小右又...

    闰土大叔
  • 前端进阶知识汇总

    年初突然有了个想法,前端也做了几年了,但是很多知识还很零散,应该系统的把知识归纳起来,于是给自己制定了一个计划,决定花大半年的时间整理一下大前端的知识,把他们都...

    蒋鹏飞
  • 前端每周清单第 41 期 : Node 与 Rust、OpenCV 的火花,网络安全二三事

    前端每周清单专注前端领域内容,以对外文资料的搜集为主,帮助开发者了解一周前端热点;分为新闻热点、开发教程、工程实践、深度阅读、开源项目、巅峰人生等栏目。欢迎关注...

    王下邀月熊
  • 书单丨一同追逐前端技术发展的脚步

    作者运用细致入微的讲解方式带你领略Vue.js的独特魅力,致力于协助你从零开始基于Vue.js创建一个Web应用。如果你是一位熟练运用JavaScript、HT...

    博文视点Broadview
  • 【阅读清单】系列文章清单列表(二)

    动手学深度学习 https://cloud.tencent.com/developer/inventory/1621"

    云加社区
  • 【干货合辑】毕业季,如何敲开「IT世界」的大门

    现在 IT 新技术日新月异,IT 行业的工作也变得赤手可热。刚毕业的大学生也蜂拥而至,但是在校的学习经验并没有一定的专业领域的实操经验,而被企业拒之门外。那么,...

    云加社区
  • 这波前端学习资源,帮她多要了 15k

    最近总有一些读者私信问我:“能推荐一些前端的学习资料吗?”那作为一名正儿八经的全栈型程序员,必须得给大家整一波了。

    沉默王二
  • Python面试经验总结,面试一时爽,一直面试一直爽!

    我做了两份简历,用两个手机账号,两个简历名字,分别在各个招聘网站投了双份简历,一个是数据分析的简历、一个是web全栈开发的简历,我真正接触python快2年,不...

    一墨编程学习
  • GitHub上最流行的Top 10 JavaScript项目

    统计出Github中所有项目的数量,几乎是不可能的,而明确指出哪些是最优秀的项目就更不可能了。如果说到JavaScript,曾经极富创新的项目(很可能)在一两个...

    疯狂的技术宅
  • Java视频教程,最新全套Java教程!

    Java视频学习,来看这一篇就对了,又学习路线图,学习视频,学习技能树,你想要的通通在这里!

    用户7886150
  • VueJS + Webpack 代码分割的三种方式

    对单页应用实行代码分割,是提高页面加载速度的一种很好的方式。因为用户不必在一次请求里加载完所有的代码,能够更快的看到页面并进行交互,这将会提升用户体验(特别是在...

    疯狂的技术宅
  • 踩坑记:当 JavaScript 遇上 UINT 64

    写下这篇文章的缘由是因为在项目过程中,碰到了一个使用 JavaScript 处理 UINT64 类型数字的坑。二进制浮点数中的 0.1 和 0.2 并不是十分...

    腾讯IVWEB团队
  • 前端每周清单第 48 期:Slack Webpack 构建优化,CSS 命名规范与用户追踪,Vue.js 单元测试

    前端每周清单专注前端领域内容,以对外文资料的搜集为主,帮助开发者了解一周前端热点;分为新闻热点、开发教程、工程实践、深度阅读、开源项目、巅峰人生等栏目。欢迎关注...

    王下邀月熊
  • 【干货】1000位产品经理推荐的数据分析书籍

    世界如此喧嚣,知识何其稀少。这是一个信息爆炸的时代,被资讯洪流裹挟的我们,都养成了非常不好的思维习惯:把信息当作知识,把收藏当作学习,把阅读当作思考,把储存当作...

    钱塘数据
  • Module.exports和exports的区别

    学习Seajs时,看到了exports.doSomething和module.exports,想对这两者的区别一探究竟。官方解释因为SeaJs和Nodejs都是...

    金朝麟
  • 非科班、跨行业的如何走前端这条路?

    近日,由于土哥心血来潮,在知乎上回答了一些前端入门方面的问题,导致很多同学关注了我的公号,以及添加了我的私人微信。

    闰土大叔

扫码关注云+社区

领取腾讯云代金券