寫給後端大忙人看的vue入門指南

一、Vue啟動

要開始使用Vue.js，你需要先安裝Node.js和npm（Node包管理器）。一旦你安裝了Node.js，npm也會隨之安裝。接下來，你可以透過npm安裝Vue CLI（Vue的命令列工具），它是官方提供的腳手架工具，用於快速建立Vue計畫。

npm install -g @vue/cli


使用Vue CLI，你可以輕松地建立一個新的Vue計畫：

vue create my-project


然後，你可以進入計畫目錄並啟動開發伺服器：

cd my-project
npm run serve


這將啟動一個本地開發伺服器，並監聽埠（通常是8080）。你可以在瀏覽器中開啟 http://localhost:8080 來檢視你的Vue套用。

二、Vue的基礎使用

Vue的核心是一個響應式的數據繫結系統。這意味著數據和DOM是保持同步的，當數據改變時，檢視也會自動更新。

1. 建立Vue例項

在HTML檔中，你可以透過Vue建構函式來建立一個Vue例項，並將其掛載到一個DOM元素上。

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

2. 樣版語法

Vue使用基於HTML的樣版語法，允許你聲明式地將已存在的DOM繫結至底層Vue例項的數據。

三、數據操作

在Vue例項中， data 物件是一個函式，它返回一個物件，該物件包含了套用的初始數據。Vue將 data 物件中的所有內容轉換為getter/setter，從而讓你的數據具有「響應式」特性。

new Vue({
el: '#app',
data: function() {
return {
message: 'Hello Vue!',
counter: 0
}
},
methods: {
increment: function() {
this.counter++
}
}
})


在樣版中，你可以透過 {{ }} 插值來顯示數據，透過 v-on 指令來繫結事件處理常式，修改數據。

四、指令操作

Vue指令是以 v- 為字首的特殊內容。指令內容的值預期是單一JavaScript運算式（ v-for 是例外情況，稍後我們會講到）。指令的職責是，當其運算式的值改變時將其產生的連帶影響，響應式地作用於其繫結的DOM。

1. v-bind ：用於內容繫結，可以簡寫為 : 。

<divv-bind:id="dynamicId"></div>
<!-- 簡寫 -->
<div:id="dynamicId"></div>


2. v-on ：用於監聽DOM事件，可以簡寫為 @ 。

<buttonv-on:click="increment">Increment</button>
<!-- 簡寫 -->
<button @click="increment">Increment</button>


3. v-if 、 v-else-if 、 v-else ：用於條件渲染。

<divv-if="type === 'A'">Type A</div>
<divv-else-if="type === 'B'">Type B</div>
<divv-else>Other Type</div>


4. v-for ：用於列表渲染。

<divv-for="item in items":key="item.id">
{{ item.text }}
</div>


Vue的指令提供了豐富的功能，讓你可以輕松地操作DOM和數據。

五、總結

透過以上的介紹，你應該對Vue的啟動、基礎使用、數據操作和指令操作有了初步的了解。Vue是一個強大而靈活的框架，它的響應式數據繫結和元件化系統使得前端開發變得更加簡單和高效。繼續學習和實踐Vue，你會發現它還有更多的功能和用法等待你去探索。