1. 程式人生 > >Vuejs之【內部指令】

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連用不能單獨使用否則報錯模板編譯錯誤

  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()函式進行整數轉換。