1 前端发展介绍
1.HTML(5)、CSS(3)、JavaScript(ES5、ES6)：编写一个个的页面
-> 给后端(PHP、Python、Go、Java) 后端嵌入模板语法、后端渲染完数据
-> 返回数据给前端 -> 在浏览器中查看
2.Ajax的出现 -> 后台发送异步请求，Render+Ajax混合
3.单用Ajax（加载数据，DOM渲染页面）：前后端分离的雏形
4.Angular框架的出现（1个JS框架）：出现了“前端工程化”的概念（前端也是1个工程、1个项目）
5.React、Vue框架：当下最火的2个前端框架（Vue：国人喜欢用，React：外国人喜欢用）
6.移动开发（Android+IOS） + Web（Web+微信小程序+支付宝小程序） + 桌面开发（Windows桌面）：前端 -> 大前端
7.一套代码在各个平台运行（大前端）：谷歌Flutter（Dart语言：和Java很像）可以运行在IOS、Android、PC端
8.在Vue框架的基础性上 uni-app：一套编码 编到10个平台
9.在不久的将来 ，前端框架可能会一统天下
2 Vue介绍
# 是基于JavaScript的 构建用户界面的渐进式框架
就是前端项目可以局部使用，也可以整个项目(前端工程)都使用
# 版本
Vue：1.x 2.x(使用) 3.x
# 优点：
1.单页面开发 - 硬件要求低,比如手机
2.组件化开发
3.数据驱动
4.数据的双向绑定
5.虚拟DOM
把整个页面的dom加载到内存中，再把整个项目再映射到真实的dom（硬件的文件中），基于缓存机制。
6.轻量级
ps：angular 超大型项目比较合理 react做原生的移动端更好
2.1 MVVM介绍
# MVVM介绍 mvc(后端架构) mvvm(前端架构) mvp(安卓架构)
Model-View-ViewModel 的缩写
-Model ：vue对象的data属性里面的数据，这里的数据要显示到页面中
-View ：vue中数据要显示的HTML页面，在vue中，也称之为“视图模板” （HTML+CSS）
-ViewModel：vue中编写代码时的vm对象，它是vue.js的核心，负责连接 View 和 Model数据的中转，保证视图和数据的一致性，
所以前面代码中，data里面的数据 被显示在p标签中 就是vm对象自动完成的
(双向数据绑定：JS中变量变了，HTML中数据也跟着改变)
2.2 组件化和单页面开发
# 组件化开发：
就是类似python-DTL中的include，把页面一些固定的部分做成一个个的组件，每个组件的内容都可以被替换和复用
# 单页面开发：
只需要一个页面，结合组件化开发来替换页面中的内容，页面的切换只是组件的替换，页面还是只有1个index.html
个人理解：整个前端工程只有一个index页面，访问不同的页面内容(首页，文章等),会将内容全部弄成一个由组件化组成的dom文档，再整体替换到index页面中。
3 Node.js介绍
# 1.由来：
JavaScript 是一门解释型语言，正常只能运行在浏览器中(浏览器中有它的解释器)
前端工程师为了能够正常编写后端，就开发了一个能够运行在操作系统之上的软件(JavaScript解释器)，
就是把Chrome的V8引擎拎出来，再用c语言写了一些底层包实现的(比js多了文件操作、网络操作，os操作)
# 2.Node.js 是写JavaScript的解释器
Node.js ====类似==== python
npm ====类似==== pip 用来安装第三方依赖包
4 关于编辑器的选择
-AndroidStudio：
谷歌公司出钱买了jebrains版权+ADT
-webstorm： 收费
jebrains公司出的(pycharm，goland，idea，phpstorm)
-vscode：微软 免费
-sublime text：收费
# 咱们使用pycharm，装一个插件开发vue
5 第一个hello world
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="./js/vue.js"></script>
</head>
<body>
<div id="app">
<h1>{{name}}</h1>
</div>
</body>
<script>
var vm = new Vue({
el:'#app', //id为app的div，被vue托管了
data:{
name:'hello world'
}
})
</script>
</html>
