目錄

• 課時(shí)01??

  • 安裝
  • 渲染——聲明式
  • 文本插值
  • 元素屬性
    • 條件指令
    • 循環(huán)指令
    • 事件監(jiān)聽(tīng)
    • 雙向綁定
  • 組件應(yīng)用
    • 定義
    • 使用
    • 渲染

• 課時(shí)02??

  • 實(shí)例
  • 選項(xiàng)對(duì)象
    • 數(shù)據(jù)對(duì)象
      • 創(chuàng)建
      • 注入
      • 修改
      • 凍結(jié)
    • 屬性暴露
  • 生命周期
    • 過(guò)程
    • 鉤子
      • 創(chuàng)建階段
      • 觸發(fā)階段
      • 更新階段
      • 銷毀階段
      • 箭頭函數(shù)
    • 圖示
  • 拓展閱讀
    • 組件系統(tǒng)

• 課時(shí)03??

  • 模板語(yǔ)法
    • 文本插值
    • 屬性綁定
      • 一次指令
      • 原始插值
      • 指令參數(shù)
      • 指令修飾
      • 指令縮寫
    • 用表達(dá)式
  • 擴(kuò)展閱讀
    • 渲染函數(shù)
    • JSX語(yǔ)法

• 課時(shí)04??

  • 模板語(yǔ)法
    • 屬性計(jì)算
      • 例子
      • Computed與methord PK
      • Computed與watch PK
      • Computed的setter
      • watch

• 課時(shí)05??

  • 模板語(yǔ)法
    • 樣式綁定
      • Class的綁定
        • 對(duì)象語(yǔ)法--內(nèi)聯(lián)定義在模板里
        • 對(duì)象語(yǔ)法--寫在數(shù)據(jù)屬性里
        • 對(duì)象語(yǔ)法--寫在計(jì)算屬性里
        • 數(shù)組語(yǔ)法--內(nèi)聯(lián)定義在模板里
        • 三元表達(dá)--內(nèi)聯(lián)定義在模板里
      • Style的綁定
        • 對(duì)象語(yǔ)法--內(nèi)聯(lián)定義在模板里
        • 對(duì)象語(yǔ)法--寫在數(shù)據(jù)屬性里
          - 對(duì)象語(yǔ)法--寫在計(jì)算屬性里
        • 數(shù)組語(yǔ)法--寫在數(shù)據(jù)屬性里
        • 自動(dòng)前綴

• 課時(shí)06??

  • 模板語(yǔ)法
    • 條件渲染
      • v-if
      • v-else
      • v-else-if
      • v-show
      • 在 <template> 元素上使用 v-if 條件渲染分組
      • 用 key 管理可復(fù)用的元素（每次切換時(shí)读存，輸入框都將被重新渲染）
      • 不用 key 管理可復(fù)用的元素（每次切換時(shí)，不會(huì)清除用戶已經(jīng)輸入的內(nèi)容）

• 課時(shí)07??

  • 模板語(yǔ)法
    • 列表渲染
      • 數(shù)組 v-for="item in items"
      • 數(shù)組 v-for="(item, index) in items"
      • 對(duì)象 v-for="value in object"
      • 對(duì)象 v-for="(value, key) in object"
      • 對(duì)象 v-for="(value, key, index) in object
      • 數(shù)組更新檢測(cè)
      • 數(shù)組替換--filter|concat|slice
      • 數(shù)組更新其他
      • 對(duì)象更新檢測(cè)
      • 顯示一個(gè)數(shù)組的過(guò)濾或排序副本--使用屬性計(jì)算
      • 顯示一個(gè)數(shù)組的過(guò)濾或排序副本--使用方法
      • 一段取值范圍的 v-for
      • 在<template>上使用 v-for
      • v-for with v-if 想為僅有的一些項(xiàng)渲染節(jié)點(diǎn)時(shí)
      • v-for with v-if 想有條件地跳過(guò)循環(huán)的執(zhí)行

