Vue是一款非常受歡迎的JavaScript框架，它可以幫助開發者構建高效、可靠、易于維護的web應用程序。Vue擁有一套強大的工具和組件，能夠處理各種不同的任務。下面是一些Vue中常用的代碼片段和技巧。

new Vue({
el: '#app',
data: {
message: 'Hello Vue!'
}
})

這是定義Vue實例的基本結構。el屬性指定Vue實例要管理的HTML元素的ID。data屬性包含Vue實例中的數據和狀態。在這個例子中，我們定義了一個message屬性，它的初始值是“Hello Vue!”。

Vue.component('todo-item', {
props: ['todo'],
template: '
{{ todo.text }}
'
})

組件是Vue的一個強大特性，它允許開發者將UI元素封裝到可重用的代碼塊中。這是一個創建todo-item組件的代碼片段。props屬性指定了一個從父組件傳遞下來的屬性（在這個例子中是todo），template屬性定義了組件的UI層。

v-for="item in items"
v-bind:key="item.id"

v-for是一個Vue指令，用于在UI中迭代數組或對象。在這個例子中，我們使用v-for循環迭代一個名為“items”的數組。v-bind:key屬性是必需的，它用于指定Vue如何識別這個列表中的項。

v-on:click="toggleClass"
methods: {
toggleClass () {
this.isActive = !this.isActive
}
}

v-on是Vue的一個指令，用于在用戶與UI元素交互時觸發事件。在這個例子中，我們使用v-on指令將鼠標單擊事件綁定到名為toggleClass的方法上。在這個方法中，我們簡單地將isActive屬性的值反轉。

computed: {
reversedMessage() {
return this.message.split('').reverse().join('')
}
}

計算屬性是Vue的另一個強大特性，它可以輕松地計算基于Vue實例的狀態得出的衍生狀態。在這個例子中，我們定義了一個名為reversedMessage的計算屬性，它將message屬性反轉并返回。

import Foo from './Foo.vue'
export default {
components: {
Foo
}
}

這是一段Vue組件導出代碼的片段，它導入名為Foo的組件并將其注冊到這個組件中。這使得我們可以在這個組件的模板中像使用任何其他組件一樣使用Foo。