(1) 插值
a.文字 }
b.純html
v-html慎用 ,防止xss,csrf(
(1) 前端過濾 (前端採用正則將容易注入的字元《等過濾掉)
(2) 後台轉義( < > 換成 < > )
clicka
>
c.表示式
(2) 指令
是帶有 v- 字首的特殊屬性
v-bind 動態繫結屬性
v-if 動態建立/刪除
v-show 動態顯示/隱藏
v-on:click 繫結事件
v-for 遍歷
v-model 雙向繫結表單
v-cloak 防止表示式閃爍
注: v-cloak
給模板內的元素新增v-cloak屬性後,元素在vue沒有載入完的時候就有這個屬性,當vue載入完成後這個屬性就消失了,所以我們可以給這個屬性設定css樣式為隱藏
visibility:hidden 元素消失了 但後續的元素還是保持不變,不會破壞文件流結構 ===> 產生了重繪了 (repaint)
display:none 讓元素消失了 後續的元素會佔據消失元素的位置,破壞文件流結構 ===> 產生了回流了(reflow)
v-text/v-html
v-text會指定將模板內元素的textcontent屬性替換為指令值所代表的資料
v-html可以解析標籤,更改元素的innerhtml,效能比v-text較差
v-pre
跳過元素和其子元素的編譯過程,可以用來顯示mustache
(3) 縮寫
v-bind:src => :src
v-on:click => @click
Vue基礎篇 模板語法
a 文字 雙大括號 b html元素 v html指令 c 屬性 v bind指令 v text更新textcontent。直接用雙大括號也是可行的 v html輸出真正的html。一般輸出真正html直接用元件更方便 v pre跳過這個元素和它的子元素解析和渲染。時顯時不顯操作可以用 v cloa...
Vue基礎 三 模板語法 二
vue是通過指令v on來繫結事件的,例如最常用的點選方法 v on click。我們也可以縮寫為 click 來個簡單的案例 點選點選1 點選2點選3 執行的效果 可以看到,四種寫法都可以實現點選事件的繫結,並且this指向的是vue的例項物件。前面兩個方案能將num值改變,但是我們不推薦這麼寫,...
VUE 模板語法
message span 雙大括號裡面的內容會被替換成msg的變數值,在msg變數值改變的時候會自動更新html裡的內容 只輸出純文字文字,不會有html效果,為了輸出html需要用到v html指令 using mustaches p using v html directive v html r...