vue中常用方法的用法匯總
Vue 方法及其詳細(xì)說明
1.data(): 用于定義組件的數(shù)據(jù)對象。數(shù)據(jù)對象可以包含任意類型的屬性，如字符串、數(shù)字、布爾值、數(shù)組、對象等。
new Vue({
el: '#app',
data: {
message: 'Hello Vue!'
}
})
2.methods: 用于定義組件的方法。方法可以包含任意數(shù)量的參數(shù)，并在模板中通過 v-on 指令或簡寫為 @ 來調(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é)果會被緩存，只有在依賴的數(shù)據(jù)發(fā)生變化時才會重新計(jì)算。
export default {
data() {
return {
firstName: 'John',
lastName: 'Doe'
}
},
computed: {
fullName() {
return this.firstName + ' ' + this.lastName;
}
}
}
4.watch: 用于監(jiān)聽數(shù)據(jù)的變化。當(dāng)指定的數(shù)據(jù)發(fā)生變化時，會執(zhí)行一個函數(shù)。可以使用 immediate 選項(xiàng)來指定是否立即執(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)聽器等。
export default {
mounted() {
console.log('Component mounted');
}
}
6.beforeDestroy(): 在組件銷毀之前執(zhí)行的生命周期鉤子?？梢栽诖颂巿?zhí)行一些清理操作，如取消事件監(jiān)聽器、清除定時器等。
export default {
beforeDestroy() {
console.log('Component about to be destroyed');
}
}
7.new Vue(): 創(chuàng)建一個新的 Vue 實(shí)例。
const app = new Vue({
el: '#app',
data: {
message: 'Hello Vue!'
}
})
8.data: 定義組件的數(shù)據(jù)對象。
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)聽數(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: 在組件銷毀之前執(zhí)行的生命周期鉤子。
beforeDestroy() {
console.log('Component about to be destroyed');
}
14.created: 在組件創(chuàng)建完成后立即執(zhí)行的生命周期鉤子。
created() {
console.log('Component created');
}
15.updated: 在組件更新時執(zhí)行的生命周期鉤子。
updated() {
console.log('Component updated');
}
16.destroyed: 在組件銷毀時執(zhí)行的生命周期鉤子。
destroyed() {
console.log('Component destroyed');
}
17.props: 定義組件的屬性。
props: {
message: String
}
18.components: 注冊全局組件。
components: {
MyComponent: { /* ... */ }
}
19.directives: 注冊自定義指令。
directives: {
focus: { /* ... */ }
}
20.filters: 注冊自定義過濾器。
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)建一個響應(yīng)式的引用。
const myRef = ref('Hello Vue!')
25.nextTick: 在下一個 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: 在組件更新時執(zhí)行的生命周期鉤子。
onUpdated(() => {
console.log('Component updated');
})
28.onBeforeUpdate: 在組件更新前執(zhí)行的生命周期鉤子。
onBeforeUpdate(() => {
console.log('Component about to update');
})
29.onUnmounted: 在組件卸載時執(zhí)行的生命周期鉤子。
onUnmounted(() => {
console.log('Component unmounted');
})
30.onActivated: 在組件被激活時執(zhí)行的生命周期鉤子。
onActivated(() => {
console.log('Component activated');
})
31.onDeactivated: 在組件被停用時執(zhí)行的生命周期鉤子。
onDeactivated(() => {
console.log('Component deactivated');
})
32.onErrorCaptured: 捕獲錯誤并處理。
onErrorCaptured(error, instance, info) {
console.log('Error captured:', error);
}
33.onSuspended: 在組件暫停時執(zhí)行的生命周期鉤子。
onSuspended(() => {
console.log('Component suspended');
})
34.onReactivated: 在組件恢復(fù)時執(zhí)行的生命周期鉤子。
onReactivated(() => {
console.log('Component reactivated');
})
35.onRendered: 在組件渲染完成后執(zhí)行的生命周期鉤子。
onRendered(() => {
console.log('Component rendered');
})
36.onDestroyed: 在組件銷毀時執(zhí)行的生命周期鉤子。
onDestroyed(() => {
console.log('Component destroyed');
})
頁面渲染
Vue.js是一個流行的JavaScript框架，用于構(gòu)建用戶界面。以下是一些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ù)條件判斷來決定是否渲染元素。
<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)聽事件，用于監(jiān)聽DOM事件并在觸發(fā)時執(zhí)行相應(yīng)的JavaScript代碼。
<button v-on:click="increment">Increment</button>
5.v-bind: 綁定屬性，用于動態(tài)地綁定一個或多個屬性到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á)式的值來切換元素的display屬性。
<div v-show="isShown">This is shown if isShown is true.</div>
以上就是vue中常用方法的用法匯總的詳細(xì)內(nèi)容，更多關(guān)于vue常用方法的資料請關(guān)注腳本之家其它相關(guān)文章！
相關(guān)文章
Vue項(xiàng)目添加動態(tài)瀏覽器頭部title的方法
這篇文章主要介紹了Vue項(xiàng)目添加動態(tài)瀏覽器頭部title的方法，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-07-07
Vue-Cropper是一個基于Vue.js的圖像剪切組件,封裝了Cropper庫的功能,使其更易于在Vue.js項(xiàng)目中集成和使用,它可以與Vue的響應(yīng)式數(shù)據(jù)綁定,支持多種圖像格式和剪切形狀,提供了一些額外的功能,本文介紹在vue3中vue-cropper的初使用,感興趣的朋友一起看看吧2025-03-03
解決vue項(xiàng)目獲取dom元素寬高總是不準(zhǔn)確問題
這篇文章主要介紹了解決vue項(xiàng)目獲取dom元素寬高總是不準(zhǔn)確問題，具有很好的參考價(jià)值，希望對大家有所幫助。一起跟隨小編過來看看吧2020-07-07
這篇文章主要介紹了vue中如何將日期轉(zhuǎn)換為指定的格式，具有很好的參考價(jià)值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-10-10
在Vue3項(xiàng)目中關(guān)閉ESLint的完整步驟
實(shí)際上在學(xué)習(xí)過程中,你會發(fā)現(xiàn)eslint檢查特別討厭,這個時候我們需要關(guān)閉掉eslint檢查,下面這篇文章主要給大家介紹了關(guān)于在Vue3項(xiàng)目中關(guān)閉ESLint的完整步驟,需要的朋友可以參考下2023-11-11
這篇文章主要為大家詳細(xì)介紹了vue監(jiān)聽用戶輸入和點(diǎn)擊功能，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2019-09-09
這篇文章主要介紹了vuex的使用及持久化state的方式詳解,小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-01-01
Vue Extends 擴(kuò)展選項(xiàng)用法完整實(shí)例
這篇文章主要介紹了Vue Extends 擴(kuò)展選項(xiàng)用法,結(jié)合完整實(shí)例形式分析了Vue Extends 擴(kuò)展選項(xiàng)相關(guān)使用技巧與操作注意事項(xiàng),需要的朋友可以參考下2019-09-09
vue?模板循環(huán)繪制多行上傳文件功能實(shí)現(xiàn)
這篇文章主要為大家介紹了vue?模板循環(huán)繪制多行上傳文件功能實(shí)現(xiàn)詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2023-07-07
Vue ElementUI this.$confirm async await封
這篇文章主要介紹了Vue ElementUI this.$confirm async await封裝方式，具有很好的參考價(jià)值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-09-09