• 課時(shí)08??

  • 模板語(yǔ)法
    • 事件處理
      • 事件監(jiān)聽(tīng)
        • 于模板中
        • 于方法中
      • 事處理器
        • 于模板中(短時(shí)推薦)
        • 于方法中(長(zhǎng)時(shí)推薦)
      • 事修飾符
        • 鼠標(biāo)
        • 鍵盤
        • 系統(tǒng)ctrl VS alt VS shift VS meta

• 課時(shí)09??

  • 模板語(yǔ)法
    • 表單輸入
      • 雙向綁定
      • 單行文本
      • 多行文本
      • 單復(fù)選框
      • 多復(fù)選框
      • 單選按鈕
      • 單選擇框
      • 多選擇框
      • 用 v-for 渲染的動(dòng)態(tài)選項(xiàng)
      • 值的綁定
        • 復(fù)選框
        • 單選按鈕
        • 選擇框
      • 修飾符lazy-使用 change 事件進(jìn)行同步
      • 修飾符number-自動(dòng)將用戶的輸入值轉(zhuǎn)為數(shù)值類型
      • 修飾符trim-自動(dòng)過(guò)濾用戶輸入的首尾空白字符

• 課時(shí)11??

  • 模板語(yǔ)法
    • 組件
      • 概念
      • 注冊(cè)
        • 全局注冊(cè)
        • 局部注冊(cè)
        • 寫在哪里
        • 數(shù)據(jù)對(duì)象
        • 傳遞數(shù)據(jù)
        • 屬性命名
        • 動(dòng)態(tài)綁定
        • 字面量語(yǔ)法 vs 動(dòng)態(tài)語(yǔ)法
        • 單向數(shù)據(jù)
        • 數(shù)據(jù)驗(yàn)證
        • 直接傳入
        • 屬性合并
        • 自定事件
        • 給組件綁定原生事件
        • 使用自定義事件的表單輸入組件
        • 自定義組件的 v-model
        • 非父子組件的通信
        • 內(nèi)容插槽
          • 匿名插槽
          • 有名插槽
          • 默認(rèn)內(nèi)容
          • 設(shè)作用域
        • 動(dòng)態(tài)組件
        • 組件緩存
        • 編寫可復(fù)用組件
        • 子組件引用
        • 異步組件
        • 命名約定
        • 對(duì)低開(kāi)銷的靜態(tài)組件使用 v-once
      • 實(shí)例
      • 使用
      • 渲染

• 課時(shí)12??

  • 模板語(yǔ)法
    • 組件注冊(cè)
      • 組件名字
      • 全局注冊(cè)
      • 局部注冊(cè)
      • 模塊系統(tǒng)
      • 基礎(chǔ)組件
        • 手動(dòng)局部注冊(cè)
        • 自動(dòng)全局注冊(cè)

• 課時(shí)13??

  • 模板語(yǔ)法
    • 數(shù)據(jù)傳遞
      • 名字規(guī)范
      • 靜態(tài)數(shù)據(jù)
      • 動(dòng)態(tài)數(shù)據(jù)
      • 傳入數(shù)字
      • 傳布爾值
      • 傳入數(shù)組
      • 傳入對(duì)象
      • 傳入一個(gè)對(duì)象的所有屬性
      • 單向數(shù)據(jù)
      • 數(shù)據(jù)驗(yàn)證
      • 特性掛載
        • 不希望組件的根元素繼承特性
        • 手動(dòng)決定特性賦予————推薦創(chuàng)建基礎(chǔ)組件時(shí)用

• 課時(shí)14??

  • 模板語(yǔ)法
    • 事件定義
    • 事件綁定
      • 名字規(guī)范
      • 自定義組件的 v-model
      • 將原生事件綁定到組件
• • 模板語(yǔ)法
    • 組件基礎(chǔ)
      • 基本示例
      • 復(fù)用組件
        • data須是一個(gè)函數(shù)
        • 將組件組合在一起
        • 向子組件傳遞數(shù)據(jù)
        • 各組件單個(gè)根元素
        • 向父組件發(fā)送消息
          • 在父組件中監(jiān)聽(tīng)事件
          • 在子組件中觸發(fā)事件
        • 向各組件傳遞內(nèi)容
        • 組件之間動(dòng)態(tài)切換
        • 模板解析注意事項(xiàng)
