簡介
是一套用於構建用戶界面的漸進式框架。與其它大型框架不同的是，Vue 被設計爲可以自底向上逐層應用。Vue> 的核心庫只關注視圖層，不僅易於上手，還便於與第三方庫或既有項目整合。另一方面，當與現代化的工具鏈以及各種支持類庫結合使用時，Vue 也完全能夠爲複雜的單頁應用提供驅動。
基礎特性
- 雙大括號語法用於文本插值
- 模板內部不要訪問全局變量
- vm.$watch 是一個實例方法有兩個參數，能監聽數據的變化返回改變後的值和改變前的值
- computed 處理模板內的複雜邏輯形成方法
- 方法寫入模塊內能緩存，不依賴響應數據
wach偵聽和computed計算
-
因頻繁的數據變動使用wach得不償失，應使用計算
-
wach在執行異步操作時才得以使用
計算的setter -
在觸發數據變化時setter會被使用
組件
- 組件是可複用的 Vue 實例，且帶有一個名字
- 它們與 new Vue 接收相同的選項,例外是像 el 這樣根實例特有的選項。
- 可以將組件進行任意次數的複用,因爲你每用一次組件，就會有一個它的新實例被創建。
- 自定義組件使用class不會覆蓋原有的class
- 可以像在任何普通元素上一樣使用 v-for ，但是key是必須的
- 組件有自己獨立的作用域，爲了把數據傳遞到組件裏，我們要使用 prop：
- 組件默認可擁有任意數量的prop也能是數組猶如data一樣的效果
- 事件的同樣可以綁定，傳入一個事件源對象需要方法 $emit 傳遞
- 父級監聽自定義組件需要用$event來訪問
- 組件使用v-model需要使用到 $emit 接收和 $event 來取值
- 給組件傳遞內容使用元素在需要的地方加入插槽
- 動態切換要特殊的 is attribute 來實現正常工作需 .prop修飾器
- dom模板操作時被忽略需要特殊的 is 來變通
指令
指令後方可以添加參數和修飾符
方括號包裹表示動態參數屬性，需要遵守書寫規範
修飾符是指令以特殊方式綁定
v-bind 和 v-on 這兩個最常用的指令，提供了簡寫
-
v-once 指令，執行一次插值
-
v-html 指令，輸出html（避免使用輸出）
-
v-bind 指令：解析表達式爲true生效
-
v-if 指令，根據表達的真假值決定行爲
-
v-if指令，達式返回 truthy 值的時候被渲染，需顯示多個元素需要在不可見的包裹
-
v-else 元素必須緊跟在帶 v-if 或者 v-else-if塊 的元素的後面，否則它將不會被識別。
-
vue通常會複用已有元素，添加一個具有唯一屬性的值給 key 就會動態生成
-
v-show 指令，根據條件展示元素，帶有 v-show 的元素始終會被渲染並保留在 DOM 中
-
v-if 有更高的切換開銷，而 v-show 有更高的初始渲染開銷，非常頻繁地切換用show，很少改變用if
-
v-if 與 v-for 不建議一起使用，v-for 具有更高的優先級，if會不斷循環，for需添加限制時非常有效
-
v-for 指令，基於一個數組，可獲取值和下標，還有父級屬性
-
爲對象可獲取值和鍵名，還有下標，取得的值爲動態渲染時，需要添加id，：key
-
數組內部的值正常無法動態監聽，需使用變異方法包裹觸發視圖更新
-
變異方法push()，pop()，shift()，unshift()，splice()，sort()，reverse()
-
替換數組，使用非變異方法改變數組是相當高效的行爲
-
filter()、concat() 和 slice() 等
-
下標設置值和修改數組長度不是響應式的
-
可以用Vue.set或實例vm.$set實現響應式或splice截取添加
-
修改長度使用splice截取掉獲得
-
動態添加刪除對象內容也不是動態的，可以使用vue.set或其實例，多個對象使用時assign先手動添加新的空對象
class和style
- v-bind 指令：解析表達式或對象屬性爲true生效
- v-bind用於動態切換class能是對象和數組
- 對象爲一個返回函數返回判斷處理的結果
- 數組則可以使用三目判斷操作，或和對象混和使用
- v-bind:style也能是對象和數組
- 對象內可以是多個屬性，在模板內更清晰，值能包含多個前綴爲值
- 數組就是多個樣式應用，
過濾器
- 排序則使用computed計算屬性，返回使用filter形成的新數組
- for循環時可設置爲處理函數動態執行返回新數組
- for接受源對象爲整數時會重複對應次數
- 在 上使用 v-for循環渲染
事件處理
-
監聽事件：v-on 指令監聽 DOM 事件，並在觸發時運行一些 JavaScript 代碼。
-
一般接受的參數是事件處理的函數名稱，或函數體
-
函數體參數內除了數據還有$event取事件
-
事件修飾符，點開頭的指令後綴
-
.stop：阻止單擊事件繼續傳播
-
.prevent：提交事件不再重載頁面，可以串聯，只有修飾符
-
.capture：事件捕獲在內部處理
-
.self：自身event爲觸發時執行函數
-
.once：只會觸發一次，能被用到自定義的組件事件上
-
.passive：得到事件觸發會立即觸發行動，提升移動端性能
-
按鍵修飾符
-
Vue 允許爲 v-on 在監聽鍵盤事件時添加按鍵修飾符
-
可以通過全局 config.keyCodes 對象自定義按鍵修飾符別名
-
.exact 修飾符允許控制由精確的系統修飾符組合觸發的事件
-
鼠標按鈕修飾符會限制處理函數僅響應特定的鼠標按鈕。
-
表單輸入綁定
-
v-model 在內部爲不同的輸入元素使用不同的屬性並拋出不同的事件：
-
text 和 textarea 元素使用 value 屬性和 input 事件；
-
checkbox 和 radio 使用 checked 屬性和 change 事件；
-
select 字段將 value 作爲 prop 並將 change 作爲事件。
-
用 v-for 渲染的動態選項：使用v-bind實現動態綁定
-
內部的rure-vale和false-value不會影響表單控件的提交
-
修飾符.lazy 轉變爲使用 change 事件進行同步
-
.number 自動將用戶的輸入值轉爲數值類型
-
.trim 自動過濾用戶輸入的首尾空白字符
過度和動畫
- Vue 提供了 transition 的封裝組件，自動嗅探目標，在恰當的時機添加/刪除 CSS 類名
- v-enter：定義進入過渡的開始狀態
- v-enter-to: 2.1.8版及以上 定義進入過渡的結束狀態
- v-enter-active：定義進入過渡生效時的狀態
- v-leave-active：定義離開過渡生效時的狀態
- v-leave: 定義離開過渡的開始狀態
- v-leave-to: 2.1.8版及以上 定義離開過渡的結束狀態
深入組件
- 組件名大駝峯或槓鏈接
- 全局和局部組件，全局是在new vue前註冊的，在打包時增加無謂的增加
- 子組件之間不通信，添加到 Components 目錄進行模塊加載即可
- 組件的自動化註冊也是依靠es6模塊引入
- prop的屬性命名駝峯式，使用就是槓連接
- prop類型可以是數組或對象，可以接受靜態值和動態值
- 給prop傳全部的對象屬性，使用不帶參數的 v-bind 解析
- 單向數據流，prop父子之間是向下單向綁定的，動態更新的子prop內容
- 作爲本地prop數據使用或轉換可以用data和computed處理返回
- prop驗證數據類型，根據定義的驗證方法返回警告
- 類型檢查，type可以是所有類型原生構造函數的一個
- 非prop的傳入沒有定義的屬性會添加到對應根元素上
- 本身和父級的屬性值在衝突時會合並得到最終的值
- 可以選擇禁用Attribute(屬性)不繼承根的屬性
- 實例的 $attrs 屬性使用，包含給組件的attrbute和值
- 自定義事件，監聽時間需要完全匹配，則使用槓連接
- v-model默認會利用value和prop名爲input事件，model可以自己設置prop和enent值，以及輸入類型的控件設置
- 組件上監聽原生事件使用 v-on 的 .native 修飾符
- 監聽被重構的input會靜默失敗，需要 $listentrs 對象返回監聽器
- .sync 修飾符，update:myPropName可以對prop值進行監聽更新
- 插槽，在模板內進行設置