Vue2.0课程大纲

2017课程大纲

Vue.js介绍

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

Vue语法从零到熟练

• 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. 作用域插槽
  • 组件间的双向数据绑定
  • 多种组件：动态组件、异步组件、递归组件

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

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

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

• 前端路由的作用
  
  1. 将组件映射在对应的路由，访问时渲染
  2. 做单页应用
• 路由配置使用前置准备
  
  1. 安装路由模块
  2. 配置路由参数
  3. 注入Vue根实例中
  4. router-view声明渲染的位置
• 嵌套路由：视图有多层组件嵌套，同样路由也有多层组件嵌套，格式为：/a/b/c
• 动态路由：把匹配到的路径都映射到同一个组件，其中不同路径可以设置为动态路径访问，可通过路由信息对象$route拿到动态参数pramas
• 命名路由：通过name标识一个路由
• HTML5 History 模式
• 重定向 和 别名
• 导航守卫
  
  • 全局守卫
    
    • router.beforeEach()：前置守卫，进入任意一个组件都要执行
    • router.afterEach():后置守卫，进入组件后执行
  • 路由对象守卫
    
    • beforeEnter:写在路由对象中，进入前组件执行
  • 组件内守卫
    
    • beforeRouteEnter：进入组件前执行，此时组件实例未创建
    • beforeRouteUpdate：当前路由改变，但是该组件被复用时调用
    • beforeRouteLeave ：导航离开该组件的对应路由时调用
• 代码分隔懒加载：结合 Vue 的异步组件和 Webpack 的代码分割功能，轻松实现路由组件的懒加载
• 编程式导航
  
  • router.push()向history stack中添加记录
  • router.replace()替换当前history stack中的记录
  • router.go()指定前进后退的记录数
• 常用API：
  
  1. router-link：创建一个链接
  2. router-view：声明组件渲染的位置
  3. mode：访问模式，默认为：“hash”模式，可改为“history”
  4. base：路由的基本路径，上线到服务端常用

vuex集中式应用状态管理器

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

axios用作与后端进行通信

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