在 Vue.js 中，主要的語法可以分為以下幾種：

插值語法 (Interpolation)

使用雙大括號 {{ }} 進行文本插值。

示例：

{{ message }}

指令語法 (Directives)

指令是特殊的標記，用于告訴Vue框架如何操作DOM。Vue提供了多種內置指令，包括：

• v-bind：用于動態地綁定一個或多個屬性，或一個組件prop到表達式。

  示例：<a v-bind:href="url">Link</a> 或簡寫為 <a :href="url">Link</a>

• v-model：用于在表單輸入和應用狀態之間創建雙向數據綁定。

  示例：<input v-model="message">

• v-on：用于監聽DOM事件。

  示例：<button v-on:click="doSomething">Click me</button> 或簡寫為 <button @click="doSomething">Click me</button>

• v-if：用于條件性地渲染元素。

  示例：<p v-if="seen">Now you see me</p>

• v-for：用于基于源數據多次渲染一個元素或模板。

  示例：<li v-for="item in items" :key="item.id">{{ item.name }}</li>

• v-slot：用于定義作用域插槽。
• v-text：更新元素的文本內容，忽略元素的子節點。
• v-html：更新元素的HTML內容。
• v-show：根據條件渲染元素，但與v-if不同，v-show始終渲染元素，只是簡單地切換CSS的display屬性。

  示例：<p v-show="ok">This will be shown or hidden</p>

• v-cloak：保持在元素上直到關聯的Vue實例被掛載。

計算屬性和偵聽器

計算屬性（computed）：用于定義基于其他數據計算得出的屬性。

示例：

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

偵聽器（watch）：用于觀察數據變化并執行相應的操作。

示例：

watch: {message(newVal, oldVal) {console.log('message changed from', oldVal, 'to', newVal);}
}

組件語法

用于定義和使用組件。

示例：

Vue.component('my-component', {template: '<div>A custom component!</div>'
});

生命周期鉤子：

用于在組件的不同生命周期階段執行代碼。

示例：

created() {console.log('Component created');
}

---

---

---