vue基礎 模板語法

2021-10-24 01:49:10 字數 927 閱讀 2185

(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...