Vue课程大纲2.0.0版本

未分类

Vue全家桶：
- Vue语法从零到熟练
- vue-cli脚手架创建无痛的webpack配置目录结构
- vue-router单页应用的前端路由管理利器
- vuex集中式应用状态管理器

配套工具使用
- Npm 基本使用
- axios用作与后端进行通信

为什么选择Vue.js

Vue是一个构建数据驱动的Web界面的库，通过简单的API提供高效的数据绑定和灵活的组件系统。
Vue具有简洁、轻量、快速、 数据驱动、 组件化等特点，除此之外，Vue还具有上手快，简单易学，学完即用，快速开发的优势。
可把页面组件化、模块化，分工明确，互不干涉，低耦合的设计使组件可复用、可测试，更易于维护。
响应式编程，开发者只需要聚焦在状态的逻辑处理上，让框架来进行DOM操作，不需要自己手动更新视图
官方提供健全的周边工具，例如vue-cli创建项目目录和开发环境配置、vue-router前端路由创建单页应用、vuex集中式应用状态管理器。

通过本课程能够学到什么

通过本课程的学习可快速的熟练使用vue的基本语法，包括理解vue中核心的运行原理。
构建在项目中所需要的通用组件的封装，学会组件化、模块化的开发模式
掌握使用Vue-cli脚手架初始化Vue.js项目，了解webpack的打包过程和基本配置
掌握vue-router开发单页应用，使用axios与后端进行数据交互
了解项目的开发流程，并使用vuex管理整个应用的状态
最后通过实例，可体验前后端分离的开发方式，并能很受益的应用在自己的项目中

Vue语法从零到熟练

• Vue.js 是什么

  • 一套构建用户界面的渐进式框架
  • 增量开发的设计
  • 只关注视图层

• Vue的两大特点

  • 响应式数据绑定：数据的增删改查都是可被watch的，一旦变动自动更新视图
  • 可组合的视图组件：把页面拆成多组件，可达到封装、复用、可测试的目的

• 声明式渲染

  • 描述要什么样子，让框架帮你做
  • 声明模板语法将实例数据进行绑定
  • 模板语法-插值：采用“Mustache”语法{{表达式|实例数据}}
  • 把注意力全身心的投入到业务逻辑的数据处理上，而无需手动变动DOM的更新

• 指令

  • 自定义属性，写在标签上以v-为前缀的特殊属性
  • 预期的值为javascript表达式
  • 作用是将数据和DOM做关联，当表达式的值改变时，响应式地作用于DOM上

• 常用指令一览

  • v-bind：动态的绑定数据到DOM元素上，当数据发生变化，响应的更新DOM数据
  • v-once：只渲染元素和组件一次，随后数据更新，并不会重新更新DOM数据，可视为静态内容，将渲染结果缓存起来，用于优化更新性能
  • v-show：根据表达式之真假值，切换元素的 display CSS 属性
  • v-if：根据表达式的值的真假条件渲染元素。在切换时元素及它的数据绑定 / 组件被销毁并重建
  • v-if、v-else-if、v-else：多重条件选择渲染
  • v-for：基于源数据多次渲染元素或模板块；v-for默认行为试着不改变整体，而是替换元素。迫使其重新排序的元素，你需要提供一个 key 的特殊属性：
  • v-model：随表单控件类型不同而不同，在表单控件或者组件上创建双向绑定
  • v-cloak：以隐藏未编译的 Mustache 标签直到实例准备完毕
  • v-once：只渲染元素和组件一次，这可以用于优化更新性能
  • 自定义指令：除了核心功能默认内置的指令，也允许注册自定义指令

• 选项对象

  • 在启动整个应用实例化时传入的参数。通过这些选项来创建想要的行为
  • el（element）：提供一个在页面上已存在的 DOM 元素作为 Vue 实例的挂载目标

  • 数据类：

    • data（数据）：应用的数据，可被转为getter/setter，能够响应数据的变化
    • computed（计算属性）：将对data数据的逻辑抽离在计算属性中；这些属性依赖data的变化而相应；计算属性的结果会被缓存，多次使用不重新计算。
    • methods（方法）：存放应用中封装的方法，例如事假处理函数
    • watch（侦听属性）：当有一些数据需要随着其它数据变动而变动时，可通过watch侦听
    • computed VS methods VS watch watch：这三者在某些功能点是重复的，何时使用使用在什么样的场景。

  • 生命周期钩子函数

    • beforeCreate：实例初始化之后，数据观测之前调用
    • created：实例创建完成后被立即调用，数据观测，计算属性，方法定义都已完成，但还没开始挂载。
    • beforeMount：挂载开始之前被调用
    • mounted：挂载之后调用该钩子函数
    • beforeUpdate：数据更新时调用，可以在这个钩子中进一步地更改状态，这不会触发附加的重渲染过程
    • updated：数据更新之后调用该函数，当这个钩子被调用时，组件 DOM 已经更新
    • beforeDestroy：实例销毁之前调用
    • destroyed：实例销毁后调用，调用后实例中所有东西都会解除绑定，子实例也会被销毁

• 案例精选荟萃

  • 【实例】数据控制的选项卡切换
  • 【实例】自由展开收缩的好友列表
  • 【实例】简易的购物车
  • 【实例】单一修改文本框的值
  • 【实例】留言板

