腾讯DeepOcean原创文章:dopro.io/explore-vue…
就在前几个月,Vue star 数突破了 100k,正式超越 React。
一、扯点家常
都说前端是个更新迭代飞快的领域,前端框架的演进也越来越激烈,以至于在技术社区里总看到有人求饶:“求不要更新了,老子学不动了”。在过去的好多些年,jQuery 在前端领域都处于统治地位,在众多框架中脱颖而出,很多写惯了 jQuery 语法的开发者们,都发现再也回不去写原生 JS 了。随着时间的发展,也出现了各式各样的优秀框架,难免不同框架的粉丝也会把不同框架拿来对比,甚至互掐。说说今日的主角,Vue,在近几年也是非常火的一个框架。对于初学者来说,Vue 上手的成本真的很低了,易用度非常高,并且因为是国内开发者开发的,文档都是中文,国内大批量的公司都在使用,也导致了 Vue 的增速特别快。
不过也正是有不同框架的更新迭代,相互竞争,才创造一个越来越好的前端世界。正如 Vue 开发者在 twitter 发布的一条信息:
二、初入 Vue 大门
1. 什么是 Vue?Vue 是一套用于构建用户界面的渐进式框架。它有着如下特点:
- 渐进式框架,采用自底向上增量开发设计
- 模版双向绑定机制
- 利用指令(directive)对 DOM 进行封装
- 组件化设计思想
Vue 的组件化将 UI 页面分割为若干组件进行组合和嵌套
2. 快速上手 Vue工欲善其身,必先利其器。
无论我们学习哪种框架,搭建环境是必经之路。Vue 提供了一个官方的 CLI,为单页面应用快速搭建繁杂的脚手架。当然,任何的前提都是首先你了解了 Vue 相关的概念,不然新手一上来搭建 Vue-cli,看到里面牵扯到的 webpack、npm、nodejs等等概念,也是会一脸懵逼,很容易有从入门到放弃的想法的。
在搭建 Vue-cli 这点上,我们不妨直接站在巨人的肩膀上,这里有一篇带大家快速开启第一个 Vue 页面的教程,非常推荐:juejin.cn/post/684490… 。
三、Vue 组件化
天下武功,唯快不破。组件化的好处不用一一细说大家都知道了,组件是 Vue.js 最强大的功能之一,让我们用独立可复用的小组件来构建大型应用,开发效率更快更敏捷。为了更好地复用,这里以建立弹窗组件为实例,谈谈如何建立一个项目的组件库。
1. 组件库结构
qqcartoon-ui // 组件库名字
├── index.js // 组件文件
├── aa1 // 各个组件包
├── bb1
├── dialog
├── index.js // 组件注册
├── src
├── index.scss // 组件样式
├── index.vue // 组件结构
├──
└── ...
一般在 Vue 里,我们会把组件写在 components 里,但是为了建立一个可以多个项目共用的组件库,这里重新命名,如 qqcartoon-ui 。
- index.js:收录了组件库里各个组件,以作为实例引用的入口。
import UIDialog from './dialog/index'
import UIA from './aa1/index'
import UIB from './bb1/index'
export {
UIDialog,
UIA,
UIB
}
- dialog/index.js:完成组件注册。
import UIDialog from './src/index';
UIDialog.install = function(Vue){
Vue.component(UIDialog.name,UIDialog);
};
export default UIDialog;
- dialog/index.scss:组件样式。
.ui-dialog {
position: fixed;
top: 0px;
left: 0px;
width: 100%;
height: 100%;
z-index: 9999;
-webkit-box-orient: horizontal;
-webkit-box-pack: center;
-webkit-box-align: center;
background: rgba(0,0,0,0.4);
}
...... 省略其余样式代码
- dialog/index.vue:组件结构。组件的模版只能有一个根元素。
<template>
<div class="ui-dialog" :style="{diaplay:show?'-webkit-box':'none'}">
<div class="ui-dialog-cnt">
<div class="ui-dialog-bd">
<h4>{{title}}</h4>
</div>
</div>
</div>
</template>
<style lang="scss" src="./index.scss"></style>
<script>
export default {
name:'UIDialog',
props:{
show:{
type:Boolean,
default:false
},
title:{
type:String,
default:"这是标题"
}
}
}
</script>
2. 组件的引用
在项目的根目录下,你可以找到一个 js 文件,可能它的命名是 main.js。在里面引入你需要的组件名。
import {UIDialog} from '@/qqcartoon-ui/packages/index'
Vue.use(UIDialog)
这个时候,弹窗组件就已经引用到项目中了,这时候只需要最后一步,在项目 vue 文件里使用:
<UIDialog :show="true"></UIDialog>
这个时候编译代码,就可以在浏览器看到最终的弹窗效果啦!
四、Vue 组件规范化
- UI 的展示
- 与用户的交互(事件)
- 动画效果
- props 允许外部环境传递数据给组件。
- events 允许组件出发外部环境的副作用。
<ul id="app">
<li v-on:click = "clickMe">单击事件</li>
</ul>
<script>
var app = new Vue({
el : '#app',
data : {
},
methods : {
clickMe : function(){
console.log('单击事件发生');
}
}
})
</script>
- slot 允许外部环境将额外的内容组合在组件中。
<div>
<h2>我是子组件的标题</h2>
<slot>
只有在没有要分发的内容时才会显示。
</slot>
</div>
父组件模版:
<div>
<h1>我是父组件的标题</h1>
<my-component>
<p>这是一些初始内容</p>
</my-component>
</div>
渲染结果:
<div>
<h1>我是父组件的标题</h1>
<div>
<h2>我是子组件的标题</h2>
<p>这是一些初始内容</p>
</div>
</div>