• Vue模板應用
  • • • {{}} 變數插值
      • v-once 只會插值一次
      • v-html 對HTML代碼插值
      • v-bind
        • HTML標簽屬性的插值
        • 在外部傳遞數值類型的數據到組件內部時, 必須使用v-bind指令的方式進行傳遞, 直接使用HTML屬性設置的方式傳遞會將傳遞的數據作為字元串傳遞
      • v-on 監聽、綁定事件
      • v-model 雙向綁定
      • 條件渲染
        • v-if 如果其指定的變數為true, 則渲染這個元素
        • v-else-if
        • v-else
        • v-show
      • 迴圈渲染
      • v-for

Vue模板應用

模板屬於視圖層

{{}} 變數插值

v-once 只會插值一次

v-html 對HTML代碼插值

v-bind

• HTML標簽屬性的插值

v-bind:id = "#######"
v-bind:class = "#######"

//可簡寫
:id = "#####"
:class = "#####"

• 在外部傳遞數值類型的數據到組件內部時, 必須使用v-bind指令的方式進行傳遞, 直接使用HTML屬性設置的方式傳遞會將傳遞的數據作為字元串傳遞

v-on 監聽、綁定事件

v-on: click = "########"

//可簡寫
@click = "#######"

v-model 雙向綁定

條件渲染

v-if 如果其指定的變數為true, 則渲染這個元素

v-else-if

v-else

v-if = "#####"
v-else-if = "######"
v-else

v-if指令必須添加到一個HTML元素上, 可以使用div或template標簽對元素分組包裝

v-show

和v-if相同, 不過不能與v-else-if ,v-else混用, 初識性能消耗性能高, v-if切換性能消耗高

迴圈渲染

v-for

v-for = "####[item] in ####[list]"

// 也可以對js對象進行v-for遍歷
v-for = "(value, key, index) in person"

// v-for支持在渲染前對數據進行處理
v-for = "(value, key, index) in handle(list)"
handle 為自定義函數