vue基本指令

指令是一些特殊的標記，給html新增一些原來沒有的功能

指令一：v-model

>
type
='text'
v-model
='num'
>
type
='checkbox'
v-model
='ischecked'
>
div>

const vm =
newvue(}
)

雙向資料繫結的原理

底層通過 object.defineproperty()來實現的
- object.defineproperty()是es5提出的乙個方法，無法shim（相容）ie8以下版本

例：

type
='text'
class
='txt'
>

let obj =
let tmp
const txt = document.
queryselector
('.txt'
)//oninput事件 只有input的value值發生改變就會觸發
txt.
oninput
=function()
// 第乙個引數：給哪個物件新增或者設定屬性
// 第二個引數：要新增什麼屬性
// 第三個引數：屬性的修飾符 物件格式
object.
defineproperty
(obj,
'name',,
// 獲取會呼叫get
get:
function()
})

指令二、v-text & v-html

v-text 相當於 innertext 不識別html標籤

v-html 相當於innerhtml 識別html標籤

指令三、v-bind

v-bind 動態資料繫結（單向）

因為html的屬性不能使用}來動態讀取資料，所以使用v-bind

例：

>
v-bind:href
='href'
>
clicka
>
//v-bind可以簡寫為 ：
:href
='href'
>
clicka
>
div>

const vm =
newvue(}
)

操作樣式

>
.bgc
.fzstyle
>
>
//傳統方式
class
='red fz'
>
乙個**標題h3
>
//vue動態
:class=''
>
乙個**標題h3
>
//新增行內樣式
:style=''
>
h3>
body
>

const vm =
newvue(}
)

指令四、v-on

用於註冊事件、繫結事件。可簡寫為@ 事件中讀取data屬性需要使用修飾符this,標籤中可直接使用, 函式中的this指的就是vm例項事件物件 - 如果事件函式沒有() @click='fn' 在事件處理函式裡直接接受乙個形參e即可

- 如果事件函式有() @click='fn()' 使用$event欄位

>
v-on:click
='clickbtn'
>
clickbutton
>
@click
='clickbtn'
>
clickbutton
>
@click
='fn($event,123)'
>
clickbutton
>
div>

const vm =
newvue(,
methods:,fn
(e,num)}}
)

指令五、v-for

遍歷資料，根據資料裡的每一項，建立（指令所在的）對應的標籤 - 遍歷陣列 v-for='(item,index) in list' item:元素 index:索引 - 遍歷物件 v-for='(item,key) in obj' item:屬性值 key:鍵名/屬性名 - 遍歷數字 v-for=『item in 5』 item: 數字1開始使用key值： - 如果陣列裡的元素不是物件，而且不改變順序，key可以取索引 :key='index'

- 如果陣列裡的元素是物件，key取物件裡的固定屬性，並且唯一

例：

//要跟key值 不然會報錯
v-for
='(item,key) in obj'
:key
='key'
>
hello }h1
>

const vm =
newvue(}
})

指令六、v-if & v-show

實現元素的隱藏和顯示 1. 相同點：都能實現切換元素的顯示和隱藏 2. 不同點： - v-if 顯示：建立節點隱藏：移除節點 - v-show 顯示：display：block 隱藏：display：none 3. 使用場景： - v-if通過不斷的建立節點、移除節點來實現顯示與隱藏，效能不好 - 切換顯示與隱藏頻率低的用v-if

- 切換顯示與隱藏頻率高的用v-show

例：

v-if
='isshow'
>
我是v-ifh1
>
v-show
='isshow'
>
我是v-forh1
>

const vm =
newvue(}
)

其他指令：v-else-if 和 v-else

v-else-if：三種情況以上的判斷

v-if
='num >= 40'
>
第乙個h1
>
v-else-if
='num >= 30 && num < 40'
>
第二個h1
>
v-else
>
第三個h1
>

v-else：兩種情況的判斷

v-if
='num >= 40'
>
第乙個h1
>
v-else
>
第三個h1
>

其他指令：v-once

v-once作用：帶有這個指令的標籤中的內容只執行一次，執行完一次之後標籤中的內容不再被更新

>
}p>
v-once
>
帶once的}p
>

其他指令：v-pre

v-pre作用：帶有這個指令的標籤中的內容不被解析，直接跳過，提高效能

**：

>
}p>
v-pre
>
帶pre的}p
>

其他指令：v-cloak

v-cloak作用：解決渲染的時候頁面內容會閃的問題

**用處：遮蓋

>
[v-cloak]
style
>
v-cloak
>
}p>

vue基本指令

Vue基本指令

Vue基本指令

Vue（一）基本指令

vue基本指令

Vue基本指令

Vue基本指令

Vue（一） 基本指令

相關推薦

Vue（一）基本指令