Vue.js 2.0学习教程之从基础到组件详解

前言

最近这段时间里不停的做着Vue的技术分享，虽然不是什么深层次的代码底能架构，如果底层架构真说出来，我就不会做Vue.js 2.0从基础到组件了，就会分享Vue从底层到还是到底层。我相信能来看我这次分享的朋友都是在工作开发层面上面临着一些问题。此次分享我们先抛开Vue - router和Vuex,很多朋友都觉得Vuex和router比较难，大错特错！

对Vue 2.0的介绍

我对Vue 2.0认知，能it前端框架的认知，在我们不算底层原理的情况下，什么才是精髓，那就是基础的方法和一些api介绍，随着现代数据量庞大，业务逻辑也变得更加复杂，随着数据情景的不同展示，jquery，angular1.0等一系列框架，已经满足不了开发的需求了，如何用数据驱动去管理数据，在我认知里，前后端联调，对接口，通过什么？那过json数据来传递着一切的信息。

我们操作dom来分析数据，那就是用屠龙刀去切菜，用数据驱动去改变数据，那才叫细功出好活。还有我们如何更好的通过组件来让一个复杂的页面划分为代码精简，易维护，可复用，阔展性强的组件集合！

如果是你如何去划分这个页面

• 对头部进行一个组件的化分。（通过 prop：{[img]} 来进行头图的划分。）
• input框的划分。
• 图型验证码和图型input框。
• 短信组件和短信input框。
• 协议服务的弹窗。
• button的划分。
• 语音验证码的划分。

这样一算你们会发现一个小小的登陆就划分出6个组件，可能给你的感觉分的太细，那我也感觉分的太细，那我为什么要分的那么细呢，那就是增强可复用性，可阔展性。

那我何去解这个组件太过于细分的问题，我们可以合并那些东西，以我一眼看过去，唯一能合并的就是中间一套注册体系，我们把2,3,4,5,7,这几个细组件合并到login.Vue组件里，在这个层面上，我们只要暴露出四个输入框内容向外传递的数据，这样一个页面整体就我们拆开来了，对于每个页面的代码量就减少了，对于维护，改bug是一个很大的帮助。

组件从基础开始

Vue的在项目中如何去做好一个体系问题，最主要的就是template里整体的组织，如何用好的组织体系方便的展现复杂的逻辑操作，我个人认为而不是通过new Vue去操控整体，反正new Vue里的一切选项是着template这个组织体系走的，如果是一个房子，template就是地基，new Vue里的选项就是水泥石头。

1、模板语法

能用javascript表达式则用表达式，我觉得表达式是给人感觉最清楚 的，能结合模板去正确使用表达式来解析那是最明了的。

上面一眼就能让人明白，不用往下看就明白我所要改变数据是为了什么，就这一行模板语法用javascript表达式写让你能明白一切。

2、修饰赋

修饰符（Modifiers）是以半角句号 . 指明的特殊后缀，用于指出一个指令应该以特殊方式绑定。

在修饰赋当中，我们如何灵活运用修饰符去减速少代码量，不要忘记对于组件事件要加.native。比如对组织事件冒泡和阻止默认事件都是很方便书写，直在template中书，例如@touchmove.prevent.stop。

虽然计算属性在大多数情况下更合适，但有时也需要一个自定义的 watcher 。这是为什么 Vue 提供一个更通用的方法通过 watch 选项，来响应数据的变化。当你想要在数据变化响应时，执行异步操作或开销较大的操作，这是很有用的。

基于这个官方的理解再总结我个人的整体理解。给出computed和watch的总结，记住这几点的总结，在做项目的时候想想这些总结，选择你的应用方法

• computed : 监听多个数据或者一个数据来维护返回一个状态值 ，只要其中一个或多个数据发生了变化，则会从新计算整个函数体，从新返回状态值。
• watch : 只有一个一个监听据，只要这个数据发生变化，就会在返回两个参数，第一个是当前的值，第二个是变化前的值，每当变化的时候，则会触发函数体的里的逻辑行为，来进逻辑后续操作。

其实我觉得计算属性也好，computed,watch这几个都不是有多难，如果浅层面上看很容易理解，如果从深层面上看，很多小伙伴会存在什么问题，就是会滥用，混用，这些计算属性，虽然最后结果都能实现，就像条条大路通罗马，你走的是最远的路，想返回可能都难

我就举以上几个简单的例子，但是我想说的就是两点基础非常重要。

要如何结合三大牛B特性：

• computed vs watch
• v-for
• v-if v-else-if v-else
• template外层包裹模板

如果你看到这个需求，你花3分种时间如何去用以上三大特性做出两种解决方法你就是Vue精通者。

