Vue（读音/Vjuː/，类似于View）是一套用于构建用户界面的渐进式框架，与其他大型框架相比，Vue被设计为可以自底向上逐层应用。其他大型框架往往一开始就对项目的技术方案进行强制性的要求，而Vue更加灵活，开发者既可以选择使用Vue来开发一个全新项目，也可以将Vue引入到一个现有的项目中。

轻量级: Vue相对简单、直接，所以Vue使用起来更加友好。 数据绑定: Vue是一个MVVM框架，即数据双向绑定。 指令: 指令主要包括内置指令和自定义指令，以“v-”开头，作用于HTML元素。 插件: 插件用于对Vue框架功能进行扩展，通过MyPlugin.install完成插件的编写，简单配置后就可以全局使用。

1）. 打开git-bash命令行工具 2）. 安装Node环境 3）. 打开解压好的vue-devtools-5.1.1文件，执行命令如下 npm install npm run build 4）. 打开Chrome浏览器，添加vue-devtools调试工具 5）. 安装脚手架工具： npm install [email protected] –g 6）. 安装webpack打包工具： npm install [email protected] –g 7）. 构建项目：vue init webpack app

Ω

在Vue项目中，每个Vue应用都是通过Vue构造器创建新的Vue实例开始的。 通过new关键字的方式创建vm实例对象。 创建方式：

其中，配置选项的主要内容及含义： 1）. data：Vue实例数据对象 2）. methods：定义Vue实例中方法 3）. components：定义子组件 4）. computed：计算属性 5）. filters: 过滤器 6）. el: 唯一根元素 7）. watch: 监听数据变化

1）. 在Vue中，组件是构成页面中独立结构单元，能够减少重复代码的编写 2）. 提高开发效率，降低代码之间的耦合程度，使项目更易维护和管理 3）. 组件主要以页面结构形式存在，不同组件也具有基本交互功能，根据业务逻辑实现复杂的项目功能

1）. v-model：双向数据绑定 2）. v-on：监听事件 3）. v-bind：单向数据绑定 4）. v-text：插入文本内容 5）. v-html：插入包含HTML的内容 6）. v-for：列表渲染 7）. v-if：条件渲染 8）. v-show：显示隐藏

编写页面结构：

编写JavaScript代码：

编写JavaScript代码：

Ω

Vue.use主要用于在Vue中安装插件，通过插件可以为Vue添加全局功能。插件可以是一个对象或函数，如果是对象，必须提供install()方法，用来安装插件；如果插件是一个函数，则该函数将被当成install()方法。

1）. Vue.directive():Vue中有很多内置指令，如v-model、v-for和v-bind等 2）. Vue.use():Vue.use主要用于在Vue中安装插件，通过插件可以为Vue添加全局功能 3）. Vue.extend():Vue.extend用于基于Vue构造器创建一个Vue子类，可以对Vue构造器进行扩展 4）. Vue.set():Vue的核心具有一套响应式系统，简单来说就是通过监听器监听数据层的数据变化，当数据改变后，通知视图也自动更新 5）. Vue.mixin():Vue.mixin用于全局注册一个混入，它将影响之后创建的每个Vue实例

1）. vm. p r o p s : 使 用 v m . props: 使用vm. props:使用vm.props属性可以接收上级组件向下传递的数据 2）. vm. o p t i o n s : V u e 实 例 初 始 化 时 ， 除 了 传 入 指 定 的 选 项 外 ， 还 可 以 传 入 自 定 义 选 项 3 ） . v m . options: Vue实例初始化时，除了传入指定的选项外，还可以传入自定义选项 3）. vm. options:Vue实例初始化时，除了传入指定的选项外，还可以传入自定义选项3）.vm.el: vm. e l 用 来 访 问 v m 实 例 使 用 的 根 D O M 元 素 4 ） . v m . el用来访问vm实例使用的根DOM元素 4）. vm. el用来访问vm实例使用的根DOM元素4）.vm.children: vm. c h i l d r e n 用 来 获 取 当 前 实 例 的 直 接 子 组 件 5 ） . v m . children用来获取当前实例的直接子组件 5）. vm. children用来获取当前实例的直接子组件5）.vm.root: vm. r o o t 用 来 获 取 当 前 组 件 树 的 根 V u e 实 例 ， 如 果 当 前 实 例 没 有 父 实 例 ， 则 获 取 到 的 是 该 实 例 本 身 6 ） . v m . root用来获取当前组件树的根Vue实例，如果当前实例没有父实例，则获取到的是该实例本身 6）. vm. root用来获取当前组件树的根Vue实例，如果当前实例没有父实例，则获取到的是该实例本身6）.vm.slots:插槽就是定义在组件内部的template模板，可以通过 s l o t s 动 态 获 取 7 ） . v m . slots动态获取 7）. vm. slots动态获取7）.vm.attrs: vm.$attrs可以获取组件的属性，但其获取的属性中不包含class、style以及被声明为props的属性

