10分钟上手Vue.js

一、简介

在web开发应用中，网页变得更加动态化和强大了。通过JavaScript，我们已经可以把很多传统的服务端代码放到浏览器中。对于前端开发而言，我们所面临的需求变得越来越复杂。

当应用程序开始变复杂后，我们需要频繁操作DOM。这将使我们的代码变得非常难以维护。

这本质上是命令式操作DOM的问题，我们以往用js逻辑代码去操作DOM写需求，但是当应用程序变复杂后，代码就会变的杂乱无章。如果现在抛弃原有命令式操作DOM的技术方案，改用简单的指令去控制的话，这个问题是否能够轻易的解决，并且提高开发的效率，让开发者花更多的时间去投入到业务逻辑中去，所以Vue.js提供了声明式操作DOM的能力来解决这个问题。

二、脚手架vue-cli搭建vue框架

vue-cli是vue2.0里面的一个搭建vue框架的脚手架，脚手架工具大大降低了webpack 的使用难度，只需根据提示一步步安装即可，大大降低了我们的学习成本，加快了我们的开发速度。

在使用vue-cli之前，请确认你的电脑已经安装了node，建议版本在8.0.0以上：

1、全局安装 vue-cli

在命令行中输入 npm install -g vue-cli

安装完成后，检验是否安装成功，输入 vue-V ，如果出现版本号，则说明安装成功。

2、安装webpack

npm install webpack webpack-cli -g

安装完成后，检验是否安装成功，输入 webpack -v ，如果出现版本号，则说明安装成功。

3、用vue-cli来构建项目

首先在电脑某个磁盘新建一个文件夹作为项目的存放地，然后cd到目录下，输入命令创建项目vue init webpack vue-demo，等待模板下载成功后，会有一个交互式的选项让你选择：

? Project name vue-demo # 项目名称

? Project description A Vue.js project # 项目描述

? Author # 作者名称

? Install vue-router? Yes # 是否需要 vue-router，路由肯定要的

? Use ESLint to lint your code? Yes # 是否使用 ESLint 作为代码规范.

? Pick an ESLint preset Standard # 一样的ESlint 相关

? Set up unit tests Yes # 是否安装单元测试

? Pick a test runner 按需选择 # 测试模块

? Setup e2e tests with Nightwatch? 安装选择 # e2e 测试

? Should we run `npm install` for you after the project has been created? (recommended) npm # 包管理器，安装项目所需的依赖

安装完成后，按照安装提示，cd到项目目录, 执行命令npm install进行初始化。进入项目所在的根目录里面，从package.json可以看到“开发”和“生产”环境的入口。

dev是开发环境的启动命令，build是生产打包环境的命令，lint 是ESLint的检查命令，在 --ext前加一个--fix可以自动修复不符合规范的代码。

4、打包上线

运行npm run build命令，就可以进行打包工作了，打包完成后，会生成 dist 目录，项目上线时，把dist 目录下的文件放到服务器就可以了。

三、项目目录介绍

四、vue组件结构及常用指令介绍

1、组件结构：

template标签：html模板；style标签：页面样式；script 标签：业务逻辑

2、内置指令

指令是带有v-前缀的特殊属性，其值限定为单个表达式。指令的作用是，当表达式的值发生改变时，将其产生的连带影响应用到DOM上。

Vue.js针对一些常用的页面功能提供了以指令来封装的使用形式，用以HTML元素属性的方式使用。

（1）v-show

根据表达式的值的真假，来显示或者隐藏HTML元素。

我们运npm run serve或者yarn serve启动服务后，用chrome浏览器打开如下页面并按F12调出开发者工具，切换到控制台里面的Elements，展开div，如下图所示：

从图中我们看出，因为data（数据源）中控制元素显示和隐藏的showList 为false。

因此使用v-show计算表达式的时候，div没有显示，从chrome浏览器中可以看到，使用v-show指令的时候，元素本身是会被渲染的，至于元素显示的与否是通过设置CSS样式属性display来控制的，如果表达式的值为false，则设置样式“display：none”。

（2）v-if/v-else-if/v-else

根据表达式的值真假来生成或者删除一个元素。

我们在data中定义type变量的值为字符串：0，因为指令表达式条件均不满足，页面上会显示Not A/B/C，红色方框中当type为A，B，C的div因为没有满足指令的条件，并没有显示在页面上，v-if搭配v-else-if和v-else使用，当指令表达式条件满足的时候，DOM元素会被渲染到页面上。

