Skip to content

P
Python-100-Days
Commit 92cd26bd authored by jackfrued's avatar jackfrued
Browse files
Options

添加了Vue.js相关的内容

parent 706fc186
Show whitespace changes
Inline Side-by-side
Showing with 274 additions and 1 deletion
Day21-30/Web前端概述.md
View file @ 92cd26bd
......@@ -391,7 +391,239 @@
- 加载内容
- 提交表单
### 使用Bootstrap
### 前端框架
#### 渐进式框架 - [Vue.js](<https://cn.vuejs.org/>)
##### 快速上手
1. 引入Vue的JavaScript文件，我们仍然推荐从CDN服务器加载它。
```HTML
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
```
2. 数据绑定（声明式渲染 ）。
```HTML
<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. 条件与循环。
```HTML
<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>
```
4. 计算属性。
```HTML
<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>
```
5. 处理事件。
```HTML
<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>
```
6. 用户输入。
```HTML
<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>
```
7. 通过网络加载JSON数据。
```HTML
<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. 运行项目。
#### UI框架 - [Element](<http://element-cn.eleme.io/#/zh-CN>)
#### 响应式布局框架 - [Bootstrap](<http://www.bootcss.com/>)
#### 特点
......
Day21-30/code/vue.demo.html 0 → 100644
View file @ 92cd26bd
<link rel="stylesheet" type="text/css" href="bulma.css">
<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>
\ No newline at end of file
Day91-100/Django知识点概述.md
View file @ 92cd26bd
......@@ -1748,6 +1748,7 @@ MIDDLEWARE = [
'corsheaders.middleware.CorsMiddleware',
]
CORS_ORIGIN_ALLOW_ALL = True
# 配置跨域白名单
# CORS_ORIGIN_WHITELIST = ('www.abc.com', 'www.baidu.com')
# CORS_ORIGIN_REGEX_WHITELIST = ('...', )
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment