Vue常用指令指南

2021-10-11 03:15:45 字數 2331 閱讀 6067

v-clock

不需要表示式

用法:這個指令保持在元素上直到關聯例項結束編譯。

<

!--對於mvvm的理解--

>

<

!--解放dom

-->

<

!--指令:就是vue.js為我們提供的方便操作的自定義屬性--

>

>

}<

/p>

<

/div>

<

!--view end--

>

"vue.js"

>

<

/script>

//建立乙個vue環境,建立乙個vm層

let vm =

newvue(}

)<

/script>

v-text

更新元素的 textcontent。如果要更新部分的 textcontent,需要使用 } 插值。

<

!--指令,標籤的自定義屬性--

>

>

}-->

'username'

>

<

/p>

<

/div>

"./vue.js"

>

<

/script>

newvue(}

)<

/script>

v-html

更新元素的 innerhtml

<

!--指令,標籤的自定義屬性--

>

>

}-->

'username'

>

<

/p>

<

/div>

"./vue.js"

>

<

/script>

newvue(}

)<

/script>

v-pre

不需要表示式

用法:跳過這個元素和它的子元素的編譯過程。可以用來顯示原始 mustache 標籤。跳過大量沒有指令的節點會加快編譯。

>

}<

/p>

<

/div>

"jsue.js"

>

<

/script>

newvue(}

)<

/script>

v-once

只渲染元素和元件一次。隨後的重新渲染,元素/元件及其所有的子節點將被視為靜態內容並跳過。這可以用於優化更新效能。

>

}<

/p>

<

/div>

"./vue.js"

>

<

/script>

newvue(,

mounted()

})<

/script>

v-on

用法:繫結事件***。事件型別由引數指定。表示式可以是乙個方法的名字或乙個內聯語句,如果沒有修飾符也可以省略。

用在普通元素上時,只能監聽原生 dom 事件。用在自定義元素元件上時,也可以監聽子元件觸發的自定義事件。

>

"text" v-model =

"num"

>

"button" v-on:click=

'add' value=

"+1"

>

"button" v-on:click=

'sub' value=

"-1"

>

<

/div>

"./vue.js"

>

<

/script>

newvue(,

methods:

,sub()

}})<

/script>

v-model

在表單控制項或者元件上建立雙向繫結。

<

!--雙向資料繫結--

>

>

"text" v-model =

"username"

>

}<

/p>

<

/div>

"./vue.js"

>

<

/script>

newvue(}

)<

/script>

vue常用指令

1 v model id box type text v model br div var a new vue script 就和 ng model 乙個意思了 v html html v html html渲染過程中被解析 v text text 同上 意思就是資料渲染過程中被解析 v for v...

vue常用指令

常用內建指令 v text 更新元素的 textcontent v html 更新元素的 innerhtml v if 如果為true,當前標籤才會輸出到頁面 v else 如果為false,當前標籤才會輸出到頁面 v show 通過控制display樣式來控制顯示 隱藏 v for 遍歷陣列 物件...

vue常用指令

vue常用指令 1.v text v text主要用來更新textcontent,可以等同於js的text屬性 2.v html 雙大括號的方式會將資料解釋為純文字,而非html。為了輸出真正的html,可以用v html指令。它等同於js的innerhtml屬性。3.v pre v pre主要用來...