Vuejs之【內部指令】
v-text 讀取文字不能讀取html標籤,解析文字
使用{{XXX}}這種情況是有弊端的,當我們網速很慢或者javascrit出錯時,會暴露我們的{{XXX}}。v-text就是解決這個問題的。
v-html 能讀取html標籤,解析html標籤
雙大括號會將資料解釋為純文字,而非HTML。為了輸出真正的HTML,你就需要使用v-html 指令。
要注意的是:在正式環境上動態渲染HTML是很危險的,因為容易導致XSS攻擊。
v-if 顯示與隱藏和v-show對比的區別就是是否刪除dom節點預設值為false
v-else-if 必須和v-if連用
v-else
v-if用來判斷是否載入html的DOM
v-show
css中display屬性,DOM已經載入,只是css控制沒有顯示。
v-if和v-show的區別:
v-if:判斷是否載入,可以減輕伺服器的壓力,在需要時載入
v-show:調整css display屬性,可以使客戶端操作更加流暢
v-bind:class
三種繫結方法
1、物件型 '{red:isred}'
2、三目型 'isred?"red":"blue"'
3、陣列型 '[{red:"isred"},{blue:"isblue"}]'
v-on事件監聽器
鍵盤迴車事件v-on:keyup.enter
v-model 繫結資料來源
修飾符 .lazy:取代input監聽change事件
.number:輸入字串轉為數字
.trim:輸入去掉首尾空格
v-bind 處理HTML中的標籤屬性
完整語法:v-bind:href=
縮寫語法::hred=
修改CSS樣式 繫結class樣式(:class);繫結style(:style)
v-cloak 防閃爍
在vue渲染完指定的DOM後才進行顯示,必須和css樣式一起使用
v-pre 把標籤內部的元素原位輸出
在模板中跳過vue的編譯,直接輸出原始值。就是在標籤中加入v-pre就不會輸出vue中的data值了。
<div v-pre>{{message}}</div>
這時並不會輸出我們的message值,而是直接在網頁中顯示{{message}}
v-once 進入頁面時只渲染一次不在進行渲染
舉例:1.<div v-once>{{msg}}</div>
[email protected]="show"
文字框的數字會預設轉變成字串,所以需要parseInt()函式進行整數轉換。