vue中常用方法的用法匯總
Vue 方法及其詳細(xì)說(shuō)明
1.data(): 用于定義組件的數(shù)據(jù)對(duì)象。數(shù)據(jù)對(duì)象可以包含任意類(lèi)型的屬性，如字符串、數(shù)字、布爾值、數(shù)組、對(duì)象等。
new Vue({
el: '#app',
data: {
message: 'Hello Vue!'
}
})
2.methods: 用于定義組件的方法。方法可以包含任意數(shù)量的參數(shù)，并在模板中通過(guò) v-on 指令或簡(jiǎn)寫(xiě)為 @ 來(lái)調(diào)用。
<template>
<div>
<p>{{ message }}</p>
<button @click="showMessage">點(diǎn)擊顯示消息</button>
</div>
</template>
<script>
export default {
data() {
return {
message: 'Hello Vue!'
}
},
methods: {
showMessage() {
alert(this.message);
}
}
}
</script>
3.computed: 用于定義計(jì)算屬性。計(jì)算屬性是基于其他數(shù)據(jù)屬性進(jìn)行計(jì)算得到的，它們的結(jié)果會(huì)被緩存，只有在依賴(lài)的數(shù)據(jù)發(fā)生變化時(shí)才會(huì)重新計(jì)算。
export default {
data() {
return {
firstName: 'John',
lastName: 'Doe'
}
},
computed: {
fullName() {
return this.firstName + ' ' + this.lastName;
}
}
}
4.watch: 用于監(jiān)聽(tīng)數(shù)據(jù)的變化。當(dāng)指定的數(shù)據(jù)發(fā)生變化時(shí)，會(huì)執(zhí)行一個(gè)函數(shù)?？梢允褂?immediate 選項(xiàng)來(lái)指定是否立即執(zhí)行回調(diào)函數(shù)。
export default {
data() {
return {
message: 'Hello Vue!'
}
},
watch: {
message(newVal, oldVal) {
console.log('message changed from', oldVal, 'to', newVal);
}
}
}
5.mounted(): 在組件掛載到 DOM 后執(zhí)行的生命周期鉤子?？梢栽诖颂巿?zhí)行一些初始化操作，如獲取數(shù)據(jù)、設(shè)置事件監(jiān)聽(tīng)器等。
export default {
mounted() {
console.log('Component mounted');
}
}
6.beforeDestroy(): 在組件銷(xiāo)毀之前執(zhí)行的生命周期鉤子?？梢栽诖颂巿?zhí)行一些清理操作，如取消事件監(jiān)聽(tīng)器、清除定時(shí)器等。
export default {
beforeDestroy() {
console.log('Component about to be destroyed');
}
}
7.new Vue(): 創(chuàng)建一個(gè)新的 Vue 實(shí)例。
const app = new Vue({
el: '#app',
data: {
message: 'Hello Vue!'
}
})
8.data: 定義組件的數(shù)據(jù)對(duì)象。
data() {
return {
message: 'Hello Vue!'
}
}
9.methods: 定義組件的方法。
methods: {
showMessage() {
alert(this.message);
}
}
10.computed: 定義計(jì)算屬性。
computed: {
reversedMessage() {
return this.message.split('').reverse().join('');
}
}
11.watch: 監(jiān)聽(tīng)數(shù)據(jù)的變化。
watch: {
message(newVal, oldVal) {
console.log('message changed from', oldVal, 'to', newVal);
}
}
12.mounted: 在組件掛載到 DOM 后執(zhí)行的生命周期鉤子。
mounted() {
console.log('Component mounted');
}
13.beforeDestroy: 在組件銷(xiāo)毀之前執(zhí)行的生命周期鉤子。
beforeDestroy() {
console.log('Component about to be destroyed');
}
14.created: 在組件創(chuàng)建完成后立即執(zhí)行的生命周期鉤子。
created() {
console.log('Component created');
}
15.updated: 在組件更新時(shí)執(zhí)行的生命周期鉤子。
updated() {
console.log('Component updated');
}
16.destroyed: 在組件銷(xiāo)毀時(shí)執(zhí)行的生命周期鉤子。
destroyed() {
console.log('Component destroyed');
}
17.props: 定義組件的屬性。
props: {
message: String
}
18.components: 注冊(cè)全局組件。
components: {
MyComponent: { /* ... */ }
}
19.directives: 注冊(cè)自定義指令。
directives: {
focus: { /* ... */ }
}
20.filters: 注冊(cè)自定義過(guò)濾器。
filters: {
reverse: function (value) {
return value.split('').reverse().join('');
}
}
21.mixins: 混入其他選項(xiàng)。
mixins: [/* ... */]
22.provide: 向子組件提供數(shù)據(jù)。
provide() {
return {
message: 'Hello from parent component'
}
}
23.inject: 從父組件接收數(shù)據(jù)。
inject: ['message']
24.ref: 創(chuàng)建一個(gè)響應(yīng)式的引用。
const myRef = ref('Hello Vue!')
25.nextTick: 在下一個(gè) DOM 更新周期之后執(zhí)行回調(diào)函數(shù)。
nextTick(() => {
console.log('This will run after the next DOM update cycle');
})
26.onMounted: 在組件掛載到 DOM 后立即執(zhí)行的生命周期鉤子。
onMounted(() => {
console.log('Component mounted');
})
27.onUpdated: 在組件更新時(shí)執(zhí)行的生命周期鉤子。
onUpdated(() => {
console.log('Component updated');
})
28.onBeforeUpdate: 在組件更新前執(zhí)行的生命周期鉤子。
onBeforeUpdate(() => {
console.log('Component about to update');
})
29.onUnmounted: 在組件卸載時(shí)執(zhí)行的生命周期鉤子。
onUnmounted(() => {
console.log('Component unmounted');
})
30.onActivated: 在組件被激活時(shí)執(zhí)行的生命周期鉤子。
onActivated(() => {
console.log('Component activated');
})
31.onDeactivated: 在組件被停用時(shí)執(zhí)行的生命周期鉤子。
onDeactivated(() => {
console.log('Component deactivated');
})
32.onErrorCaptured: 捕獲錯(cuò)誤并處理。
onErrorCaptured(error, instance, info) {
console.log('Error captured:', error);
}
33.onSuspended: 在組件暫停時(shí)執(zhí)行的生命周期鉤子。
onSuspended(() => {
console.log('Component suspended');
})
34.onReactivated: 在組件恢復(fù)時(shí)執(zhí)行的生命周期鉤子。
onReactivated(() => {
console.log('Component reactivated');
})
35.onRendered: 在組件渲染完成后執(zhí)行的生命周期鉤子。
onRendered(() => {
console.log('Component rendered');
})
36.onDestroyed: 在組件銷(xiāo)毀時(shí)執(zhí)行的生命周期鉤子。
onDestroyed(() => {
console.log('Component destroyed');
})
頁(yè)面渲染
Vue.js是一個(gè)流行的JavaScript框架，用于構(gòu)建用戶(hù)界面。以下是一些Vue.js的常用方法和代碼示例：
1.v-model: 雙向數(shù)據(jù)綁定，將表單元素的值與Vue實(shí)例的數(shù)據(jù)屬性進(jìn)行綁定。
<input v-model="message" type="text">
2.v-if、v-else-if、v-else: 條件渲染，根據(jù)條件判斷來(lái)決定是否渲染元素。
<div v-if="isShown"> <p>This is shown if isShown is true.</p> </div> <div v-else-if="isHidden"> <p>This is shown if isHidden is true and isShown is false.</p> </div> <div v-else> <p>This is shown if isShown and isHidden are false.</p> </div>
3.v-for: 列表渲染，用于在模板中渲染列表數(shù)據(jù)。
<ul>
<li v-for="item in items" :key="item.id">{{ item.name }}</li>
</ul>
4.v-on: 監(jiān)聽(tīng)事件，用于監(jiān)聽(tīng)DOM事件并在觸發(fā)時(shí)執(zhí)行相應(yīng)的JavaScript代碼。
<button v-on:click="increment">Increment</button>
5.v-bind: 綁定屬性，用于動(dòng)態(tài)地綁定一個(gè)或多個(gè)屬性到Vue實(shí)例的數(shù)據(jù)屬性上。
<div v-bind:class="{ active: isActive }"></div>
6.v-text: 更新元素的textContent。
<p v-text="message"></p>
7.v-html: 更新元素的innerHTML。
<div v-html="content"></div>
8.v-show: 根據(jù)表達(dá)式的值來(lái)切換元素的display屬性。
<div v-show="isShown">This is shown if isShown is true.</div>
以上就是vue中常用方法的用法匯總的詳細(xì)內(nèi)容，更多關(guān)于vue常用方法的資料請(qǐng)關(guān)注腳本之家其它相關(guān)文章！
相關(guān)文章
這篇文章主要介紹了使用vant?自定義彈框全過(guò)程，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-05-05
在Vue開(kāi)發(fā)過(guò)程中,常常會(huì)碰到這樣一種情形：從頁(yè)面A跳轉(zhuǎn)到頁(yè)面B后,點(diǎn)擊瀏覽器回退按鈕返回頁(yè)面A時(shí),頁(yè)面數(shù)據(jù)卻未刷新,依舊保持之前的狀態(tài),這一情況可能會(huì)給用戶(hù)帶來(lái)困擾,對(duì)用戶(hù)體驗(yàn)產(chǎn)生不良影響,本文將深入探討如何妥善處理此類(lèi)問(wèn)題,以保證回退頁(yè)面時(shí)數(shù)據(jù)能夠準(zhǔn)確更新2024-11-11
這篇文章主要介紹了vue如何使用原生video標(biāo)簽播放視頻問(wèn)題,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2024-03-03
這篇文章主要給大家介紹了關(guān)于vue三種模糊查詢(xún)方式的相關(guān)資料,在vue中模糊搜索主要是用computed屬性實(shí)現(xiàn),文中通過(guò)實(shí)例代碼介紹的非常詳細(xì),需要的朋友可以參考下2023-06-06
vue實(shí)現(xiàn)評(píng)價(jià)星星功能
這篇文章主要為大家詳細(xì)介紹了vue實(shí)現(xiàn)評(píng)價(jià)星星功能，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2020-06-06
element的el-date-picker組件實(shí)現(xiàn)只顯示年月日時(shí)分效果(不顯示秒)
最近遇到這樣的需求使用element的el-date-picker組件,只顯示時(shí)分,不顯示秒,下面小編給大家分享element的el-date-picker組件實(shí)現(xiàn)只顯示年月日時(shí)分效果,感興趣的朋友一起看看吧2024-08-08
Vue el使用el-checkbox-group復(fù)選框進(jìn)行單選框方式
這篇文章主要介紹了Vue el使用el-checkbox-group復(fù)選框進(jìn)行單選框方式,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2023-10-10
Vue3在css中使用v-bind綁定js/ts變量(在scss和less中使用方式)
v-bind是Vue.js中的一個(gè)核心指令,用于在Vue組件或DOM元素上綁定數(shù)據(jù)屬性,下面這篇文章主要給大家介紹了關(guān)于Vue3在css中使用v-bind綁定js/ts變量的相關(guān)資料,也可以在scss和less中使用方式,需要的朋友可以參考下2024-04-04
Vue組件庫(kù)Element-常見(jiàn)組件表格示例代碼
對(duì)于Element組件的使用,最主要的就是明確自己想要達(dá)到的效果,從官網(wǎng)中將對(duì)應(yīng)代碼復(fù)制粘貼即可,最重要的是要讀懂不同組件官網(wǎng)中提供的文檔,以便實(shí)現(xiàn)自己想要的效果,本文給大家介紹Vue組件庫(kù)Element-常見(jiàn)組件表格,感興趣的朋友一起看看吧2023-10-10
關(guān)于應(yīng)用UI組件的移動(dòng)端適配方式
這篇文章主要介紹了關(guān)于應(yīng)用UI組件的移動(dòng)端適配方式，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-09-09