Vue基础入门

本思维导图梳理了Vue基础入门的知识，共九个章节。分别从开发基础、开发环境、服务器渲染等多个方面进行了整理，帮助学习者使用。

Vue基础入门

• 第1章 Vue基础入门
  • 初识Vue
    • 前端技术的发展
    • 什么是Vue
      • Vue（读音/Vjuː/，类似于View）是一套用于构建用户界面的渐进式框架
    • Vue的优势
      • 轻量级：Vue简单、直接，所以Vue使用起来更加友好
      • 数据绑定：数据驱动视图，视图也可以驱动数据
      • 指令：指令绑定在元素上时，指令会给绑定的元素添加一些特殊的行为
      • 插件：插件用于对Vue框架功能进行扩展
  • Vue开发环境
    • Visual Studio Code编辑器
    • Vue的下载和引入
    • git-bash命令行工具
    • Node.js环境
    • npm包管理工具
    • Chrome浏览器和vue-devtools扩展
    • Hello World案例
  • webpack打包工具
    • 安装webpack
    • webpack简单使用
    • 构建Vue项目
• 第2章 Vue开发基础（上）
  • Vue实例
    • 创建Vue实例
      • 通过new关键字实例化Vue({})构造函数。
    • el唯一根标签
      • 在创建Vue实例时，el表示唯一根标签，class或id选择器可用来将页面结构与Vue实例对象vm中的el绑定。
    • data初始数据
      • Vue实例的数据对象为data，Vue会将data的属性转换为getter、setter，从而让data的属性能够响应数据变化。
    • methods定义方法
      • methods属性用来定义方法，通过Vue实例可以直接访问这些方法
      • 在定义的方法中，this指向Vue实例本身
      • 定义在methods属性中的方法可以作为页面中的事件处理函数使用
      • 当事件触发后，执行相应的事件处理函数
    • computed计算属性
      • 计算属性结果会被缓存起来，当依赖的响应式属性发生变化时，才会重新计算，返回最终结果。
    • watch状态监听
      • 用来监测Vue实例中的数据变动。
    • filters过滤器
      • 对数据进行格式化。
  • Vue数据绑定
    • 绑定样式
    • 内置指令
      • v-model 双向数据绑定
      • v-on 监听事件
      • v-bind 单向数据绑定
      • v-text 插入文本内容
      • v-html 插入包含HTML的内容
      • v-for 列表渲染
      • v-if 条件渲染
      • v-show 显示隐藏
    • 学生列表案例
  • Vue事件
    • 事件监听
      • 在Vue中可以使用内置指令v-on监听DOM事件，并在触发时运行一些JavaScript代码，或绑定事件处理方法。
    • 事件修饰符
      • .stop 阻止事件冒泡
      • .prevent 阻止默认事件行为
      • .capture 事件捕获
      • .self 将事件绑定到自身，只有自身才能触发
      • .once 事件只触发一次
  • Vue组件
    • 什么是组件
      • 在Vue中，组件是构成页面中独立结构单元，组件主要以页面结构形式存在，不同组件也具有基本交互功能。
    • 局部注册组件
      • Vue.component()方法用于全局注册组件，除了全局注册组件外，还可以局部注册组件，通过Vue实例的components属性来实现。
    • template模板
      • Vue提供了<template>标签来定义结构的模板，可以在该标签中书写HTML代码，然后通过id值绑定到组件内的template属性上，这样就有利于在编辑器中显示代码提示和高亮显示，不仅改善了开发体验，也提高了开发效率。
    • 组件之间数据传递
      • 组件之间的依赖关系：组件之间的数据传递需要借助一些工具（如props属性）来实现父组件向子组件传递数据信息。
    • 组件切换
      • v-if与v-else ： Vue中的页面结构是由组件构成的，不同组件可以表示不同页面，适合进行单页应用开发。
  • Vue生命周期
    • 钩子函数
      • beforeCreate 创建实例对象之前执行
      • created 创建实例对象之后执行
      • beforeMount 页面挂载成功之前执行
      • mounted 页面挂载成功之后执行
      • beforeUpdate 组件更新之前执行
    • 实例创建
    • 页面挂载
    • 数据更新
    • 实例销毁
