前端Vue
前端的现状介绍
HTML(5)、CSS(3)、JavaScript(ES5、ES6)：编写一个个的页面 传递给后端（PHP、Python、Go、Java），然后后端嵌入模板语法，渲染完数据后再讲数据传递给前端，最后再浏览器中查看即可- Ajax的出现 -> 后台发送异步请求，
Render+Ajax混合 - 单用Ajax（加载数据，DOM渲染页面）：
前后端分离的雏形 - Angular框架的出现（1个JS框架）：出现了“
前端工程化”的概念（前端也是1个工程、1个项目） - React、Vue框架：当下最火的2个前端框架（
Vue：国人喜欢用，React：外国人喜欢用） - 移动开发（Android+IOS） + Web（Web+微信小程序+支付宝小程序） + 桌面开发（Windows桌面）：前端 ->
大前端 - 一套代码在各个平台运行（大前端）：
谷歌Flutter（Dart语言：和Java很像）可以运行在IOS、Android、PC端 - 在Vue框架的基础性上 uni-app：一套编码 编到10个平台
- 在不久的将来 ，前端框架可能会一统天下
vue介绍
-
什么是vue
Vue (读音 /vjuː/，类似于 view) 是一套用于构建用户界面的【渐进式】框架
-
渐进式
渐进式就是可以一点一点地使用它，只用一部分，也可以整个工程都使用它
-
vue网站
-
开发vue，需要的编辑器
1.vscode：微软 轻量级编辑器，免费
2.vim：装插件，搞得花里胡哨，开发代码
3.Jetbrains:IDEA(java)，Pycharm，Goland，phpStrom，webstorm 收费 吃内存(java开发)
4.AndroidStadio：免费，谷歌买了Jetbrains授权+ADT
sun：java---》后来被甲骨文收购了--->oracle jdk openjdk 毕昇jdk
5.Pycharm + 插件 开发vue 使用起来跟webstorm
-把vue的源代码下载到本地
-
vue 的特点
1.易用
通过 HTML、CSS、JavaScript构建应用
2.灵活
不断繁荣的生态系统，可以在一个库和一套完整框架之间自如伸缩。
3.高效
①20kB min+gzip 运行大小
②超快虚拟 DOM
③最省心的优化
-
vue的版本
1.x 使用得较少
2.x 普遍使用
3.x 刚出没多久，只有Beta版
M-V-VM
-
M-V-VM思想
MVVM 是
Model-View-ViewModel的缩写，它是一种基于前端开发的架构模式，是一种事件驱动编程方式1.M（Model）
vue对象的data属性里面的数据，这里的数据要显示到页面中
2.V（View）
vue中数据要显示的HTML页面，在vue中，也称之为“视图模板” （HTML+CSS）
3.VM（ViewModel）
vue写的介于m和v之间的一层
vue中编写代码时的vm对象，它是vue.js的核心，负责连接 View 和 Model数据的中转，保证视图和数据的一致性，所以前面代码中，data里面的数据被显示中p标签中就是vm对象自动完成的
4.双向数据绑定
只要改了M层的数据(js的变量)，view层页面跟着变化
-
MVVM的特性
1.低耦合
视图（View）可以独立于Model变化和修改，1个ViewModel可以绑定到不同的View上，当View变化的时候 Model可以不变，当Model变化的时候 View也可以不变2.可复用
可以把一些视图逻辑放在1个ViewModel中，让很多View
重用这端视图的逻辑（以此减少代码冗余）3.独立开发
开发
人员可以专注于业务逻辑和数据的开发（ViewModel），设计人员可以专注于页面设计4.可测试
界面元素是比较难以测试的，而现在的测试可以
针对ViewModel来编写 -
MVVM逻辑
组件化开发、单页面开发
-
组件化开发
类似于DTL中的
include，每一个组件的内容都可以被替换和复用
-
单页面开发
只需要1个页面，结合组件化开发来替换页面中的内容
页面的切换只是组件的替换，页面还是只有1个
index.html
Vue的快速使用
<!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>vue快速使用</h1>
<p>名字：{{name}}</p>
<p>年龄：{{age}}</p>
</div>
</body>
<script>
// 引入vue后，会有Vue的构造函数,传入 配置项 对象
// 页面中id为app的div就被vue托管了，在div中就可以写vue的语法，指令
var vm = new Vue({
el: "#app",
data: {
name: 'lqz',
age: 19
},
})
</script>
</html>
-
es6 对象写法
var name = 'lqz' var age = 19 // var obj={name:name,age:age} var obj = {name, age, handleClick() {}} handleClick() {}是 handleClick: function() {}简写形式