vue培訓記錄

在公司作了一次vue相關的培訓，本身整理了一些大綱。供你們參考學習！
固然 優先要先看官方文檔

1. 項目構成及原理 Vue

• 主流框架看法及差異

  • react ALL IN JS 靈活
  • angular 架構清晰 層級多 重
  • vue 相似react並吸取了angular的一些優勢

• Node運行在服務端的JS

  • 谷歌V8引擎 使JS語言能在服務器端運行

• Webpack—一個前端的打包工具

  • 模塊化拆分js
  • 使開發環境的代碼能被瀏覽器編譯

• Vue單頁spa框架

  • 實則是一個html
  • 沒有刷新頁面過渡可編譯

• Vue核心思想

  • 以數據驅動視圖，儘可能少用直接對DOM的操做
  • 一切都是模塊組件
  • 單向數據流

• Vue-cli腳手架工具 去年出的3.0

  • 以更好的項目架構去搭建vue項目
  • 打包建立一些須要的依賴
• Vue項目建立
• Vue的項目構成

• Vue的一些經常使用es6 ECMAScript 6 入門

  • var => let const
  • 箭頭函數 this指向
  • 異步（promise）回調地獄
  • 數組及解構賦值

2. Vue路由 Vue Router

• 路由的做用及工做原理

  • 以路徑爲鍵作模塊加載
  • 路由的兩種模式：hash history
• 基礎路由的配置
• 路由全局守衛beforeEach、beforeResolve 、afterEach、beforeEnter
• 組件內路由守衛beforeRouteEnter、beforeRouteUpdate 、beforeRouteLeave
• 動態路由配置this.$router.addRoutes 只能添加頂級路由
• keep-alive activated deactivated

3. 模板語法

• v-if、v-for、v-show
• dom指令 v-if v-for
• 視圖 v-show
• 巧用三元運算
• 方法綁定 '@'、'v-on'
• 修飾符
• 數據綁定 ':'、'v-bind'、'v-model'

4. Vue實例對象

• 實例this

• vue函數對象

  • this指向當前函數對象

• 方法對象methods

  • 全部調用的方法集

• 數據對象data

  • 數據驅動視圖的核心
  • 只當create的時候賦值一次

• 計算屬性computed 性能優點

  • 利用緩存計算
  • 不能直接修改

• 過濾器filter 注意this

  • 對字符串進行加工處理
  • 過濾器中取不到this

• 數據監聽watch 慎用深度監聽

  • 對數據進行監聽 作相應動做
  • 深度監聽影響性能

• 生命週期 beforecreated、created、beforeMount、mounted、beforeUpdate、updated、beforeDestory、destoryed

  • 經常使用created 獲取數據，不觸發updated，不形成頁面2次渲染
  • 經常使用mounted 操做dom，觸發update，形成頁面2次渲染

5. 組件

• 組件引用書寫 'components'
• 組件傳參 props 傳方法@
• 修飾符sync語法糖
• v-model語法糖

• 父子組件交互 $emit $refs

  • 子組件經過$emit觸發父組件傳入的方法，並傳入參數
  • 父組件經過在子組件添加ref,在方法中用$refs來拿子組件中的參數或調取子組件方法

6. 狀態管理 VueX

• VueX是什麼，爲何要使用VueX
• VueX的使用mutations、Action

7. Ajax請求

• AXIOS的封裝及使用