• 组件

  • 什么是组件：
    
    1. 封装可重用的代码；
    2. 组件是自定义元素，Vue.js 的编译器为它添加特殊功能；
    3. 用 is 特性进行了扩展的原生 HTML 元素
  • 组件的定义和使用：
    
    1. 全局组件；
    2. 局部组件；
    3. 单文件组件
  • 一个通用组件所具备的三个部分：
    
    1. Prop允许外部环境定制组件；
    2. custom event监听内部触发外部产生的副作用；
    3. slot插槽允许将外部环境的结构组合到组件中
  • 组件之间的通信
    
    1. 父->子 使用可定制的prop传递
    2. 子->父 自定义事件
  • slot插槽定制组件的结构
    
    1. 单个插槽
    2. 具名插槽
    3. 作用域插槽
  • 组件间的双向数据绑定
  • 动态组件
  • 异步组件
  • 递归组件

• 案例精选荟萃

  • 【实例】封装modal框通用组件
  • 【实例】封装通用的树形菜单组件

• 综合案例---任务管理系统（todolist的翻版）

学习目标：这一部分是学习Vue的基本语法，从概念、实例、组件、指令、选项，一直到模版渲染、事件绑定、计算属性等、组件交互，逐一讲解。虽然Vue官方的文档通俗易懂，但是给的实例并不是很多。在这一部分的学习中，通过一个个实例将学习到的语法融入在具体的场景之中，不但学会了语法的使用，并可以知道语法能够使用在哪些场景，进而理解的更加深刻，运用起来也会更加的得心应手。有实例的加持，从零到熟练语法将会是轻而易举的事。

vue-cli脚手架创建无痛webpack配置目录结构

• webpack的基础配置初探
  
  1. 启动应用开发模式
  2. resolve配置访问路径
  3. 打包项目
• 单文件组件的定义和使用
  
  1. 定义的命名约定
  2. import引入使用组件

学习目标：这个脚手架工具是官方推出的，只需要安装即可使用，无需对webpack进行多余的配置，它的目标也是解决webpack配置繁琐的问题，达到无痛的使用vue编写应用的目的。学习Vue-cli搭建的目录结构，并在此基础上创建自己的应用。

vue-router单页应用的前端路由管理利器

• 前端路由的作用
  
  1. 将组件映射在对应的路由，访问时渲染
  2. 做单页应用
• 路由配置使用前置准备
  
  1. 安装路由模块
  2. 配置路由参数
  3. 注入Vue根实例中
  4. router-view声明渲染的位置
• 嵌套路由：视图有多层组件嵌套，同样路由也有多层组件嵌套，格式为：/a/b/c
• 动态路由：把匹配到的路径都映射到同一个组件，其中不同路径可以设置为动态路径访问，可通过路由信息对象$route拿到动态参数pramas
• 命名路由：通过name标识一个路由
• HTML5 History 模式
• 重定向 和 别名
• 导航钩子函数
• 代码分隔懒加载
• 编程式导航

• 常用API：

  1. router-link：创建一个链接
  2. router-view：声明组件渲染的位置
  3. mode：访问模式，默认为：“hash”模式，可改为“history”
  4. base：路由的基本路径，上线到服务端常用

• 案例精选荟萃

  • 【实例】mock数据网站

学习目标：vue-router是管理路径映射组件的前端路由模块，简单的快速创建单页应用。学习如果配置路径和组件的映射关系，处理各个页面不同的访问权限。

vuex集中式应用状态管理器

• vuex采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化
• 什么时候需要用到vuex
  
  1. 当多个视图依赖于同一状态
  2. 来自不同视图的行为需要变更同一状态
• store（仓库）：上就是一个容器，它包含着你的应用中大部分的状态；状态存储是响应式的；不能直接改变 store 中的状态；
• state（状态）：定义应用的单一状态树，用一个对象就包含了全部的应用层级状态
• getter（派分的状态）：抽离操作状态的逻辑，可被多组件使用
• mutation（修改状态的唯一途径）：要使改变状态可被记录，必须要commit一个mutation；mutation必须是同步更新状态。

• action（异步操作）：异步操作产生结果；Action 提交的是 mutation，而不是直接变更状态。

• 案例精选荟萃

  • 【实例】计数器

学习目标：当跨多层组件需要传递数据时候，自然而然的就会使用vuex来解决这样的事情，变得异常简单。而学习vuex本身也有一定的复杂度，最主要的是刚上手书写可能不习惯，等写多了就会发现设计的精妙之处。通过例子的学习，学会抽象的mutations，actions这些概念的运用。

axios用作与后端进行通信

• Axios 是一个基于 promise 的 HTTP 库，可以用在浏览器和 node.js 中。
• 支持 Promise API
• 拦截请求和响应
• 转换请求数据和响应数据
• 自动转换 JSON 数据
• 常用API：
  
  • axios(config)：可以通过向 axios 传递相关配置来创建请求
  • axios.get(url[, config])
  • axios.post(url[, data[, config]])

Npm 基本使用

• 切换镜像, 国内的网络访问 npm 服务器可能比较慢, 切换到国内的镜像会更快
• 安装卸载, 使用 npm 快速安装和卸载项目依赖, 同时也可以把项目依赖声明在 package.json 文件里
• 运行命令, 在 package.json 的 script 字段里面, 你可以声明一些和项目相关的自定义命令,这样可以快速对项目进行一些相应的操作

【实战】待定