Skip to content
体验新版
项目
组织
正在加载...
登录
切换导航
打开侧边栏
风灵Erick
Python-100-Days
提交
62368f5a
P
Python-100-Days
项目概览
风灵Erick
/
Python-100-Days
与 Fork 源项目一致
从无法访问的项目Fork
通知
1
Star
0
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,发现更多精彩内容 >>
提交
62368f5a
编写于
4月 04, 2019
作者:
骆昊的技术专栏
浏览文件
操作
浏览文件
下载
电子邮件补丁
差异文件
更新了前端相关文档
上级
748dbdd4
变更
2
隐藏空白更改
内联
并排
Showing
2 changed file
with
113 addition
and
11 deletion
+113
-11
Day21-30/Web前端概述.md
Day21-30/Web前端概述.md
+111
-10
README.md
README.md
+2
-1
未找到文件。
Day21-30/Web前端概述.md
浏览文件 @
62368f5a
...
...
@@ -396,6 +396,8 @@
#### 渐进式框架 - [Vue.js](<https://cn.vuejs.org/>)
前后端分离开发(前端渲染)必选框架。
##### 快速上手
1.
引入Vue的JavaScript文件,我们仍然推荐从CDN服务器加载它。
...
...
@@ -622,23 +624,121 @@ Vue为商业项目开发提供了非常便捷的脚手架工具vue-cli,通过
#### UI框架 - [Element](<http://element-cn.eleme.io/#/zh-CN>)
基于Vue 2.0的桌面端组件库,用于构造用户界面,支持响应式布局。
1.
引入Element的CSS和JavaScript文件。
```
HTML
<!-- 引入样式 -->
<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
<!-- 引入组件库 -->
<script src="https://unpkg.com/element-ui/lib/index.js"></script>
```
2.
一个简单的例子。
```
HTML
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
</head>
<body>
<div id="app">
<el-button @click="visible = true">点我</el-button>
<el-dialog :visible.sync="visible" title="Hello world">
<p>开始使用Element吧</p>
</el-dialog>
</div>
</body>
<script src="https://unpkg.com/vue/dist/vue.js"></script>
<script src="https://unpkg.com/element-ui/lib/index.js"></script>
<script>
new Vue({
el: '#app',
data: {
visible: false,
}
})
</script>
</html>
```
3.
使用组件。
```
HTML
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
</head>
<body>
<div id="app">
<el-table :data="tableData" stripe style="width: 100%">
<el-table-column prop="date" label="日期" width="180">
</el-table-column>
<el-table-column prop="name" label="姓名" width="180">
</el-table-column>
<el-table-column prop="address" label="地址">
</el-table-column>
</el-table>
</div>
</body>
<script src="https://unpkg.com/vue/dist/vue.js"></script>
<script src="https://unpkg.com/element-ui/lib/index.js"></script>
<script>
new Vue({
el: '#app',
data: {
tableData: [
{
date: '2016-05-02',
name: '王一霸',
address: '上海市普陀区金沙江路 1518 弄'
},
{
date: '2016-05-04',
name: '王二狗',
address: '上海市普陀区金沙江路 1517 弄'
},
{
date: '2016-05-01',
name: '王三萌',
address: '上海市普陀区金沙江路 1519 弄'
},
{
date: '2016-05-03',
name: '王四吹',
address: '上海市普陀区金沙江路 1516 弄'
}
]
}
})
</script>
</html>
```
4.
其他内容。
#### 报表框架 - [ECharts](<https://echarts.baidu.com>)
百度出品的开源可视化库,常用于生成各种类型的报表。
#### 响应式布局框架 - [Bootstrap](<http://www.bootcss.com/>)
####
特点
####
响应式布局框架 - [Bootstrap](<http://www.bootcss.com/>)
1.
支持主流的浏览器和移动设备
2.
容易上手
3.
响应式设计
用于快速开发Web应用程序的前端框架,支持响应式布局。
#### 内容
1.
特点
-
支持主流的浏览器和移动设备
-
容易上手
-
响应式设计
1.
网格系统
2.
封装的CSS
3.
现成的组件
4.
JavaScript插件
2.
内容
-
网格系统
-
封装的CSS
-
现成的组件
-
JavaScript插件
\ No newline at end of file
README.md
浏览文件 @
62368f5a
...
...
@@ -9,7 +9,7 @@
-
学习曲线低,非专业人士也能上手
-
开源系统,拥有强大的生态圈
-
解释型语言,完美的平台可移植性
-
支持面向对象和函数式编程
,动态语言
-
支持面向对象和函数式编程
-
能够通过调用C/C++代码扩展功能
-
代码规范程度高,可读性强
...
...
@@ -184,6 +184,7 @@
-
用JavaScript处理交互式行为
-
jQuery入门和提高
-
Vue.js入门
-
Element的使用
### Day31~35 - [玩转Linux操作系统](./Day31-35/玩转Linux操作系统.md)
...
...
编辑
预览
Markdown
is supported
0%
请重试
或
添加新附件
.
添加附件
取消
You are about to add
0
people
to the discussion. Proceed with caution.
先完成此消息的编辑!
取消
想要评论请
注册
或
登录