Skip to content

Commit 62368f5

Browse files
jackfruedjackfrued
committed
更新了前端相关文档
1 parent 748dbdd commit 62368f5

File tree

2 files changed

+112
-11
lines changed

2 files changed

+112
-11
lines changed

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

Lines changed: 110 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -396,6 +396,8 @@
396396

397397
#### 渐进式框架 - [Vue.js](<https://cn.vuejs.org/>)
398398

399+
前后端分离开发（前端渲染）必选框架。
400+
399401
##### 快速上手
400402

401403
1. 引入Vue的JavaScript文件，我们仍然推荐从CDN服务器加载它。
@@ -622,23 +624,121 @@ Vue为商业项目开发提供了非常便捷的脚手架工具vue-cli，通过
622624

623625
#### UI框架 - [Element](<http://element-cn.eleme.io/#/zh-CN>)
624626

627+
基于Vue 2.0的桌面端组件库，用于构造用户界面，支持响应式布局。
628+
629+
1. 引入Element的CSS和JavaScript文件。
630+
631+
```HTML
632+
<!-- 引入样式 -->
633+
<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
634+
<!-- 引入组件库 -->
635+
<script src="https://unpkg.com/element-ui/lib/index.js"></script>
636+
```
625637

638+
2. 一个简单的例子。
639+
640+
```HTML
641+
<!DOCTYPE html>
642+
<html>
643+
<head>
644+
<meta charset="UTF-8">
645+
<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
646+
</head>
647+
<body>
648+
<div id="app">
649+
<el-button @click="visible = true">点我</el-button>
650+
<el-dialog :visible.sync="visible" title="Hello world">
651+
<p>开始使用Element吧</p>
652+
</el-dialog>
653+
</div>
654+
</body>
655+
<script src="https://unpkg.com/vue/dist/vue.js"></script>
656+
<script src="https://unpkg.com/element-ui/lib/index.js"></script>
657+
<script>
658+
new Vue({
659+
el: '#app',
660+
data: {
661+
visible: false,
662+
}
663+
})
664+
</script>
665+
</html>
666+
```
667+
668+
3. 使用组件。
669+
670+
```HTML
671+
<!DOCTYPE html>
672+
<html>
673+
<head>
674+
<meta charset="UTF-8">
675+
<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
676+
</head>
677+
<body>
678+
<div id="app">
679+
<el-table :data="tableData" stripe style="width: 100%">
680+
<el-table-column prop="date" label="日期" width="180">
681+
</el-table-column>
682+
<el-table-column prop="name" label="姓名" width="180">
683+
</el-table-column>
684+
<el-table-column prop="address" label="地址">
685+
</el-table-column>
686+
</el-table>
687+
</div>
688+
</body>
689+
<script src="https://unpkg.com/vue/dist/vue.js"></script>
690+
<script src="https://unpkg.com/element-ui/lib/index.js"></script>
691+
<script>
692+
new Vue({
693+
el: '#app',
694+
data: {
695+
tableData: [
696+
{
697+
date: '2016-05-02',
698+
name: '王一霸',
699+
address: '上海市普陀区金沙江路 1518 弄'
700+
},
701+
{
702+
date: '2016-05-04',
703+
name: '王二狗',
704+
address: '上海市普陀区金沙江路 1517 弄'
705+
},
706+
{
707+
date: '2016-05-01',
708+
name: '王三萌',
709+
address: '上海市普陀区金沙江路 1519 弄'
710+
},
711+
{
712+
date: '2016-05-03',
713+
name: '王四吹',
714+
address: '上海市普陀区金沙江路 1516 弄'
715+
}
716+
]
717+
}
718+
})
719+
</script>
720+
</html>
721+
```
722+
723+
4. 其他内容。
626724

627725
#### 报表框架 - [ECharts](<https://echarts.baidu.com>)
628726

727+
百度出品的开源可视化库，常用于生成各种类型的报表。
629728

630729

631-
#### 响应式布局框架 - [Bootstrap](<http://www.bootcss.com/>)
632730

633-
#### 特点
731+
#### 响应式布局框架 - [Bootstrap](<http://www.bootcss.com/>)
634732

635-
1. 支持主流的浏览器和移动设备
636-
2. 容易上手
637-
3. 响应式设计
733+
用于快速开发Web应用程序的前端框架，支持响应式布局。
638734

639-
#### 内容
735+
1. 特点
736+
- 支持主流的浏览器和移动设备
737+
- 容易上手
738+
- 响应式设计
640739

641-
1. 网格系统
642-
2. 封装的CSS
643-
3. 现成的组件
644-
4. JavaScript插件
740+
2. 内容
741+
- 网格系统
742+
- 封装的CSS
743+
- 现成的组件
744+
- JavaScript插件

‎README.md

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -9,7 +9,7 @@
99
- 学习曲线低，非专业人士也能上手
1010
- 开源系统，拥有强大的生态圈
1111
- 解释型语言，完美的平台可移植性
12-
- 支持面向对象和函数式编程，动态语言
12+
- 支持面向对象和函数式编程
1313
- 能够通过调用C/C++代码扩展功能
1414
- 代码规范程度高，可读性强
1515

@@ -184,6 +184,7 @@
184184
- 用JavaScript处理交互式行为
185185
- jQuery入门和提高
186186
- Vue.js入门
187+
- Element的使用
187188

188189
### Day31~35 - [玩转Linux操作系统](./Day31-35/玩转Linux操作系统.md)
189190

0 commit comments

Comments
 (0)