Vue.js教程

Vue 读音类似于 view,作者尤雨溪。 Vue 是一套用于构建用户界面的渐进式框架,Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层,不仅易于上手,还便于与第三方库或既有项目整合。另一方面,当与现代化的工具链以及各种支持类库结合使用时,Vue 也完全能够为复杂的单页应用提供驱动。


第 1 章 Vue.js 基础

1.1 安装 Vue

1.1.1 版本说明

1.1.2 Devtools

1.1.3 直接用 <script> 引入

1.1.4 NPM 安装

1.1.5 CLI 安装

1.1.6 对不同构建版本的解释

1.1.7 开发版本安装

1.1.8 Bower 安装

1.2 Vue 简介

1.2.1 起步

1.2.2 声明式渲染

1.2.3 条件与循环

1.2.4 处理用户输入

1.2.5 组件化应用构建

1.3 Vue 实例

1.3.1 创建 Vue 实例

1.3.2 数据与方法

1.3.3 实例生命周期钩子

1.3.4 实例生命周期图示

1.4 模板语法

1.4.1 插值

1.4.2 指令

1.4.3 缩写

1.5 计算属性和侦听器

1.5.1 计算属性

1.5.2 侦听器

1.6 Class 与 Style 绑定

1.6.1 绑定 HTML Class

1.6.2 绑定内联样式

1.7 条件渲染

1.7.1 v-if

1.7.2 v-show

1.7.3 v-if vs v-show

1.8 列表渲染

1.8.1 数组的 v-for

1.8.2 对象的 v-for

1.8.3 v-for 使用 key

1.8.4 数组更新检测

1.8.5 对象更改检测

1.8.6 显示过滤/排序结果

1.8.7 一段取值范围的 v-for

1.8.8 v-for on a <template>

1.8.9 v-for with v-if

1.8.10 一个组件的 v-for

1.9 事件处理

1.9.1 监听事件

1.9.2 事件处理方法

1.9.3 内联在处理器中的方法

1.9.4 事件修饰符

1.9.5 按键修饰符

1.9.6 系统修饰键

1.9.7 为什么在 HTML 中监听事件?

1.10 表单输入绑定

1.10.1 基本用法

1.10.2 值绑定

1.10.3 修饰符

1.10.4 在组件上使用 v-model

1.11 组件

1.11.1 什么是组件

1.11.2 使用组件

1.11.3 Prop

1.11.4 非 Prop 特性

1.11.5 自定义事件

1.11.6 使用插槽分发内容

1.11.7 动态组件

1.11.8 杂项

第 2 章 Vue.js 过渡和动画

2.1 概述

2.2 进入/离开过渡

2.2.1 单元素/组件的过渡

2.2.2 初始渲染的过渡

2.2.3 多个元素的过渡

2.2.4 多个组件的过渡

2.2.5 列表过渡

2.2.6 可复用的过渡

2.2.7 动态过渡

2.3 状态过渡

2.3.1 状态动画与侦听器

2.3.2 动态状态过渡

2.3.3 把过渡放到组件里

2.3.4 给设计赋予生命

第 3 章 Vue.js 可复用性和组合

3.1 混入

3.1.1 基础

3.1.2 选项合并

3.1.3 全局混入

3.1.4 自定义选项合并策略

3.2 自定义指令

3.2.1 简介

3.2.2 钩子函数

3.2.3 钩子函数参数

3.2.4 函数简写

3.2.5 对象字面量

3.3 渲染函数和JSX

3.3.1 基础

3.3.2 节点、树以及虚拟 DOM

3.3.3 createElement 参数

3.3.4 使用 JavaScript 代替模板功能

3.3.5 JSX

3.3.6 函数式组件

3.3.7 模板编译

3.4 插件

3.4.1 开发插件

3.4.2 使用插件

3.5 过滤器

第 4 章 Vue.js 工具

4.1 生产环境部署

4.1.1 开启生产环境模式

4.1.2 模板预编译

4.1.3 提取组件的 CSS

4.1.4 跟踪运行时错误

4.2 单文件组件

4.2.1 介绍

4.2.2 起步

4.3 单元测试

4.3.1 配置和工具

4.3.2 简单的断言

4.3.3 编写可被测试的组件

4.3.4 断言异步更新

4.4 TypeScript 支持

4.4.1 发布为 NPM 包的官方声明文件

4.4.2 推荐配置

4.4.3 开发工具链

4.4.4 基本用法

4.4.5 基于类的 Vue 组件

4.4.6 增强类型以配合插件使用

4.4.7 标注返回值

第 5 章 Vue.js 规模化

5.1 路由

5.2 状态管理

5.2.1 类 Flux 状态管理的官方实现

5.2.2 简单状态管理起步使用

5.3 服务端渲染

第 6 章 Vue.js 响应式系统原理

6.1 如何追踪变化

6.2 检测变化的注意事项

6.3 声明响应式属性

6.4 异步更新队列

