Python100天学习笔记Day28 前端框架

Posted 2022-02-21 Vax_Loves_1314

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了Python100天学习笔记Day28 前端框架相关的知识，希望对你有一定的参考价值。

前端框架

渐进式框架 - Vue.js

前后端分离开发（前端渲染）必选框架。

快速上手

引入Vue的javascript文件，我们仍然推荐从CDN服务器加载它。
```
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
```

数据绑定（声明式渲染）。

<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>

条件与循环。

<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": "华为 Mate20", "quantity": 0,
				"id": 3, "name": "小米 Mix3", "quantity": 50
			]
		
	);
</script>

计算属性。

<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>
	<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": "华为 Mate20", "quantity": 0,
				"id": 3, "name": "小米 Mix3", "quantity": 50
			]
		,
		computed: 
			totalQuantity() 
				return this.products.reduce((sum, product) => 
					return sum + product.quantity
				, 0);
			
		
	);
</script>

处理事件。

<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": "华为 Mate20", "quantity": 0,
				"id": 3, "name": "小米 Mix3", "quantity": 50
			]
		,
		computed: 
			totalQuantity() 
				return this.products.reduce((sum, product) => 
					return sum + product.quantity
				, 0);
			
		
	);
</script>

用户输入。

<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": "华为 Mate20", "quantity": 0,
				"id": 3, "name": "小米 Mix3", "quantity": 50
			]
		,
		computed: 
			totalQuantity() 
				return this.products.reduce((sum, product) => 
					return sum + product.quantity
				, 0);
			
		
	);
</script>

通过网络加载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，通过工具可以省去手工配置开发环境、测试环境和运行环境的步骤，让开发者只需要关注要解决的问题。

安装脚手架。
创建项目。
安装依赖包。
运行项目。

以上是关于Python100天学习笔记Day28 前端框架的主要内容，如果未能解决你的问题，请参考以下文章

Python100天学习笔记Day29 UI框架-Element

Python100天学习笔记Day30 Bootstrap和Bulma框架

Python全栈100天学习笔记Day41 Django深入理解框架