编写页面结构：

编写JavaScript代码：

编写JavaScript代码：

Ω

入场钩子分别是beforeEnter（入场前）、enter（入场）、afterEnter（入场后）和enterCancelled（取消入场） 出场钩子分别是beforeLeave（出场前）、leave（出场）、afterLeave（出场后）和leaveCancelled（取消出场） // Vue会跳过CSS的检测

进入（enter）： v-enter: 在元素被插入之前生效，在元素被插入之后的下一帧移除 v-enter-active: 在整个进入过渡的阶段中应用，在元素被插入之前生效，在过渡动画完成之后移除 v-enter-to: 在元素被插入之后下一帧生效（与此同时v-enter被移除），在过渡动画完成之后移除 离开（leave）： v-leave：在离开过渡被触发时立刻生效，下一帧被移除 v-leave-active：在整个离开过渡的阶段中应用，在离开过渡被触发时立刻生效，在过渡完成之后移除 v-leave-to：在离开过渡被触发之后下一帧生效（与此同时v-leave被移除），在过渡动画完成之后移除

enter-class enter-active-class enter-to-class leave-class leave-active-class leave-to-class 注意：自定义类名的优先级高于普通类名

css代码如下:

js代码如下：

2. html代码如下：

js代码如下：

根据不同的url哈希值，在路由视图中显示不同的页面，实现非跳转式的页面切换 在单页面应用中更新视图可以不用重新请求页面 用户体验好，不需要每次都从服务器全部获取，快速展现给用户

路由对象表示当前激活的路由的状态信息，包含了当前URL解析得到的信息，还有URL匹配到的路由记录，this. r o u t e r 表 示 全 局 路 由 器 对 象 ， t h i s . router表示全局路由器对象，this. router表示全局路由器对象，this.route表示当前正在用于跳转的路由器对象，$route的常用属性信息如下： $route.path：对应当前路由地址 $route.query：一个{key:value}对象，表示 URL查询参数 $route.params：一个{key:value}对象，路由转跳携带参数 $route.hash：在history模式下获取当前路由的hash值（带#），如果没有hash值，则为空字符串 $route.fullPath：完成解析后的URL，包含查询参数和hash的完整路径 $route.name：当前路由的名称 $route.matched：路由记录，当前路由下路由声明的所有信息，从父路由（如果有）到当前路由为止 $route.redirectedFrom：如果存在重定向，即为重定向来源的路由

题目：请使用Vue路由相关知识动手实现Tab栏切换案例。在这里提供了2种方式来实现，分别是单页面构建和手动搭建webpack+vue项目。

css示例代码如下：

js代码如下：

webpack+vue，项目搭建准备工作参考本章第5.3小节，项目源代码见本章配套资源课后习题第5章源代码中Tab文件。

编写components/Message.vue页面，示例代码如下

编写逻辑入口main.js文件，示例代码如下：

编写router.js文件，配置路由，示例代码如下：

编写App.vue文件，渲染路由组件，示例代码如下：

编写待发货、待付款、待收货页面，文件路径components/sub目录下，以待发货页面为例，示例代码如下：

Ω

Vuex是Vue团队提供的一套组件状态管理维护的解决方案。Vuex作为Vue插件来使用，进一步完善了Vue基础代码功能，使Vue组件状态更加容易维护，为大型项目开发提供了强大的技术支持。

1）. actions：用来定义事件处理方法，用于处理state数据 2）. mutations：选项中的事件处理方法接收state对象作为参数，即初始数据 3）. getters：store实例允许在store中定义getters计算属性，类似于Vue实例的computed 4）. modules：modules用来在store实例中定义模块对象 5）. plugins：Vuex中的插件配置选项为plugins，插件本身为函数 6）. devtools：store实例配置中的devtools选项用来设置是否在devtools调试工具中启用Vuex，默认值为true，表示在启用，设为false表示停止使用

actions选项用来定义事件处理方法，用于处理state数据。actions类似于mutations，不同之处在于actions是异步执行的，事件处理函数可以接收{commit}对象，完成mutation提交，从而方便devtools调试工具跟踪状态的state变化。 在使用时，需要在store仓库中注册actions选项，在里面定义事件处理方法。事件处理方法接收context作为第1个参数，payload作为第2个参数（根据需要进行选择）。