Vue.js 是一個流行的前端框架，它允許我們以聲明式的方式將 DOM 綁定至底層 Vue 實例的數據。在 Vue.js 中，基礎語法主要包括數據綁定、指令、計算屬性和偵聽器等。下面我們將詳細介紹 Vue.js 的基礎語法。

一、數據綁定

Vue.js 使用了基于 HTML 的模板語法，允許你以聲明式的方式將已渲染的 DOM 綁定至底層 Vue 實例的數據。所有數據綁定都以 "v-" 開頭，這被稱為指令。例如，我們可以使用 v-bind 指令來綁定 HTML 屬性的值到 Vue 實例的數據：

<div id="app">
  <p v-bind:title="message">鼠標懸停查看綁定的消息</p>
</div>

<script>
new Vue({
  el: '#app',
  data: {
    message: '這是一條綁定的消息'
  }
})
</script>

在上面的例子中，我們創建了一個 Vue 實例，并將其綁定到 id 為 "app" 的元素上。然后，我們使用 v-bind 指令將 <p> 元素的 title 屬性綁定到 Vue 實例的 message 數據屬性上。當你將鼠標懸停在 <p> 元素上時，將顯示綁定的消息。

二、插值表達式

除了數據綁定外，Vue.js 還提供了插值表達式，允許我們將數據插入到 HTML 中。插值表達式使用雙大括號 {{ }} 語法。例如：

<div id="app">
  <p>{{ message }}</p>
</div>

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

在上面的例子中，我們將 message 數據屬性插入到 <p> 元素中。當 Vue 實例創建后，{{ message }} 將被替換為 "Hello, Vue!"。

三、指令

Vue.js 提供了許多內置指令，用于操作 DOM、綁定事件等。除了前面提到的 v-bind 指令外，還有一些常用的指令，如 v-if、v-for 和 v-on。

• v-if 指令用于條件性地渲染元素。如果指令的表達式返回真值，那么元素就會被渲染；否則，元素將不會被渲染。
• v-for 指令用于循環渲染元素列表。你可以使用它來遍歷數組或對象，并為每個元素生成一個模板的副本。
• v-on 指令用于在元素上綁定事件監聽器。你可以使用它來監聽 DOM 事件，如點擊、輸入等，并在事件觸發時執行相應的 JavaScript 代碼。

四、計算屬性和偵聽器

Vue.js 還提供了計算屬性和偵聽器功能，用于在數據變化時執行特定的邏輯。計算屬性是基于它們的依賴進行緩存的，只有在它的相關依賴發生改變時才會重新求值。而偵聽器則允許你在數據變化時執行異步或開銷較大的操作。

五、總結

Vue.js 的基礎語法包括數據綁定、插值表達式、指令以及計算屬性和偵聽器等功能。這些功能使得 Vue.js 成為一個強大而靈活的前端框架，能夠幫助開發者高效地構建交互式 Web 應用程序。通過學習和掌握這些基礎語法，你將能夠利用 Vue.js 構建出功能豐富、性能優越的 Web 應用程序。