Vue指令(Directives)介紹

上圖中，紅色指令代表可以『操作資料』

v-model <--> data

• 資料怎麼變，v-model也會跟著改變;v-model改變了，資料也會跟著改變，這就是雙向綁定

渲染方法

• 渲染方法不會直接操作資料內容，但會將資料內容反映到畫面上，只會讀，不會寫入

事件綁定

• 也不太會直接去操作data(可以但我們不會這麼做)
• 會直接去操作方法，事件觸發之後，再來變更資料
  

指令|修飾符|縮寫

資料呈現於畫面上的指令

• 如果要將 Vue Data 呈現於畫面上，主要有以下的方式：

  • {{}}：使用雙大括號中間可直接插入元件資料或者任何表達式內容來呈現。
  • v-text：與前者相同，同時可運用在標籤上。
  • v-once：綁定的標籤僅會輸出一次資料於畫面上，往後的更新將不會再做更動。
  • v-html：可同時輸出 HTML 結構，在使用上要特別注意：請只對可信內容使用 HTML 插值，絕不要對用戶提供的內容使用插值。（XSS 攻擊），詳細說明可參考：https://cn.vuejs.org/v2/api/#v-html

• 範例：
  

  See the Pen 資料呈現於畫面上 by Sui Hsilan (@sui-hsialn) on CodePen.