第 7 章 Vue.js API

7.1 全局配置

7.1.1 Vue.config.silent

7.1.2 Vue.config.optionMergeStrategies

7.1.3 Vue.config.devtools

7.1.4 Vue.config.errorHandler

7.1.5 Vue.config.warnHandler

7.1.6 Vue.config.ignoredElements

7.1.7 Vue.config.keyCodes

7.1.8 Vue.config.performance

7.1.9 Vue.config.productionTip

7.2 全局API

7.2.1 Vue.silent

7.2.2 Vue.nextTick

7.2.3 Vue.set

7.2.4 Vue.delete

7.2.5 Vue.directive

7.2.6 Vue.filter

7.2.7 Vue.component

7.2.8 Vue.use

7.2.9 Vue.mixin

7.2.10 Vue.compile

7.2.11 Vue.version

7.3 选项 / 数据

7.3.1 data

7.3.2 props

7.3.3 propsData

7.3.4 computed

7.3.5 methods

7.3.6 watch

7.4 选项 / DOM

7.4.1 el

7.4.2 template

7.4.3 render

7.4.4 renderError

7.5 选项 / 生命周期钩子

7.5.1 beforeCreate

7.5.2 created

7.5.3 beforeMount

7.5.4 mounted

7.5.5 beforeUpdate

7.5.6 updated

7.5.7 activated

7.5.8 deactivated

7.5.9 beforeDestroy

7.5.10 destroyed

7.5.11 destroyed

7.6 选项 / 资源

7.6.1 directives

7.6.2 filters

7.6.3 components

7.7 选项 / 组合

7.7.1 parent

7.7.2 mixins

7.7.3 extends

7.7.4 provide / inject

7.8 选项 / 其他

7.8.1 name

7.8.2 delimiters

7.8.3 functional

7.8.4 model

7.8.5 inheritAttrs

7.8.6 comments

7.9 实例属性

7.9.1 vm.$data

7.9.2 vm.$props

7.9.3 vm.$el

7.9.4 vm.$options

7.9.5 vm.$parent

7.9.6 vm.$root

7.9.7 vm.$children

7.9.8 vm.$slots

7.9.9 vm.$scopedSlots

7.9.10 vm.$refs

7.9.11 vm.$isServer

7.9.12 vm.$attrs

7.9.13 vm.$listeners

7.10 实例方法 / 数据

7.10.1 vm.$watch

7.10.2 vm.$set

7.10.3 vm.$delete

7.11 实例方法 / 事件

7.11.1 vm.$on

7.11.2 vm.$once

7.11.3 vm.$off

7.11.4 vm.$emit

7.12 实例方法 / 生命周期

7.12.1 vm.$mount

7.12.2 vm.$forceUpdate

7.12.3 vm.$forceUpdate

7.12.4 vm.$destroy

7.13 指令

7.13.1 v-text

7.13.2 v-html

7.13.3 v-show

7.13.4 v-if

7.13.5 v-else

7.13.6 v-else-if

7.13.7 v-for

7.13.8 v-on

7.13.9 v-bind

7.13.10 v-model

7.13.11 v-pre

7.13.12 v-cloak

7.13.13 v-once

7.14 特殊特性

7.14.1 key

7.14.2 ref

7.14.3 slot

7.14.4 slot-scope

7.14.5 is

7.15 内置组件

7.15.1 component

7.15.2 transition

7.15.3 transition-group

7.15.4 keep-alive

7.15.5 slot

第 8 章 Vue.js 服务器端渲染(SSR)

8.1 简介

8.1.1 什么是服务器端渲染(SSR)

8.1.2 为什么使用服务器端渲染(SSR)

8.1.3 服务器端渲染 vs 预渲染

8.1.4 关于此指南

8.2 基本用法

8.2.1 安装

8.2.2 渲染一个 Vue 实例

8.2.3 SSR与服务器集成

8.2.4 SSR使用页面模板

8.3 编写通用代码

8.4 源码结构

8.5 路由和代码分割

8.6 数据预取和状态

8.7 客户端混合

8.8 Bundle Renderer 简介

8.9 构建配置

8.10 CSS 管理

8.11 Head 管理

8.12 缓存

8.13 流式渲染

8.14 API参考

8.14.1 createRenderer

8.14.2 createBundleRenderer

8.14.3 Class: Renderer

8.14.4 Class: BundleRenderer

8.14.5 Renderer 选项

8.14.6 webpack 插件

第 9 章 Vue.js 服务器端渲染框架 Nuxt.js

9.1 简介

9.2 安装

9.3 目录结构

9.4 配置

9.5 路由

9.6 视图

9.7 异步数据

9.8 资源文件

9.9 插件

9.10 Vuex状态树

9.11 命令

9.12 开发工具

返回顶部 手机访问 关注微信 返回底部

扫码访问歪脖网

随时随地,想看就看

关注歪脖网微信

分享 web 知识、交流 web 经验