• 用v-for进行数据循环，用template包v-if 进行标红和排名标识。
• 用v-fot进行数据循环，用methods结合：class进行票红和排名标识。

我还是感觉第二个方便点。

如何去写组件，从什么地方开始写起，如果你对基础api已经了如指掌了，那你就可以开手动组件了，组件要学会利用几个组件的很大的特性，最大的特性我就不用说了，用props接数据，用$emit去触发事件 用v-on去接收自定义事件，有时候你会发现有时候通过父组件传递来的数据，我们在组件内部一直需要改动，那我们不得不用watch方法去复制一个复本，再进行操作，那我们有什么好办法，如更面临更多组件套组件的模式下，如果利用特性api去做最简便的写法，那就是$parent、$children、$root、$el、$refs 这五大特性。

组件规范

• 基于模块开发
• Vue 组件命名
• 组件表达式简单化
• 组件 props 原子化
• 验证组件的 props
• 将 this 赋值给 component 变量
• 组件结构化
• 组件事件命名
• 避免 this.$parent
• 谨慎使用 this.$refs
• 使用组件名作为样式作用域空间
• 提供组件 API 文档
• 提供组件 demo
• 对组件文件进行代码校验

基于模块开发

始终基于模块的方式来构建你的 app，每一个子模块只做一件事情。

Vue.js 的设计初衷就是帮助开发者更好的开发界面模块。一个模块是应用程序中独立的一个部分。

怎么做？

每一个 Vue 组件(等同于模块)首先必须专注于解决一个单一的问题，独立的,可复用的,微小的 and 可测试的。

如果你的组件做了太多的事或是变得臃肿，请将其拆分成更小的组件并保持单一的原则。一般来说，尽量保证每一个文件的代码行数不要超过 100 行。也请保证组件可独立的运行。比较好的做法是增加一个单独的 demo 示例。

Vue 组件命名

组件的命名需遵从以下原则：

• 有意义的: 不过于具体，也不过于抽象
• 简短: 2 到 3 个单词
• 具有可读性: 以便于沟通交流

同时还需要注意：

• 必须符合自定义元素规范: 使用连字符分隔单词，切勿使用保留字。
• app- 前缀作为命名空间: 如果非常通用的话可使用一个单词来命名，这样可以方便于其它项目里复用。

为什么？因为组件是通过组件名来调用的。所以组件名必须简短、富有含义并且具有可读性。

如何做？

组件表达式简单化

Vue.js 的表达式是 100% 的 Javascript 表达式。这使得其功能性很强大，但也带来潜在的复杂性。因此，你应该尽量保持表达式的简单化。

为什么？

• 复杂的行内表达式难以阅读。
• 行内表达式是不能够通用的，这可能会导致重复编码的问题。
• IDE 基本上不能识别行内表达式语法，所以使用行内表达式 IDE 不能提供自动补全和语法校验功能。

怎么做？

如果你发现写了太多复杂并难以阅读的行内表达式，那么可以使用 method 或是 computed 属性来替代其功能。

将 this 赋值给 component 变量(

在 Vue.js 组件上下文中，this指向了组件实例。因此当你切换到了不同的上下文时，要确保 this 指向一个可用的 component 变量。

换句话说，不要在编写这样的代码 const self = this; ，而是应该直接使用变量 component。

为什么？

将组件 this 赋值给变量 component可用让开发者清楚的知道任何一个被使用的地方，它代表的是组件实例。

怎么做？

<script type="text/javascript">
export default {
methods: {
hello() {
return 'hello';
},printHello() {
const self = this; // 没有必要
console.log(self.hello());
},};

组件结构化

按照一定的结构组织，使得组件便于理解。

为什么？

• 导出一个清晰、组织有序的组件，使得代码易于阅读和理解。同时也便于标准化。
• 按首字母排序属性，data,computed,watches 和 methods 使得属性便于查找。
• 合理组织，使得组件易于阅读。(name; extends; props,data and computed; components; watch and methods; lifecycle methods,等）
• 使用 name 属性。借助于Vue devtools可以让你更方便的测试。
• 合理的 CSS 结构，如 BEM 或 oocss - 详情?;。
• 使用单文件 .Vue 文件格式来组件代码。

怎么做——组件结构化

<script type="text/javascript">
export default {
// 不要忘记了 name 属性
name: 'RangeSlider',// 组合其它组件
extends: {},// 组件属性、变量
props: {
bar: {},// 按字母顺序
foo: {},fooBar: {},// 变量
data() {},computed: {},// 使用其它组件
components: {},// 方法
watch: {},methods: {},// 生命周期函数
beforeCreate() {},mounted() {},};