前端框架

漸進式框架- Vue.js

前後端分離開發必選框架。

• 快速上手

1. 引入 Vue 的JavaScript文件，從CDN服務器加載。

<script src="https://cdn.jsdelivr.net/npm/vue"></script>

2. 數據綁定。

<div id="app">
	<h1>{{ product }}庫存訊息</h1>
</div>

<script src="https://cdn.jsdelivr.net/npm/vue"></script>
<script>
	const app = new Vue({
		el: '#app',
		data: {
			product: 'iPhone X'
		}
	});
</script>

3. 條件與循環。

<div id="app">
	<h1>庫存訊息</h1>
    <hr>
	<ul>
		<li v-for="product in products">
			{{ product.name }} - {{ product.quantity }}
			<span v-if="product.quantity === 0">
				已售完
			</span>
		</li>
	</ul>
</div>

<script src="https://cdn.jsdelivr.net/npm/vue"></script>
<script>
	const app = new Vue({
		el: '#app',
		data: {
			products: [
				{"id": 1, "name": "iPhone X", "quantity": 20},
				{"id": 2, "name": "iPhone XS", "quantity": 0},
				{"id": 3, "name": "iPhone XR", "quantity": 50}
			]
		}
	});
</script>

4. 計算屬性。

<div id="app">
	<h1>庫存訊息</h1>
    <hr>
	<ul>
		<li v-for="product in products">
			{{ product.name }} - {{ product.quantity }}
			<span v-if="product.quantity === 0">
				已售完
			</span>
		</li>
	</ul>
</div>

<script src="https://cdn.jsdelivr.net/npm/vue"></script>
<script>
	const app = new Vue({
		el: '#app',
		data: {
			products: [
				{"id": 1, "name": "iPhone X", "quantity": 20},
				{"id": 2, "name": "iPhone XS", "quantity": 0},
				{"id": 3, "name": "iPhone XR", "quantity": 50}
			]
		},
		computed: {
			totalQuantity() {
				return this.products.reduce((sum, product) => {
					return sum + product.quantity
				}, 0);
			}
		}
	});
</script>

5. 處理事件。

<div id="app">
	<h1>庫存訊息</h1>
	<hr>
	<ul>
		<li v-for="product in products">
			{{ product.name }} - {{ product.quantity }}
			<span v-if="product.quantity === 0">
				已售完
			</span>
			<button @click="product.quantity += 1">
				增加庫存
			</button>
		</li>
	</ul>
	<h2>庫存總量：{{ totalQuantity }}台</h2>
</div>

<script src="https://cdn.jsdelivr.net/npm/vue"></script>
<script>
	const app = new Vue({
		el: '#app',
		data: {
			products: [
				{"id": 1, "name": "iPhone X", "quantity": 20},
				{"id": 2, "name": "iPhone XS", "quantity": 0},
				{"id": 3, "name": "iPhone XR", "quantity": 50}
			]
		},
		computed: {
			totalQuantity() {
				return this.products.reduce((sum, product) => {
					return sum + product.quantity
				}, 0);
			}
		}
	});
</script>

6. 用戶輸入。

<div id="app">
	<h1>庫存訊息</h1>
	<hr>
	<ul>
		<li v-for="product in products">
			{{ product.name }} - 
			<input type="number" v-model.number="product.quantity" min="0">
			<span v-if="product.quantity === 0">
				已售完
			</span>
			<button @click="product.quantity += 1">
				增加庫存
			</button>
		</li>
	</ul>
	<h2>庫存總量：{{ totalQuantity }}台</h2>
</div>

<script src="https://cdn.jsdelivr.net/npm/vue"></script>
<script>
	const app = new Vue({
		el: '#app',
		data: {
			products: [
				{"id": 1, "name": "iPhone X", "quantity": 20},
				{"id": 2, "name": "iPhone XS", "quantity": 0},
				{"id": 3, "name": "iPhone XR", "quantity": 50}
			]
		},
		computed: {
			totalQuantity() {
				return this.products.reduce((sum, product) => {
					return sum + product.quantity
				}, 0);
			}
		}
	});
</script>

7. 通過網絡加載 JSON 數據。

<div id="app">
	<h2>庫存訊息</h2>
	<ul>
		<li v-for="product in products">
			{{ product.name }} - {{ product.quantity }}
			<span v-if="product.quantity === 0">
				已售完
			</span>
		</li>
	</ul>
</div>

<script src="https://cdn.jsdelivr.net/npm/vue"></script>
<script>
	const app = new Vue({
		el: '#app',
		data: {
			products: []
		}，
		created() {
			fetch('https://jackfrued.top/api/products')
				.then(response => response.json())
				.then(json => {
					this.products = json
				});
		}
	});
</script>

使用腳手架 - vue-cli

Vue 為商業項目開發提供非常便捷的腳手架工具 vue-cli，通過工具可以省去手工配置開發環境、測試環境和運行環境的步驟，讓開發者只需要關注要解決的問題。

1. 安裝。
2. 創建項目。
3. 安裝依賴包。
4. 運行項目。