• 第3章 Vue开发基础（下）
  • 全局API
    • Vue.directive
      • 用来注册自定义指令，为DOM元素添加新的特性。
    • Vue.use
      • Vue.use主要用于在Vue中安装插件，通过插件可以为Vue添加全局功能。
    • Vue.extend
      • Vue.extend用于基于Vue构造器创建一个Vue子类，可以对Vue构造器进行扩展
    • Vue.set
      • Vue的核心具有一套响应式系统，简单来说就是通过监听器监听数据层的数据变化，当数据改变后，通知视图也自动更新。
    • Vue.mixin
      • Vue.mixin用于全局注册一个混入，它将影响之后创建的每个Vue实例。
  • 实例属性
    • vm.$props
      • 使用vm.$props属性可以接收上级组件向下传递的数据。
    • vm.$options
      • Vue实例初始化时，除了传入指定的选项外，还可以传入自定义选项。
    • vm.$el
      • vm.$el用来访问vm实例使用的根DOM元素。
    • vm.$children
      • vm.$el用来访问vm实例使用的根DOM元素
    • vm.$root
      • vm.$root用来获取当前组件树的根Vue实例，如果当前实例没有父实例，则获取到的是该实例本身。
    • vm.$slots
      • 用于获取插槽（Slots），插槽就是父组件向子组件传递内容。
    • vm.$attrs
      • vm.$attrs可以获取组件的属性，但其获取的属性中不包含class、style以及被声明为props的属性。
  • 全局配置
    • productionTip
      • 打开或关闭生产信息提示信息，默认为打开状态。
    • silent
      • silent可以取消Vue日志和警告，silent默认值为false，开启警告功能。
    • devtools
      • 表示打开或关闭vue-devtools调试工具，默认值为true，表示vue-devtools工具可用。
  • 组件进阶
    • mixins
      • mixins是一种分发Vue组件中可复用功能的方式。mixins是一种分发Vue组件中可复用功能的方式。
    • render
      • 在Vue中可以使用Vue.render()实现对虚拟DOM的操作。
    • createElement
      • createElement()函数返回的并不是一个实际的DOM元素，它返回的其实是一个描述节点（createNodeDescription）。
• 第4章 Vue过渡和动画
  • 过渡和动画基础
    • 什么是过渡和动画
      • 过渡，简而言之，就是从一个状态向另外一个状态插入值，新的状态替换了旧的状态。
    • transition组件
      • Vue为<transition>标签内部的元素提供了3个进入过渡的类和3个离开过渡的类
    • 自定义类名
      • 自定义类名的优先级高于普通类名，所以能够很好地与其他第三方CSS库结合使用。
    • 使用@keyframes创建CSS动画
      • @keyframes规则创建动画，就是将一套CSS样式逐步演变成另一套样式，在创建动画过程中，可以多次改变CSS样式，通过百分比或关键词from和to（等价于0%和100%）来规定动画的状态。
    • 钩子函数实现动画
      • 在<transition>标签中定义了一些动画钩子函数，用来实现动画。钩子函数可以结合CSS过渡（transitions）、动画（animations）使用，还可以单独使用。
    • Vue结合Velocity.js实现动画
  • 多个元素过渡
    • 不同标签名元素过渡
      • 不相同标签名元素可以使用v-if和v-else来进行过渡，下面通过案例演示不同标签名元素的过渡。
    • 相同标签名元素过渡
      • 当有相同标签名的元素切换时，需要通过key特性设置唯一值来标记，从而让Vue区分它们，因为Vue为了效率只会替换相同标签中的内容。下面通过案例演示当有相同标签名button时，使用v-if和v-else设置key值来实现切换。
    • 过渡模式
      • 渡模式的原理是，设置有序的过渡而不是同时发生过渡。在transition中加入mode属性，它的两个值如下所示。
  • 多个组件过渡
    • 什么是多个组件过渡
      • 多个组件之间的过渡，只需要使用动态组件即可，动态组件需要通过Vue中的<component>元素绑定is属性来实现多组件的过渡。接下来通过案例演示如何实现多个组件的过渡。
    • 案例演示
  • 列表过渡
    • 什么是列表过渡
      • 列表的每一项都需要进行过渡，列表在循环时要给每一个列表项添加唯一的key属性值，这样列表才会有过渡效果。在进行列表过渡时，过渡模式不可用，因为不再互相切换特有的元素。
    • 列表的进入和离开过渡
      • 在浏览器中打开，查看页面效果。单击“随机插入一个数字”，单击“随机移除一个数字”按钮。
    • 列表的排序过渡
      • 为了实现列表平滑过渡，可以借助v-move特性。v-move 对于设置过渡的切换时机和过渡曲线非常有用。
    • 列表的交错过渡
      • 在Vue中可以实现列表的交错过渡效果，它是通过data属性与JavaScript通信来实现的。
    • 可复用的过渡
      • 在Vue中，过渡代码可以通过组件实现复用。若要创建一个可复用的过渡组件，需要将transition或者transition-group作为组件模板结构，然后在其内部通过插槽的方式编写列表结构即可。
