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