Skip to content

Commit 92cd26b

Browse files
jackfruedjackfrued
committed
添加了Vue.js相关的内容
1 parent 706fc18 commit 92cd26b

6 files changed

+274
-1
lines changed

‎Day21-30/Web前端概述.md

+233-1
Original file line numberDiff line numberDiff line change
@@ -391,7 +391,239 @@
391391
- 加载内容
392392
- 提交表单
393393

394-
### 使用Bootstrap
394+
### 前端框架
395+
396+
#### 渐进式框架 - [Vue.js](<https://cn.vuejs.org/>)
397+
398+
##### 快速上手
399+
400+
1. 引入Vue的JavaScript文件，我们仍然推荐从CDN服务器加载它。
401+
402+
```HTML
403+
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
404+
```
405+
406+
2. 数据绑定（声明式渲染 ）。
407+
408+
```HTML
409+
<div id="app">
410+
<h1>{{ product }}库存信息</h1>
411+
</div>
412+
413+
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
414+
<script>
415+
const app = new Vue({
416+
el: '#app',
417+
data: {
418+
product: 'iPhone X'
419+
}
420+
});
421+
</script>
422+
```
423+
424+
3. 条件与循环。
425+
426+
```HTML
427+
<div id="app">
428+
<h1>库存信息</h1>
429+
<hr>
430+
<ul>
431+
<li v-for="product in products">
432+
{{ product.name }} - {{ product.quantity }}
433+
<span v-if="product.quantity === 0">
434+
已经售罄
435+
</span>
436+
</li>
437+
</ul>
438+
</div>
439+
440+
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
441+
<script>
442+
const app = new Vue({
443+
el: '#app',
444+
data: {
445+
products: [
446+
{"id": 1, "name": "iPhone X", "quantity": 20},
447+
{"id": 2, "name": "华为 Mate20", "quantity": 0},
448+
{"id": 3, "name": "小米 Mix3", "quantity": 50}
449+
]
450+
}
451+
});
452+
</script>
453+
```
454+
455+
4. 计算属性。
456+
457+
```HTML
458+
<div id="app">
459+
<h1>库存信息</h1>
460+
<hr>
461+
<ul>
462+
<li v-for="product in products">
463+
{{ product.name }} - {{ product.quantity }}
464+
<span v-if="product.quantity === 0">
465+
已经售罄
466+
</span>
467+
</li>
468+
</ul>
469+
<h2>库存总量：{{ totalQuantity }}台</h2>
470+
</div>
471+
472+
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
473+
<script>
474+
const app = new Vue({
475+
el: '#app',
476+
data: {
477+
products: [
478+
{"id": 1, "name": "iPhone X", "quantity": 20},
479+
{"id": 2, "name": "华为 Mate20", "quantity": 0},
480+
{"id": 3, "name": "小米 Mix3", "quantity": 50}
481+
]
482+
},
483+
computed: {
484+
totalQuantity() {
485+
return this.products.reduce((sum, product) => {
486+
return sum + product.quantity
487+
}, 0);
488+
}
489+
}
490+
});
491+
</script>
492+
```
493+
494+
5. 处理事件。
495+
496+
```HTML
497+
<div id="app">
498+
<h1>库存信息</h1>
499+
<hr>
500+
<ul>
501+
<li v-for="product in products">
502+
{{ product.name }} - {{ product.quantity }}
503+
<span v-if="product.quantity === 0">
504+
已经售罄
505+
</span>
506+
<button @click="product.quantity += 1">
507+
增加库存
508+
</button>
509+
</li>
510+
</ul>
511+
<h2>库存总量：{{ totalQuantity }}台</h2>
512+
</div>
513+
514+
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
515+
<script>
516+
const app = new Vue({
517+
el: '#app',
518+
data: {
519+
products: [
520+
{"id": 1, "name": "iPhone X", "quantity": 20},
521+
{"id": 2, "name": "华为 Mate20", "quantity": 0},
522+
{"id": 3, "name": "小米 Mix3", "quantity": 50}
523+
]
524+
},
525+
computed: {
526+
totalQuantity() {
527+
return this.products.reduce((sum, product) => {
528+
return sum + product.quantity
529+
}, 0);
530+
}
531+
}
532+
});
533+
</script>
534+
```
535+
536+
6. 用户输入。
537+
538+
```HTML
539+
<div id="app">
540+
<h1>库存信息</h1>
541+
<hr>
542+
<ul>
543+
<li v-for="product in products">
544+
{{ product.name }} -
545+
<input type="number" v-model.number="product.quantity" min="0">
546+
<span v-if="product.quantity === 0">
547+
已经售罄
548+
</span>
549+
<button @click="product.quantity += 1">
550+
增加库存
551+
</button>
552+
</li>
553+
</ul>
554+
<h2>库存总量：{{ totalQuantity }}台</h2>
555+
</div>
556+
557+
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
558+
<script>
559+
const app = new Vue({
560+
el: '#app',
561+
data: {
562+
products: [
563+
{"id": 1, "name": "iPhone X", "quantity": 20},
564+
{"id": 2, "name": "华为 Mate20", "quantity": 0},
565+
{"id": 3, "name": "小米 Mix3", "quantity": 50}
566+
]
567+
},
568+
computed: {
569+
totalQuantity() {
570+
return this.products.reduce((sum, product) => {
571+
return sum + product.quantity
572+
}, 0);
573+
}
574+
}
575+
});
576+
</script>
577+
```
578+
579+
7. 通过网络加载JSON数据。
580+
581+
```HTML
582+
<div id="app">
583+
<h2>库存信息</h2>
584+
<ul>
585+
<li v-for="product in products">
586+
{{ product.name }} - {{ product.quantity }}
587+
<span v-if="product.quantity === 0">
588+
已经售罄
589+
</span>
590+
</li>
591+
</ul>
592+
</div>
593+
594+
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
595+
<script>
596+
const app = new Vue({
597+
el: '#app',
598+
data: {
599+
products: []
600+
}，
601+
created() {
602+
fetch('https://jackfrued.top/api/products')
603+
.then(response => response.json())
604+
.then(json => {
605+
this.products = json
606+
});
607+
}
608+
});
609+
</script>
610+
```
611+
612+
##### 使用脚手架 - vue-cli
613+
614+
Vue为商业项目开发提供了非常便捷的脚手架工具vue-cli，通过工具可以省去手工配置开发环境、测试环境和运行环境的步骤，让开发者只需要关注要解决的问题。
615+
616+
1. 安装脚手架。
617+
2. 创建项目。
618+
3. 安装依赖包。
619+
4. 运行项目。
620+
621+
622+
#### UI框架 - [Element](<http://element-cn.eleme.io/#/zh-CN>)
623+
624+
625+
626+
#### 响应式布局框架 - [Bootstrap](<http://www.bootcss.com/>)
395627