• 第5章 Vue路由
  • 初识路由
    • 什么是后端路由
      • 后端路由是由服务器端进行实现，并完成资源的分发（url与资源/数据的对应关系）
    • 什么是前端路由
      • 前端路由就是把不同路由对应不同的内容或页面的任务交给前端来做。
  • vue-router
    • vue-router工作原理
      • 路由的hash模式是利用了window可以监听onhashchange事件来实现的
    • vue-router基本使用
      • vue-router可以实现当用户单击页面中的A按钮时，页面显示内容A；单击B按钮时，页面显示内容B。
    • 路由对象属性
      • this.$router表示全局路由器对象，项目中通过router路由参数注入路由之后，在任何一个页面都可以通过此属性获取到路由器对象，并调用其push()、go()等方法。
  • 用户登录注册案例
    • 案例分析
    • 准备工作
    • 代码实现
  • 动态路由
    • 什么是动态路由
      • 动态路由在来回切换时，由于它们都是指向同一组件，Vue不会销毁再重新创建这个组件，而是复用这个组件。
    • query方式传参
      • 通过query方式传递参数，使用path属性给定对应的跳转路径（类似于GET请求），在页面跳转的时候，可以在地址栏看到请求参数。
    • params方式传参
      • 使用params方式则不需要通过查询字符串传参，通常会搭配路由的history模式，将参数放在路径中或隐藏。
  • 嵌套路由
    • 什么是嵌套路由
      • 嵌套子路由的关键属性是children，children也是一组路由，相当于前面讲到的routes，children可以像routes一样的去配置路由数组。
    • 嵌套路由案例
  • 命名路由
    • 什么是命名路由
      • vue-router提供了一种隐式的引用路径，即命名路由，可以在创建Router实例的时候，在 routes 中给某个路由设置名称name值。
    • 命名路由案例
  • 命名视图
    • 什么是命名视图
      • 在开发中，有时候想同时展示多个同级视图，而不是嵌套展示，则可以在页面中定义多个单独命名的视图。
    • 命名视图案例
  • 编程式导航
    • router.push()
    • router.replace()
    • router.go()
• 第6章 Vuex状态管理
  • 初识Vuex
    • 什么是Vuex
      • Vuex是Vue团队提供的一套组件状态管理维护的解决方案。可以方便的实现组件之间的数据共享。
    • Vuex的下载和安装
    • 【案例】计数器
    • Vuex状态管理模式
      • 在Vue中，组件的状态变化是通过Vue单向数据流的设计理念实现的。
  • Vuex配置选项
    • actions
      • actions简单使用：dispatch()方法完成状态分发
    • mutations
      • mutations选项中的事件处理方法接收state对象作为参数，即初始数据，使用时只需要在store实例配置对象中定义state即可。
    • getters
      • getters计算属性：store实例允许在store中定义getters计算属性，类似于Vue实例的computed。
    • modules
      • modules用来在store实例中定义模块对象。
  • Vuex中的API
    • 模块注册
      • store实例对象提供了动态创建模块的接口
    • 状态替换
      • store.replaceState()：可以通过store.replaceState()方法实现状态替换。
  • 【案例】购物车
    • 案例分析
    • 代码实现
