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)寫形式，直接寫：，使得更加簡(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)，直接寫{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ǔ)法
- 基本的寫法
<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è)變量，或者可以用下面的形式寫。
<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,
}
}
- 也可以直接都寫成對(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的基本使用
- 縮寫是@
- 完整寫法：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)文章
這篇文章主要介紹了vue將數(shù)字轉(zhuǎn)為中文大寫金額方式，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-07-07
Vue + Vite項(xiàng)目通過(guò)/dist子路徑訪問(wèn)首頁(yè)空白問(wèn)題的完整分析與解決方案
在前端工程化實(shí)踐中,將Vue應(yīng)用構(gòu)建后部署到 Nginx是一件再常見(jiàn)不過(guò)的事情,然而,當(dāng)項(xiàng)目需要以子路徑形式部署時(shí),卻經(jīng)常會(huì)遇到頁(yè)面能訪問(wèn),但首頁(yè)內(nèi)容為空白,本文將圍繞通過(guò)域名/dist/訪問(wèn) Vue+Vite項(xiàng)目首頁(yè)空白這一典型問(wèn)題,并給出一套完整、可復(fù)用的解決方案2026-01-01
props 主要用于父組件向子組件通信,再父組件中通過(guò)使用:msg='msg'綁定需要傳給子組件的屬性值,然后再在子組件中用props接收該屬性值,這篇文章主要介紹了vue3的組件通信&v-model使用,需要的朋友可以參考下2024-05-05
這篇文章主要介紹了Vue 的 v-model用法實(shí)例，幫助大家更好的理解和使用vue，感興趣的朋友可以了解下2020-11-11
vue 父組件通過(guò)v-model接收子組件的值的代碼
這篇文章主要介紹了vue 父組件通過(guò)v-model接收子組件的值的代碼,代碼簡(jiǎn)單易懂，非常不錯(cuò)，具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2019-10-10
Vue this.$router.push(參數(shù))實(shí)現(xiàn)頁(yè)面跳轉(zhuǎn)操作
這篇文章主要介紹了Vue this.$router.push(參數(shù))實(shí)現(xiàn)頁(yè)面跳轉(zhuǎn)操作，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2020-09-09
vue實(shí)現(xiàn)元素拖動(dòng)并互換位置的實(shí)現(xiàn)代碼
在使用Vue的場(chǎng)景下,需要實(shí)現(xiàn)對(duì)元素進(jìn)行拖動(dòng)交換位置,接下來(lái)通過(guò)本文給大家介紹vue實(shí)現(xiàn)元素拖動(dòng)并互換位置的實(shí)現(xiàn)代碼,需要的朋友可以參考下2023-09-09
vue3+three.js的理解與簡(jiǎn)單使用示例代碼
Three.js是一個(gè)基于WebGL的開(kāi)源JavaScript?3D引擎,它簡(jiǎn)化了Web?3D開(kāi)發(fā)流程,讓開(kāi)發(fā)者能夠輕松創(chuàng)建3D場(chǎng)景、動(dòng)畫和交互體驗(yàn),這篇文章主要介紹了vue3+three.js理解與簡(jiǎn)單使用的相關(guān)資料,需要的朋友可以參考下2026-02-02
vue mixins組件復(fù)用的幾種方式（小結(jié)）
這篇文章主要介紹了vue mixins組件復(fù)用的幾種方式（小結(jié)）,vue中提供了一種混合機(jī)制mixins，用來(lái)更高效的實(shí)現(xiàn)組件內(nèi)容的復(fù)用,有興趣的可以了解一下2017-09-09
這篇文章主要為大家詳細(xì)介紹了Vue異步加載about組件的相關(guān)方法，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2017-10-10