396628
#### 特点
397629

‎Day21-30/code/vue.demo.html

+40
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,40 @@
1+
<link rel="stylesheet" type="text/css" href="bulma.css">
2+
3+
<div id="app">
4+
<h1>库存信息</h1>
5+
<hr>
6+
<ul>
7+
<li v-for="product in products">
8+
{{ product.name }} -
9+
<input type="number" v-model.number="product.quantity" min="0">
10+
<span v-if="product.quantity === 0">
11+
已经售罄
12+
</span>
13+
<button @click="product.quantity += 1">
14+
增加库存
15+
</button>
16+
</li>
17+
</ul>
18+
<h2>库存总量：{{ totalQuantity }}台</h2>
19+
</div>
20+
21+
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
22+
<script>
23+
const app = new Vue({
24+
el: '#app',
25+
data: {
26+
products: [
27+
{"id": 1, "name": "iPhone X", "quantity": 20},
28+
{"id": 2, "name": "华为 Mate20", "quantity": 0},
29+
{"id": 3, "name": "小米 Mix3", "quantity": 50}
30+
]
31+
},
32+
computed: {
33+
totalQuantity() {
34+
return this.products.reduce((sum, product) => {
35+
return sum + product.quantity
36+
}, 0);
37+
}
38+
}
39+
});
40+
</script>

‎Day21-30/docs/Bulma- Free, open source, & modern CSS framework based on Flexbox.pdf

1.14 MB
Binary file not shown.

‎Day21-30/docs/Why Vue.mp4

32.8 MB
Binary file not shown.

‎Day21-30/docs/Why you should use Bulma.mp4

45 MB
Binary file not shown.

‎Day91-100/Django知识点概述.md

+1
Original file line numberDiff line numberDiff line change
@@ -1748,6 +1748,7 @@ MIDDLEWARE = [
17481748
'corsheaders.middleware.CorsMiddleware',
17491749
]
17501750

1751+
CORS_ORIGIN_ALLOW_ALL = True
17511752
# 配置跨域白名单
17521753
# CORS_ORIGIN_WHITELIST = ('www.abc.com', 'www.baidu.com')
17531754
# CORS_ORIGIN_REGEX_WHITELIST = ('...', )

0 commit comments

Comments
 (0)