• • 模板語(yǔ)法
    • 復(fù)用合成
      • 混合對(duì)象
        • 概念
        • 定義
      • 選項(xiàng)合并
        • 條件
        • 策略
      • 全局混合
        • 適用場(chǎng)景
        • 自定選項(xiàng)
        • 合并策略
• • 模板語(yǔ)法
    • 自定指令
      • 全局注冊(cè)
      • 局部注冊(cè)
      • 鉤子函數(shù)
        • 何時(shí)調(diào)用
        • 調(diào)用次數(shù)
        • 鉤子參數(shù)
          • 綁的元素
          • 一個(gè)對(duì)象
          • 虛擬節(jié)點(diǎn)
        • 函數(shù)簡(jiǎn)寫
• • 模板語(yǔ)法
    • 渲染函數(shù)
      • 適用場(chǎng)景
      • 簡(jiǎn)單示例
      • 函數(shù)參數(shù)
        • 標(biāo)簽名稱
        • 數(shù)據(jù)對(duì)象
        • 子點(diǎn)數(shù)組
      • 數(shù)據(jù)對(duì)象
        • 類名class
        • 樣式style
        • 普通的html屬性attrs
        • 組件傳入的屬性props
        • DOM屬性domProps
        • 事件監(jiān)聽(tīng)on
        • 原生事件監(jiān)聽(tīng)nativeOn
        • 自定指令directives
          • 指令名稱name
          • 傳入的值value
          • 指令參數(shù)arg
          • 其表達(dá)式expression
          • 修飾符modifiers
        • 子點(diǎn)插槽
        • 父點(diǎn)插槽
        • 其他屬性
      • 完整示例
      • 限制
        • 重復(fù)使用
      • 使用腳本
        • 條件渲染
        • 循環(huán)渲染
        • 雙向綁定
        • 事件修飾
          • 事件冒泡
          • 默認(rèn)事件
          • 源于自身
          • 某一按鍵
        • 內(nèi)容插槽
          • 訪問(wèn)匿名插槽
          • 訪作用域插槽
      • 函數(shù)組件
        • 簡(jiǎn)單示例
        • 參數(shù)選項(xiàng)
        • 適用場(chǎng)景
        • 容器組件
        • 行為定義
      • 模板編譯
• • 模板語(yǔ)法
    • JSX
      • 簡(jiǎn)單示例
• • 模板語(yǔ)法
    • 插件
      • 編寫插件
        • 添加方法屬性
        • 添加全局資源
        • 注入組件選項(xiàng)
        • 添加實(shí)例方法
        • 提供接口類庫(kù)
      • 使用插件
        • 調(diào)用全局方法
        • 傳入一些選項(xiàng)
        • 自動(dòng)調(diào)用注冊(cè)
• • 模板語(yǔ)法
    • 過(guò)濾
      • 適用場(chǎng)景
      • 全局注冊(cè)
      • 局部注冊(cè)
      • 使用方式
      • 傳入?yún)?shù)
• • 開(kāi)發(fā)工具
    • 生產(chǎn)模式
      • 代碼壓縮
      • 預(yù)譯模板
      • 提取樣式
      • 提取腳本
      • 錯(cuò)誤跟蹤
    • 開(kāi)發(fā)模式
      • 預(yù)編處理
      • 自動(dòng)刷新
      • 數(shù)據(jù)模擬
      • 接口代理
• • 文件組件
    • 適用場(chǎng)景
      • 規(guī)模宏大
      • 腳本驅(qū)動(dòng)
      • 語(yǔ)法高亮
      • 可含樣式
      • 預(yù)編處理
    • 簡(jiǎn)單示例
    • 松散耦合
• • 單元測(cè)試
    • 簡(jiǎn)單示例
      • 導(dǎo)入類庫(kù)
      • 導(dǎo)入組件
      • 簡(jiǎn)單斷言
      • 類示例化
      • 掛載元素
      • 組件渲染
      • 斷言輸出
    • 異步斷言
      • 適用場(chǎng)景
      • 簡(jiǎn)單示例