同样按照上述v-show的调试步骤，我们会发现，当指令表达式的条件不满足时，DOM元素并不会渲染在页面上，DOM节点不会存在，是真正意义上的条件渲染。并且当一个条件满足时，后续的条件都不会再判断，使用时，v-else-if和v-else要紧跟在v-if或者v-else-if后面。

（3）v-for

通过循环的方式来渲染一个列表，循环的对象可以是数组，也可以是一个对象。

表达式的语法形式为item in items，其中items是源数据数组，而item则是被迭代的数组元素的别名。

v-for指令的表达式还支持一个可选的参数作为当前的索引，为了重用和重新排列现有元素，需要为列表的每一项提供一个唯一key属性，key的类型只能是string或者number类型，item为list数组里面的每一项，index为list数组的索引。如图所示：

（4）v-text

更新元素本文的显示，最常用的还是插值表达式的形式{{变量}}。

（5）v-html

更新元素的innerHTML，该部分内容作为普通的HTML代码插入，不会作为Vue模板进行编译，如下图所示：

（6）过滤器

过滤器函数总是接收表达式的值作为第一个参数，如{{message | filterName}}，message的值将作为filterName过滤器函数的参数，用法如下图所示：

过滤器注册的两种方式为组件内部注册和全局注册

Main.js项目入口文件里面全局注册，绑定在Vue实例上面

五、组件的生命周期

1、beforeCreate

在实例初始化之后，数据观测和event/watcher时间配置之前被调用，可以在这一阶段添加loading事件。

2、created

实例已经创建完成之后被调用。在这一步，实例已经完成以下的配置：数据观测，属性和方法的运算，watch/event事件回调。然而，挂载阶段还没开始，$el属性目前不可见。

3、beforeMount

在挂载开始之前被调用，相关的render函数首次被调用。该钩子在服务器端渲染期间不被调用。

4、mounted

el被新创建的vm.$el替换，并挂载到实例上后调用该钩子函数。如果root实例挂载了一个文档内元素，当mounted被调用时vm.$el也在文档内。该钩子在服务端渲染期间不被调用。

5、beforeUpdate

数据更新时调用，发生在虚拟DOM重新渲染和打补丁之前。你可以在这个钩子中进一步第更改状态，这不会触发附加的重渲染过程。该钩子在服务端渲染期间不被调用。

6、updated

由于数据更改导致的虚拟DOM重新渲染和打补丁，在这之后会调用该钩子。当这个钩子被调用时，组件DOM已经更新，所以你现在可以执行依赖于DOM的操作。然而在大多数情况下，你应该避免在此期间更改状态，因为这可能会导致更新无限循环。该钩子在服务端渲染期间不被调用。

7、activated

keep-alive组件激活时调用。该钩子在服务器端渲染期间不被调用。

8、deactivated

keep-alive组件停用时调用。该钩子在服务端渲染期间不被调用。

9、beforeDestroy

实例销毁之间调用。在这一步，实例仍然完全可用。该钩子在服务端渲染期间不被调用。

10、destroyed

Vue实例销毁后调用。调用后，Vue实例指示的所有东西都会解绑定，所有的事件监听器会被移除，所有的子实例也会被销毁。

页面挂载后：

页面销毁后：

六、计算属性computed

在vue中一些数据经常依赖于别的数据做出改变，且改变的逻辑也较复杂，这个时候就需要用到计算属性computed。通俗来说就是当前数据不是确定的，要经常做出改变，而这个改变是其他数据改变导致的。

基本语法：

在HTML中使用{ { mydata } }来显示，注意：mydata不能在data中声明，否则会出错。

总价需要展示商品价钱和运费之和总价，当其中某个价钱发生变化时，总价会重新进行计算，如果商品价钱和运费均为发生变化，计算属性会读取缓存，不会执行，有效的减少了大量不必要的计算工作。

计算属性的特性：计算属性具有缓存，到所依赖的值未发生变化时，会优先读取缓存

七、事件侦听watch

Vue提供了一种更通用的方式来观察和响应Vue实例上的数据变动，监听属性：watch

1、普通监听

2、普通监听优化

第一种有一个缺点，就是当值第一次绑定的时候，不会执行监听函数，只有当值改变的时候才会执行，如果想在第一次绑定的时候执行此监听函数，需要设置immediate为true。

3、深度监听

当要监听对象或数组的时候需要添加deep:true属性。