Vue的模板語法及指令的用法

2021-10-24 23:18:17 字數 1549 閱讀 4590

}作用:在檢視中渲染資料

注意: - 模板中是js環境(必須放表示式或值),不會去放語句。

- 模板中的變數和函式必須是例項中的屬性或者方法

- 對於js全域性函式,有些可以使用,有些不可以,即(白名單):

對於全域性window下的方法vue設定了白名單,只有在白名單下的方法,模板才可以使用。

`白名單`

: 'infinity,undefined,nan,isfinite,isnan,'+'parsefloat,parseint,decodeuri,decodeuricomponent

,encodeuri,encodeuricomponent,'+'math,number,date,array,object,boolean,string,regexp,map,

set,json,intl,' +'require'(摘自官網)

- if結構不能用,if-else也不能

if可以用邏輯運算子代替,即(&& 和 ||),這裡涉及到短路運算(不懂的小夥伴可以私聊哦)

if-else可以用三目運算子,即 a>b?c:d

作用:擴充套件了普通html屬性的功能(其用法跟自定義屬性相同)

語法:v-指令名=

"值"具體常用的vue指令有:

+ v-model

將表單控制項的value屬性與vue中的資料進行`雙向繫結`

+ v-text

將元素的文字內容與乙個vue的資料進行繫結

這裡需要注意的是:

}模板引擎和v-text都不會渲染富文字資料

+ v-html

同v-text,但v-html會渲染富文字資料

+ v-bind

將乙個普通的任意標籤的屬性(可以是自定義屬性)的值與vue的乙個資料進行繫結,可以簡寫成 :屬性

+ v-on

將vue元素的事件與vue的方法進行繫結,可以簡寫成 @事件

繫結方法為:

"fn"

>按鈕<

/button>

newvue(}

})"fn()"

>按鈕<

/button>

// 需要傳參的時候

newvue(}

})方法中改變資料

this

.資料 = 值

eg:,

methods:}}

另外,vue還給我們提供了事件修飾符:

.stop 阻止事件冒泡

.prevent 阻止預設事件

.capture 事件捕獲階段提前觸發

.self 只能自己觸發,其後代元素無法觸發

.once 事件只觸發一次

總結

以上就是常見指令,即

《元素 v-指令=「***」>

指令的值需要寫在引號中,且:

1.為js環境

2.裡面可以寫表示式,不能用語句

3.全域性函式中只能使用白名單中的

即相當於模板中的語法,但v-model有點特殊,小夥伴們可以摸索一下。

Vue常用的指令及用法

v if 判斷是否隱藏 list.lenght 0 v if div else v else div v for 資料迴圈 item代表是迴圈的值 index代表是每一項 也可以說是下標 key 代表標識 for item,index in list key index p div v bind c...

04vue 模板語法 指令

指令 directives 是帶有v 字首的特殊屬性。即 vue給html元素增加了一些自定義屬性,這些自定義是屬性是以 v 開頭的屬性 v text 更新元素的 textcontent。如果要更新部分的 textcontent 需要使用 插值。v html 更新元素的 innerhtml v sh...

vue的模板語法

vue 指令元件 模板語法支援性還是很高的,資料型別都是支援的,但是不支援 輸出語法 console.log alert 格式 v mustache語法 v msg v v html 將乙個資料展示在乙個dom內容中,innerhtml html屬性 v bind 單項資料繫結 v text 非轉義...