Skip to content
体验新版
项目
组织
正在加载...
登录
切换导航
打开侧边栏
csdn_franckjun
Python-100-Days
提交
92cd26bd
P
Python-100-Days
项目概览
csdn_franckjun
/
Python-100-Days
与 Fork 源项目一致
从无法访问的项目Fork
通知
1
Star
2
Fork
0
代码
文件
提交
分支
Tags
贡献者
分支图
Diff
Issue
0
列表
看板
标记
里程碑
合并请求
0
Wiki
0
Wiki
分析
仓库
DevOps
项目成员
Pages
P
Python-100-Days
项目概览
项目概览
详情
发布
仓库
仓库
文件
提交
分支
标签
贡献者
分支图
比较
Issue
0
Issue
0
列表
看板
标记
里程碑
合并请求
0
合并请求
0
Pages
分析
分析
仓库分析
DevOps
Wiki
0
Wiki
成员
成员
收起侧边栏
关闭侧边栏
动态
分支图
创建新Issue
提交
Issue看板
体验新版 GitCode,发现更多精彩内容 >>
提交
92cd26bd
编写于
3月 29, 2019
作者:
骆昊的技术专栏
浏览文件
操作
浏览文件
下载
电子邮件补丁
差异文件
添加了Vue.js相关的内容
上级
706fc186
变更
6
隐藏空白更改
内联
并排
Showing
6 changed file
with
274 addition
and
1 deletion
+274
-1
Day21-30/Web前端概述.md
Day21-30/Web前端概述.md
+233
-1
Day21-30/code/vue.demo.html
Day21-30/code/vue.demo.html
+40
-0
Day21-30/docs/Bulma- Free, open source, & modern CSS framework based on Flexbox.pdf
... open source, & modern CSS framework based on Flexbox.pdf
+0
-0
Day21-30/docs/Why Vue.mp4
Day21-30/docs/Why Vue.mp4
+0
-0
Day21-30/docs/Why you should use Bulma.mp4
Day21-30/docs/Why you should use Bulma.mp4
+0
-0
Day91-100/Django知识点概述.md
Day91-100/Django知识点概述.md
+1
-0
未找到文件。
Day21-30/Web前端概述.md
浏览文件 @
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
浏览文件 @
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
Day21-30/docs/Bulma- Free, open source, & modern CSS framework based on Flexbox.pdf
0 → 100644
浏览文件 @
92cd26bd
文件已添加
Day21-30/docs/Why Vue.mp4
0 → 100644
浏览文件 @
92cd26bd
文件已添加
Day21-30/docs/Why you should use Bulma.mp4
0 → 100644
浏览文件 @
92cd26bd
文件已添加
Day91-100/Django知识点概述.md
浏览文件 @
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%
请重试
或
添加新附件
.
添加附件
取消
You are about to add
0
people
to the discussion. Proceed with caution.
先完成此消息的编辑!
取消
想要评论请
注册
或
登录