vue3常用的指令之v-bind和v-on指令用法
一、v-bind指令
一個(gè)vue2和vue3之間的不同之處：Vue2中template模板中只能有一個(gè)根元素，但是在Vue3中允許template中有多個(gè)元素。
1.v-bind的綁定基本屬性
某些屬性也希望是動(dòng)態(tài)綁定的，比如動(dòng)態(tài)綁定a元素中的href屬性。
v-bind可以綁定一個(gè)或者多個(gè)屬性值，或者向另一個(gè)組件中傳遞props值。
<template id='my-app'> <a v-bind:href="href" rel="external nofollow" rel="external nofollow" ></a> <!-- 對(duì)應(yīng)的語(yǔ)法糖 --> <a :href="href" rel="external nofollow" rel="external nofollow" ></a> </template>
v-bind 有一個(gè)對(duì)應(yīng)的語(yǔ)法糖，也就是簡(jiǎn)寫(xiě)形式，直接寫(xiě)：，使得更加簡(jiǎn)潔。
2.v-bind綁定class
1）在開(kāi)發(fā)過(guò)程中，有時(shí)候元素class也是動(dòng)態(tài)的，比如：
- 當(dāng)數(shù)據(jù)為某個(gè)狀態(tài)時(shí)候，字體顯示紅色；
- 當(dāng)數(shù)據(jù)為另一個(gè)狀態(tài)的時(shí)候，字體顯示為黑色。
2）綁定class有兩種方式
① 對(duì)象語(yǔ)法
<style>
.active{
color:red;
}
</style>
<body>
<div id="app"></div>
<template id="my-app">
<div :class="{'active':isActive}">哈哈哈哈</div>
<button @click="toggle">切換</button></button>
</template>
<script src="../js/vue.js"></script>
<script>
const App = {
template:'#my-app',
data(){
return {
isActive:true,
}
},
methods: {
toggle(){
this.isActive=!this.isActive
}
},
}
Vue.createApp(App).mount('#app');
</script>
</body>
- 可以使用單個(gè)鍵值對(duì)，這里
哈哈哈哈
其實(shí)使用的是對(duì)象形式， 語(yǔ)法為{‘active’:boolean}. - 也可以使用多個(gè)鍵值對(duì)，語(yǔ)法為{‘active’: isActive, ‘title’:true}
- 一個(gè)小細(xì)節(jié)：語(yǔ)法中的active這個(gè)類名可以不加引號(hào)，直接寫(xiě){active:true}
- 也可以將默認(rèn)的class和動(dòng)態(tài)綁定的class結(jié)合。
<div class="hader" :class="{'active':isActive}">哈哈</div>
- 可以將對(duì)象放在一個(gè)單獨(dú)的屬性中
<div :class="classObj">哈哈哈哈</div>
// data中
<script>
const App = {
template:'#my-app',
data(){
return {
isActive:true,
classObj:{
active:true,
}
}
},
methods: {
toggle(){
this.isActive=!this.isActive
}
},
}
Vue.createApp(App).mount('#app');
</script>
- 將返回的對(duì)象放在一個(gè)methods()方法中
<div :class="getClassObj()">哈哈哈哈</div>
② 數(shù)組語(yǔ)法
- 基本的寫(xiě)法
<div :class="['abc']"></div>
- 數(shù)組語(yǔ)法中可以嵌套對(duì)象語(yǔ)法
<!-- 數(shù)組語(yǔ)法中實(shí)際上是可以嵌套對(duì)象語(yǔ)法的 -->
<div :class="['abc',{active:isActive}]"></div>
3.v-bind中綁定style
1）可以利用v-bind:style綁定一些CSS內(nèi)聯(lián)樣式：
因?yàn)橐恍邮绞切枰鶕?jù)數(shù)據(jù)動(dòng)態(tài)決定的；
比如某段文字的顏色，字體大小等。
2）可以使用駝峰式(camelCase)或者短橫線分隔(kebab-case，記得用引號(hào)括起來(lái))來(lái)命名。
3）綁定style的兩種方式
① 對(duì)象語(yǔ)法
<div :style="{color:'red'}">hahhah</div>
- 上面的語(yǔ)句如果是動(dòng)態(tài)綁定，并且意思是顏色為red紅色，那么后面的red必須加上引號(hào)，不然就會(huì)認(rèn)為是一個(gè)變量，或者可以用下面的形式寫(xiě)。
<div :style="{color:color}">hahhah</div>
data(){
return {
color:'red'
}
}
- 或者也可以用拼接的形式
<div :style="{color:color，fontSize:finalFontSize+'px'}">hahhah</div>
data(){
return {
color:'red',
finalFontSize:50,
}
}
- 也可以直接都寫(xiě)成對(duì)象
<div :style="finalStyleObj">hahhah</div>
data(){
return {
finalStyleObj:{
fontSize:'30px',
fontWeight:700,
backgroundColor:'red'
}
}
}
- 可以直接放在methods中
<div :style="getFinalStyle()">hahhah</div>
methods:{
getFinalStyle(){
return {
fontSize:'30px',
fontWeight:700,
backgroundColor:'red'
}
}
}
②數(shù)組語(yǔ)法
和綁定class是類似的。
<div :style="[styleObj,style2Obj]">hhhh</div>
data(){
return {
styleObj:{
color:'red',
},
style2Obj:{
fontSize:'20px'
}
}
}
4.動(dòng)態(tài)綁定屬性
在某些情況下，比如說(shuō)自定義組件中，我們的屬性名可能也是不固定的。
1）之前所學(xué)的src、href、class、style，屬性名稱都是固定的。
2）如果屬性名稱不是固定的，那么就意味著這些東西也是可以自己定義的，格式是 :[屬性名]=‘值’。
3) 這種綁定的方式，就稱為動(dòng)態(tài)綁定屬性。
<!-- 屬性的名稱也不是動(dòng)態(tài)的 --> <div :[name]="value">哈哈哈哈</div>
data(){
return {
name:'abc',
value:'yan'
}
}
5.v-bind屬性直接綁定一個(gè)對(duì)象
如果想要將一個(gè)對(duì)象的所有屬性，綁定到元素上的所有屬性，可以直接使用v-bind綁定一個(gè)對(duì)象
最終想要的結(jié)果是下面這樣的，將一個(gè)對(duì)象中的所有屬性都綁定為元素的所有屬性。
<template id="my-app"> <div v-bind="info"></div> </template>
data(){
return {
info:{
name:'qian',
age:'18',
}
}
}
二、v-on指令
v-on在Vue中用來(lái)綁定事件監(jiān)聽(tīng)。
1.v-on的基本使用
- 縮寫(xiě)是@
- 完整寫(xiě)法：v-on：監(jiān)聽(tīng)的事件=“methods中的方法” ,例如 v-on:click=“toggle”,它的語(yǔ)法糖是@click
- 綁定其他事件
<button @mousemove="mouseMove"></button>
- 綁定一個(gè)對(duì)象，這個(gè)其實(shí)是因?yàn)榻壎ǘ鄠€(gè)事件，將它們放在一個(gè)對(duì)象中
<button v-on="{click:btnClick, mousemove:mouseMove}"></button>
2.v-on參數(shù)傳遞
1）當(dāng)通過(guò)methods中定義方法，供@click 調(diào)用的時(shí)候，如果不需要額外的參數(shù)，那么在方法的括號(hào)中可以不添加任何參數(shù)，但是在methods中的方法其實(shí)是默認(rèn)接收了一個(gè)原生事件event。
<button @click="btnClick"></button>
methods: {
btnClick(event){
console.log(event);
}
},
- 如果需要同時(shí)傳入一個(gè)參數(shù)，同時(shí)需要event時(shí)候，可以通過(guò)$event傳入事件。
<button @click="btnClick1($event,'why')">jjj</button>
methods: {
btnClick1(event,message){
console.log(event,message);
}
},
3.v-on 的修飾符
4.條件渲染
在某些情況下，需要根據(jù)當(dāng)前的條件決定某些元素或者組件是否渲染，這個(gè)時(shí)候需要進(jìn)行條件判斷。
v-if、v-else、v-else-if用于根據(jù)條件渲染某一塊內(nèi)容。
1）只有條件為true時(shí)，才會(huì)被渲染出來(lái)
2）這三個(gè)指令與JavaScript中的條件語(yǔ)句if、else、else if類似；
3）v-if的渲染原理：
v-if是惰性的；當(dāng)條件為false時(shí)，其判斷的內(nèi)容完全不會(huì)被渲染或者被銷毀掉；當(dāng)條件為true時(shí)，才會(huì)真正渲染條件塊中的內(nèi)容。
5.v-show和v-if的區(qū)別
1）用法上：v-show不支持在template標(biāo)簽上使用；v-show不可以和v-else一起使用。v-show 是通過(guò) display 來(lái)控制標(biāo)簽進(jìn)行渲染的，但是 template 標(biāo)簽在 vue 解析后是不會(huì)顯示在頁(yè)面上的，是虛擬 Dom，所以無(wú)法使用 v-show。反之 v-if 是可以使用在 template 標(biāo)簽上，因?yàn)?v-if 是條件渲染，只要滿足 v-if 后的條件就可以完成渲染。
2）本質(zhì)上：v-show元素?zé)o論是否需要顯示到瀏覽器上，它的DOM實(shí)際上都是有渲染的，只是通過(guò)CSS的display屬性來(lái)進(jìn)行切換；v-if當(dāng)條件為false時(shí)，其對(duì)應(yīng)的原生壓根就不會(huì)被渲染到DOM中。
3）開(kāi)發(fā)中如果原生需要在顯示和隱藏之間頻繁切換，就使用v-show；如果不會(huì)頻繁發(fā)生切換，就使用v-if。
總結(jié)
到此這篇關(guān)于vue3常用的指令之v-bind和v-on指令用法的文章就介紹到這了,更多相關(guān)vue3 v-bind和v-on指令內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
Django+Vue實(shí)現(xiàn)WebSocket連接的示例代碼
這篇文章主要介紹了Django+Vue實(shí)現(xiàn)WebSocket連接的示例代碼,文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2019-05-05
vue + el-form 實(shí)現(xiàn)的多層循環(huán)表單驗(yàn)證
這篇文章主要介紹了vue + el-form 實(shí)現(xiàn)的多層循環(huán)表單驗(yàn)證，幫助大家更好的理解和使用vue框架，感興趣的朋友可以了解下。2020-11-11
這篇文章主要介紹了vue項(xiàng)目打包部署到服務(wù)器的方法示例，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2018-08-08
Vue中實(shí)現(xiàn)動(dòng)態(tài)右鍵菜單的示例代碼
在前端開(kāi)發(fā)中,實(shí)現(xiàn)自定義右鍵菜單能夠?yàn)橛脩籼峁└喙δ苓x項(xiàng),本文就來(lái)介紹了Vue中實(shí)現(xiàn)動(dòng)態(tài)右鍵菜單的示例代碼,感興趣的可以了解一下2024-11-11
這篇文章主要介紹了Vue自定義詢問(wèn)彈框和輸入彈框,本文通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2023-06-06
vue中$set的使用(結(jié)合在實(shí)際應(yīng)用中遇到的坑)
這篇文章主要介紹了vue中$set的使用(結(jié)合在實(shí)際應(yīng)用中遇到的坑),小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2018-07-07
vue調(diào)用本地緩存方式(監(jiān)視數(shù)據(jù)變更)
這篇文章主要介紹了vue調(diào)用本地緩存方式(監(jiān)視數(shù)據(jù)變更)，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-04-04
Vue.js是當(dāng)下很火的一個(gè)JavaScript MVVM庫(kù)，它是以數(shù)據(jù)驅(qū)動(dòng)和組件化的思想構(gòu)建的。相比于Angular.js，Vue.js提供了更加簡(jiǎn)潔、更易于理解的API，使得我們能夠快速地上手并使用Vue.js。下面這篇文章主要給大家介紹了關(guān)于vue.js使用的相關(guān)總結(jié),需要的朋友可以參考借鑒。2017-02-02
Vue實(shí)現(xiàn)在線預(yù)覽pdf文件功能（利用pdf.js/iframe/embed）
項(xiàng)目要求需要預(yù)覽pdf文件,網(wǎng)上找了很久，發(fā)現(xiàn)pdf.js的效果,這篇文章主要給大家介紹了關(guān)于Vue實(shí)現(xiàn)在線預(yù)覽pdf文件功能,主要利用pdf.js/iframe/embed來(lái)實(shí)現(xiàn)的,需要的朋友可以參考下2021-06-06
這篇文章主要介紹了Vue.js單向綁定和雙向綁定,結(jié)合實(shí)例形式分析了vue.js單向綁定與雙向綁定相關(guān)原理、實(shí)現(xiàn)方法及操作技巧,需要的朋友可以參考下2018-08-08