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，並執行）