更新了前端相关文档

62368f5a · 骆昊的技术专栏 · 748dbdd4 · 62368f5a · 62368f5a
隐藏空白更改
内联并排

Showing with 113 addition and 11 deletion

Day21-30/Web前端概述.md Day21-30/Web前端概述.md +111 -10

README.md README.md +2 -1

未找到文件。
--- a/Day21-30/Web前端概述.md
+++ b/Day21-30/Web前端概述.md
@@ -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
--- a/README.md
+++ b/README.md
@@ -9,7 +9,7 @@
 - 学习曲线低，非专业人士也能上手
 - 开源系统，拥有强大的生态圈
 - 解释型语言，完美的平台可移植性
- - 支持面向对象和函数式编程，动态语言
+ - 支持面向对象和函数式编程
 - 能够通过调用C/C++代码扩展功能
 - 代码规范程度高，可读性强

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

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