VUE的基礎語法
new Vue(options)
-
返回值vm（viewModel）
-
el：不能掛載到html或者body上 =>querySelector
-
data
- 數據值對於對象來說要先聲明，否則新增屬性無效（可以基於vm.$set處理）
- vm.arr[0]=xxx 改變數組中的某一項視圖不會渲染，需要基於內置的方法，例如：push…
- 對象或者數組可以整體替換值實現數據變視圖也變
-
。。。
mustache（[ˈmʌstæʃ]） 小鬍子語法
value
JS表達式
常用的指令（directive）
v-model
v-html / v-text：取消小鬍子語法刷新中的閃爍問題
v-bind（縮寫 :）
v-once
v-if 和 v-show
v-for
for in循環 & for of循環
1、 遍歷數據類型的範圍
2、原型上方法遍歷（或者數組新增的xxx:xxx屬性遍歷）
.3、.....
Symbol.iteratoer：Array、Set、Map、String、Arguments、NodeList...
v-on 事件綁定
v-on:xxx
methods ：和data類似，都會把方法掛載到vm實例上（this都是當前實例）
@xxx
@xxx="func" & @xxx="func($event,...)"
directive自定義指令
Vue.directive([指令名，省略v-], function(el,bindings,vnode){}
1、el當前元素
2、bindings包含很多信息
- name：指令名，不包括 v- 前綴
- value：指令的綁定值
- oldValue：指令綁定的前一個值，僅在 update 和componentUpdated 鉤子中可用
- expression：字符串形式的指令表達式
- arg：傳給指令的參數，可選。例如 v-my-directive:foo 中，參數爲 “foo”
- modifiers：包含修飾符的對象。例如：my-directive.foo.bar 中，修飾符對象 { foo: true, bar:
true }
3、vnode虛擬DOM
- ctx = vnode.context 獲取當前元素所在的上下文
- ctx[bindings.expression]=xxx
獲取上下文中的表達式變量，並且把指定的值賦值給它
鉤子函數
bind：當用戶綁定指令時生效（只調一次）
update：所在組件的 VNode 更新時調用，但是可能發生在其子 VNode 更新之前（一個函數的方式就是把bind和update合在一起的寫法）
componentUpdated：指令所在組件的 VNode 及其子 VNode 全部更新後調用
unbind：只調用一次，指令與元素解綁時調用
inserted：被綁定元素插入父節點時調用 (僅保證父節點存在，但不一定已被插入文檔中)
事件修飾符
常規：.stop / .prevent / .once …
按鍵：.enter 或者 .13 / .up / .down / .left / .right …
組合修飾符
…
表單元素的處理
普通文本框 或者 文本域
單選框
複選框
下拉框
小案例：全選和非全選
計算屬性、過濾器、監聽器
methods 普通方法
filters 過濾器
只能應用到鬍子語法和v-bind中
小練習：輸入內容的單詞首字母大寫
computed
getter & setter
相對於普通方法來講，計算屬性是基於它們的響應式依賴進行緩存的
依賴data中的數據變量
小練習：輸入內容的單詞首字母大寫
小練習：全選和非全選
watch
當需要在數據變化時執行異步或開銷較大的操作時應用監聽器
小練習：全選和非全選
小練習：數據異步綁定的處理
class和style綁定
class的處理（對象語法、數組語法）
內聯樣式的處理
…
生命週期函數（鉤子函數）
beforeCreate
created
beforeMount
mounted
beforeUpdate
updated
beforeDestory
destory
…
常用的屬性方法
$set : 設置響應式數據
$el : 掛載的元素
$destroy : 銷燬vue的實例；同時調用beforeDestroy destroyed
$mount : 掛載真實DOM的方法
$data : 響應式的對象
$options: 是Vue的構造函數的參數
$refs : 可以用來獲取指定的元素對象 （非受控組件）
$on : 訂閱
$emit : 發佈
$watch：監控
…
