快捷導(dǎo)航

vue中常用方法的用法匯總

更新時間：2023年11月10日 09:35:15 作者：一花一world

Vue.js?是一個用于構(gòu)建用戶界面的漸進(jìn)式框架,本文主要為大家整理了一些常用的?Vue?方法及其詳細(xì)說明和代碼示例,有需要的小伙伴可以參考一下

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">點擊顯示消息</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      message: 'Hello Vue!'
    }
  },
  methods: {
    showMessage() {
      alert(this.message);
    }
  }
}
</script>

3.computed: 用于定義計算屬性。計算屬性是基于其他數(shù)據(jù)屬性進(jìn)行計算得到的，它們的結(jié)果會被緩存，只有在依賴的數(shù)據(jù)發(fā)生變化時才會重新計算。

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 選項來指定是否立即執(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 實例。

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: 定義計算屬性。

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: 混入其他選項。

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ù)據(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ù)據(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)文章！

您可能感興趣的文章:

欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

vue中常用方法的用法匯總

目錄

Vue 方法及其詳細(xì)說明

頁面渲染

相關(guān)文章

最新評論

大家感興趣的內(nèi)容

最近更新的內(nèi)容

常用在線小工具