Vue.js
Vue 指令
1. v-text
-
v-text指令的作用是:設(shè)置標簽的內(nèi)容(textContent) - 默認寫法會替換全部內(nèi)容蚤霞，使用差值表達式
{{}}可以替換指定內(nèi)容 - 內(nèi)部支持寫表達式
設(shè)置標簽的文本值(textContent)
語法：
<div id="app">
<h2 v-text="message+'!'"></h2>
<h2>廣州{{ message+"!" }}</h2>
</div>
var app = new Vue({
el:"#app",
data:{
message:"體育館"
}
})
2. v-html
設(shè)置標簽的innerHTML
-
v-html指令的作用是：設(shè)置元素的innerHTML - 內(nèi)容中有
HTML結(jié)構(gòu)會被解析為標簽 -
v-text指令無論內(nèi)容是什么婿着，只會解析為文本 - 解析文本使用
v-text,需要解析html結(jié)構(gòu)使用v-html
<div id="app">
<p v-html="content"></p>
</div>
var app = new Vue({
el:"#app",
data:{
content:"<a href='#'>Bing</a>"
}
})
3. v-on
為元素綁定事件
-
v-on指令的作用是:為元素綁定事件 - 事件名不需要寫
on - 指令可以簡寫為
@ - 綁定的方法定義在
methods屬性中 - 方法的內(nèi)部通過
this關(guān)鍵字可以訪問定義在data中數(shù)據(jù)
<div id="app">
<input type="button" value="事件綁定" v-on:click="dolt">
<input type="button" value="事件綁定" v-on:monseenter="dolt">
<input type="button" value="事件綁定" v-on:dblclick="dolt">
<input type="button" value="事件綁定" @dblclick="dolt">
</div>
var app = new Vue({
el:'#app',
methods:{
dolt:function(){
//邏輯
}
}
})
補充：
傳遞自定義參數(shù)您访，事件修飾符
<div id="app">
<input type="button" @click="doIt(p1,p2)"/>
<input type="text" @click.enter="sayHi"/>
</div>
var app = new Vue({
el:"#app",
methods:{
doIt:function(p1,p2){},
sayHi:function(){}
}
})
- 事件綁定胡方法寫成函數(shù)調(diào)用的形式誊酌，可以傳入自定義參數(shù)
- 定義方法時需要定義形參來接收傳入的實參
- 事件的后面跟上
.修飾符可以對事件進行限制 -
.enter可以限制觸發(fā)的按鍵為回車
4. v-show
-
v-show指令的作用是:根據(jù)真假切換元素的顯示狀態(tài) - 原理是修改元素的
display,實現(xiàn)顯示隱藏 - 指令后面的內(nèi)容砖瞧，最終都會解析為布爾值
- 值為
true元素顯示参袱，值為false元素隱藏 - 數(shù)據(jù)改變之后代兵，對應元素的顯示狀態(tài)會同步更新
<div id="app">
<img src="地址" v-show="true">
<img src="地址" v-show="isShow">
<img src="地址" v-show="age>=18">
</div>
var app = new Vue({
el:"#app",
isShow:false,
age:16
})
5. v-if
根據(jù)表達值的真假相味，切換元素的顯示和隱藏(操縱dom元素)
-
v-if指令的作用是：根據(jù)表達式的真假切換元素的顯示狀態(tài) - 本質(zhì)是通過操縱
dom元素來切換顯示狀態(tài) - 表達式的值為
true,元素存在于dom樹中拾积，為false，從dom樹中移除 - 頻繁的切換使用
v-show,反之使用v-if,前者的切換消耗小
<div id="app">
<p v-if="true">我是一個P標簽</p>
<p v-if="isShow">我是一個P標簽</p>
<p v-if="表達式">我是一個P標簽</p>
</div>
var app = new Vue({
el:"#app",
data:{
isShow:false
}
})
7. v-bind
設(shè)置元素的屬性(比如:src,title,class)
-
v-bind指令的作用是：為元素綁定屬性 - 完整的寫法是
v-bind:屬性名 - 簡寫的話可以直接省略
v-bind,只保留:屬性名 - 需要動態(tài)的增刪
class建議使用對象的方式
<div id="app">
<img v-bind:src="imageSrc">
<img v-bind:title="imageTitle+'!!!'">
<img v-bind:class="isActive?'active':''">
<img v-bind:class="{active:isActive}">
</div>
簡寫：
<div id="app">
<img :src="imgSrc">
<img :title="imgtitle+'!!!'">
<img :class="isActive?'active':''">
<img :class="{active:isActive}">
</div>
var app = new Vue({
el:"#app",
imgSrc:"圖片地址",
imageTitle:"Programmer",
isActive:false
})
8. v-for
根據(jù)數(shù)據(jù)生成列表結(jié)構(gòu)
-
v-for指令的作用是：根據(jù)數(shù)據(jù)生成列表結(jié)構(gòu) - 數(shù)組經(jīng)常和
v-for結(jié)合使用 - 語法是
(item,index) in 數(shù)據(jù) -
item和index可以結(jié)合其他指令一起使用 - 數(shù)組長度的更新會同步到頁面上丰涉，是響應式的
<div id="app">
<ul>
<li v-for="(item,index) in arr" :title="item">
{{ index }}{{ item }}
</li>
<li v-for="(item,index) in objArr">
{{ item.name }}
</li>
</ul>
</div>
var app = new Vue({
el:"#app",
data:{
arr:[1,2,3,4,5],
objArr:[
{name:"jack"},
{name:"rose"}
]
}
})
9. v-model
獲取和設(shè)置表單元素的值(雙向數(shù)據(jù)綁定)
-
v-model指令的作用是便捷的設(shè)置和獲取表單元素的值 - 綁定的數(shù)據(jù)會和表單元素值相關(guān)聯(lián)
- 綁定的數(shù)據(jù) 表單元素的值
<div id="app">
<input type="text" v-model="message"/>
</div>
var app = new Vue({
el:"#app",
data:{
message:"programmer"
}
})
