01 Vue 常用指令

2021-10-21 17:40:36 字數 2575 閱讀 1152

指令

說明v-cloak

作用:解決插值表示式閃爍的問題

注意:需要配合屬性選擇器 +display:none; 使用

v-text

作用:輸出文字

v-html

作用:以瀏覽器能夠解析的方式輸出

v-bind

格式:v-bind:

簡寫::屬性

作用:用於繫結屬性的指令,可以寫合法的js表示式

v-on

格式:v-on:

簡寫:@事件

作用:用於繫結事件

v-model

作用:實現雙向繫結(m => v, v => m)

注意:只能用在表單元素中

v-for

作用:for 迴圈

v-if

v-else-if

v-else

v-show

作用:根據條件展示元素

缺點:對元素進行 display 操作,有較高的初始渲染消耗

建議:若元素需要頻繁的切換,建議使用v-show

1.1.0 前期準備

var vm =

newvue(,

,,,]

},methods:}}

)

1.1.1 v-cloak
>

p[v-cloak]

style

>

>

v-cloak

>

}p>

div>

src=

''>

script

>

1.1.2 v-text
>

v-text

="text"

>

p>

div>

1.1.3 v-html
>

v-html

="text"

>

p>

div>

1.1.4 bind
>

v-bind:title

="msg"

>

titlep

>

div>

1.1.5 v-on
>

v-on:click

='btn'

>

button

>

div>

1.1.6 v-model
>

type

='text'

v-model

='num'

/>

>

}p>

div>

1.1.7 v-for
>

v-for

="item in list"

:key

="item.id"

>

>

type

="checkbox"

/>

【id】:} -- 【姓名】:}

li>

ul>

div>

1.1.8 v-if / v-else-if / v-else
>

v-if

="flag === 'a'

">

ap>

v-else-if

="flag === 'b'

">

bp>

v-else

>

cp>

div>

1.1.9 v-show

從這幅gif中,我們可以很清楚的看到,一開始選擇的是5號,然後unshift()後,核取方塊選擇的位置依然沒有跟著變動,而是在原位置一動不動。

2.2.0+ 的版本裡,當在元件中使用v-for 時,key 現在是必須的。

當 vue.js 用 v-for 正在更新已渲染過的元素列表時,它預設用 「就地復用」 策略。如果資料項的順序被改變,vue將不是移動 dom 元素來匹配資料項的順序, 而是簡單復用此處每個元素,並且確保它在特定索引下顯示已被渲染過的每個元素。

為了給 vue 乙個提示,以便它能跟蹤每個節點的身份,從而重用和重新排序現有元素,你需要為每項提供乙個唯一 key 屬性。

Vue學習01 Vue基礎

lang en charset utf 8 name viewport content width device width,initial scale 1.0 vue學習title head div src script newvue script body html vue例項的作用範圍是什麼呢...

Vue學習筆記之01 Vue的特點

0.準備工作 vue的基本使用 new vue box 輸出50 輸出xiaolam div 以前的js做法 程式設計正規化 命令式程式設計 建立乙個div元素,設定id屬性 定義乙個變數message 將這個變數插入div元素中 如果修改了message的資料 就要重新將修改後的資料重新插入div...

01 vue的模板替換簡單實現

vue是如何使用的 編寫頁面模板 建立vue例項在vue建構函式中提供 data methods computed.將vue掛載到頁面中 mount 下面是乙個 例項 doctype html html lang en head meta charset utf 8 meta name viewpo...