• 第7章 Vue开发环境
  • Vue CLI脚手架工具
    • 安装前注意事项
    • 全局安装@vue/cli
    • 使用vue create命令创建项目
    • GUI创建项目
  • 插件
    • CLI插件
      • 在Vue CLI中使用了一套基于插件的架构，将部分核心功能插件添加到脚手架Vue CLI中，为开发者暴露可拓展的API以供开发者对Vue CLI的功能进行灵活的使用。
    • 安装插件
  • CLI服务和配置文件
    • CLI服务
      • 在Vue项目中需要使用npm run serve指令来启动项目，其中的serve的内容指的就是vue-cli-service（CLI服务）命令，项目的启动需要借助于vue-cli-service来完成。
    • 配置文件
      • 使用Vue CLI脚手架创建的Vue项目一般都是SPA单页面应用，但是在一些特殊的场景下，需要构建多页面应用。
    • 配置多页应用
  • 环境变量和模式
    • 环境变量
      • Vue CLI 3构建的项目目录中，移除了config和build这两个配置文件，并在项目根目录中定义了4个文件，用来配置环境变量，
    • 模式
      • development：用于vue-cli-service serve，即开发环境使用
      • production：用于vue-cli-service build和vue-cli-service test:e2e，即正式环境使用
      • test：用于vue-cli-service test:unit使用
  • 静态资源管理
    • 使用相对路径引入静态资源
    • public目录引入静态资源
• 第8章 服务器端渲染
  • 初识服务器端渲染
    • 客户端渲染与服务器端渲染的区别
    • 服务器端渲染的注意事项
      • 版本要求
      • 路由模式
  • 服务器端渲染的简单实现
    • 创建vue-ssr项目
      • 服务端渲染的实现，通常有3种方式，第1种是手动进行项目的简单搭建，第2种是使用Vue CLI 3脚手架进行搭建，第3种是利用一些成熟框架来搭建（如Nuxt.js）
    • 渲染vue实例
      • 将vue-server-renderer安装完成后，创建服务器脚本文件test.js，实现将Vue实例的渲染结果输出到控制台中，
    • Express搭建SSR
      • Express是一个基于Node.js平台的Web应用开发框架，用来快速开发Web应用
    • Koa搭建SSR
      • Koa是一个基于Node.js平台的Web开发框架，致力于成为Web应用和API开发领域更富有表现力的技术框架。
  • webpack搭建服务器端渲染
    • 基本流程
    • 项目搭建
      • 创建项目
      • 配置vue.config.js
      • 编写项目代码
      • 生成vue-ssr-server-bundle.json
      • 生成vue-ssr-server-bundle.json
  • Nuxt.js服务器端渲染框架
    • 创建Nuxt.js项目
    • 页面和路由
    • 页面跳转
• 第9章 “微商城”项目
  • 开发前准备
    • 项目展示
      • 本项目是一个类似淘宝、京东的电商类移动端网站。
    • 技术方案
      • 一个完整的项目分为前端和后端两部分，本书在配套源代码中提供了已经开发完成的前后端项目，后端项目用于提供API进行数据交互。
    • 项目开发流程
      • 一个项目或者产品从开始到上线都要遵循开发流程，这样有利于团队间的协作，能够按部就班地完成。
  • 项目搭建
    • 创建项目
    • 配置路由
    • 配置Vuex
    • 配置axios
    • 目录结构
  • 商城首页
    • 页面结构
    • 顶部标题栏
    • 轮播图
    • 九宫格展示区域
    • 底部导航栏
  • 新闻资讯
    • 新闻资讯列表
    • 新闻详情
  • 图片分享
    • 图片列表
    • 图片详情
  • 商品购买
    • 商品详情页
    • 购物车
  • 分类列表
    • 页面结构搭建
      • 分类列表结构由左侧菜单栏和右侧菜单栏两部分组成，
    • better-scroll的运用
      • better-scroll是基于原生的JavaScript实现的，不依赖任何框架，是一款重点解决移动端各种滚动场景需求的插件（也支持PC端）。