vue基礎-動態樣式&表單繫結&vue響應式原理

動態樣式

• 作用：使用宣告式變數來控制class和style的值
• 語法： ：class/：style
• 注意：儘可能不要把動態class和靜態class一起使用，原因動態class起作用的時間會比較晚，需要通過Vue編譯，會出現‘一閃而過’的效果。

動態class

• :class='由類名拼接而成的字串""'字串格式
• :class='[表示式1,表示式2,...]'陣列格式
  • 注意：每個表示式都要求返回一個已經定義過的class類
• :class='{"css類名1":布林值，"css類名2":布林值,...}'
  • 注意：物件語法中，key名的返回值，若是變數需要加[],key名的返回是有效的類名，value必須是布林值（小心布林值的隱式型別轉化）
    

動態style

• :style='ss' ss可以是html5中style值的字串，還可以是[{},{}]陣列語法，還可以直接是{css屬性：css屬性值}
• :style='[{},{}]'
  • 注意：陣列中的每個物件都是'css屬性':css屬性值 構成的物件
• ：style='{css屬性:css屬性值，...}'
  

表單繫結

• 表單：文字框，拾色器，多行文字框，下拉框，核取方塊，單選按鈕組等...
• 從元件化的角度，凡是會發生值得的變化元件，都可以被認為是表單
• 注意：
  • 1.在單/核取方塊時，給他們新增同一組v-model，就可以變成一組，同時需要新增：value用於雙向繫結
  • 2.一般多選框的v-model要設定一個型別為陣列的宣告式變數，但是我們提交給後端時，常常需要將其轉化為以“；”，“#”分割的字串，可以使用arr.join(";")方法
    
• 如何理解v-model這個指令
  • 1.v-model是一種語法糖（一種比較好用的簡寫）
    • 對於普通文字框來講，v-model = v-bind：value + v-on：change
    • 對於單選按鈕組，核取方塊來講，v-model =v-bind：checked + v-on：change
    • 對於下拉框來講，v-model = v-bind：value + v-on：change
      
  • 2.v-model，在元件化中應用非常廣泛，常用於父子元件通訊

響應式

• 響應式？vue可以監聽一個變數的變化，當變數發生變化時，vue可以做一些工作。當面試官問響應式的原理，是問什麼呢？問的是“vue如何監聽data選項上的變數的變化的？”
• 雙向繫結？專指vue表單的v-model

模擬響應式實現過程

• 簡介：1.首先建立vue例項，通過object.defineproperty設定攔截器
  
• 2.當使用v-text等指令操作時，會進行touch，定義一個dep收集依賴，存放與非同步佇列中
  
• 3.v-model，還可以設定值，相當於呼叫set方法
  
• 4.進行初始化，第一次渲染需要通知watcher觀察者函式
  
• 5.定義觀察者函式，當呼叫set修改宣告式變數的值，發生變化時，會通知監聽器，重新渲染，（即遍歷收集依賴佇列的所有fn，並執行）