• • 路由管理
• • 狀態(tài)管理
    • 適用場(chǎng)景
    • 簡(jiǎn)單示例
    • 共享數(shù)據(jù)
    • 私有狀態(tài)
    • 變更記錄
    • 事件分發(fā)
• • 后臺(tái)渲染
    • 適用場(chǎng)景
    • 環(huán)境搭建
• • 模板語(yǔ)法
    • 響應(yīng)原理
      • 如何追蹤變化
      • 變化檢測(cè)問(wèn)題
      • 加響應(yīng)式屬性
      • 定響應(yīng)式屬性
      • 異步更新隊(duì)列
• • 模板語(yǔ)法
    • 接口文檔
      • 類庫(kù)屬性
        • 創(chuàng)建子類Vue.extend( options )
        • 異步更新Vue.nextTick( [callback, context] )
        • 屬性設(shè)置Vue.set( target, key, value )
        • 屬性刪除Vue.delete( target, key )
        • 指令建獲Vue.directive( id, [definition] )
        • 過(guò)濾建獲Vue.filter( id, [definition] )
        • 插件掛載Vue.use( plugin )
        • 混合創(chuàng)建Vue.mixin( mixin )
        • 模板編譯Vue.compile( template )
        • 類庫(kù)版本Vue.version
      • 選項(xiàng)對(duì)象
      • 實(shí)例屬性
        • 其根元素vm.$el
        • 初始選項(xiàng)vm.$options
        • 數(shù)據(jù)對(duì)象vm.$data
        • 傳的數(shù)據(jù)vm.$props
        • 父級(jí)實(shí)例vm.$parents
        • 根級(jí)實(shí)例vm.$root
        • 子級(jí)組件vm.$children
        • 子點(diǎn)插槽vm.$slots
        • 父級(jí)插槽 vm.$scopedSlots
        • 其子組件vm.$refs
        • 后臺(tái)渲染vm.$isServer
        • 傳的屬性vm.$attrs
        • 其監(jiān)聽(tīng)器vm.$listeners
        • 屬性監(jiān)聽(tīng)vm.$watch( expOrFn, callback, [options] )
        • 屬性添加vm.$set( target, key, value )
        • 屬性刪除vm.$delete( target, key )
        • 事件監(jiān)聽(tīng)vm.$on( event, callback )
        • 事件監(jiān)聽(tīng)vm.$once( event, callback )
        • 事件移除vm.$off( [event, callback] )
        • 事件觸發(fā)vm.$emit( event, […args] )
        • 實(shí)例掛載vm.$mount( [elementOrSelector] )
        • 重新渲染vm.$forceUpdate()
        • 異步更新vm.$nextTick( [callback] )
        • 掛載清除vm.$destroy()
      • 模板指令
        • 插入文本
          • 編譯插入v-text
          • 原文插入v-html
        • 條件渲染
          • 顯隱元素v-show
          • 建毀組件v-if|v-else|v-else-if
        • 列表渲染v-for
        • 事件監(jiān)聽(tīng)v-on|@
          • 停止傳播.stop
          • 阻默行為.prevent
          • 由父及己.capture
          • 源于自身.self
          • 源于某鍵 .keyup.13
          • 原生事件.native
          • 只觸一次.once
        • 屬性綁定v-bind|:
        • 表單輸入v-model
        • 原始輸出
          • 渲染時(shí)顯v-pre
          • 結(jié)束后顯v-cloak
        • 渲染一次v-once
        • 特殊屬性
          • 強(qiáng)制替換key
          • 節(jié)點(diǎn)引用ref
          • 插槽標(biāo)記slot
          • 子點(diǎn)插槽slot-scope
          • 動(dòng)態(tài)組件is
      • 內(nèi)置組件
        • 動(dòng)態(tài)組件component
        • 過(guò)渡組件transition|transition-group
        • 緩存組件keep-alive
        • 分發(fā)組件slot