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.

#2023六角Vue直播班筆記







你可能感興趣的文章

[vue] transition 介紹與巢狀用法

[vue] transition 介紹與巢狀用法

[團隊協作] Simple Twitter 專案後端開發

[團隊協作] Simple Twitter 專案後端開發

Option API#監聽:Watch

Option API#監聽:Watch






留言討論