使用jQuery的复杂性问题
使用jQuery进行前后端分离开发，即可以实现前后端交互（ajax），又可以完成数据渲染
存在的问题：jQuery需要通过HTML标签拼接、DOM节点操作完成数据的显示，开发效率低且容易出错，渲染效率较低
vue是继jQuery之后的又一优秀的前端框架；专注于前端数据的渲染--语法简单、渲染效率高
简介
前端框架
前端三要素：HTML、CSS、JavaScript
HTML决定网页结构
CSS决定显示效率
JavaScript决定网页功能（交互、数据显示）
UI框架：
Bootstrap
amazeUI
Layui
JS框架：
jQuery(jQuery UI)
React
angular
node.js ---- 后端开发
vue集各种前端框架的优势发展而来
MVVM
项目结构经理的三个阶段
后端MVC我们就可以理解为单体架构，流程控制是由后端控制器来完成
前端MVC前后端分离开发，后端只负责接收响应请求
MVVM前端请求后端接口，后端返回数据，前端接收数据，并将接收的数据设置VM，HTML从vm取值
M model数据模型 指的是后端接口返回的数据
V view视图
VM ViewModel视图模型 数据模型与视图之间的桥梁，后端返回的model转换前端所需的vm，视图层可以直接从vm中提取数据
入门使用
Vue被设计为可以自低向上逐层应用。Vue的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合
vue的引入
离线引用：下载vue的js文件，添加到前端项目，在网页中通过script标签引用vue.js文件
CDN引用
{
{str}}
Vue的语法
基本类型数据和字符串
{
{code}}
{
{str}}
-------------------------
data:{
code:10,
str:"test"
}
对象类型数据
支持ognl语法
{
{stu.stuNum}}
{
{stu.stuName}}
-----------------------------
data{
stu:{
stuNum:"100001",
stuName:"张三",
stuGender:"M",
stuAge:20
}
}
条件 v-if
//条件不成立则不显示
-------------------------------------------------------
data:{
stu:{
stuNum:"100001",
stuName:"张三",
stuGender:"M",
stuAge:20
}
}
循环 v-for
| 序号 | 学号 | 姓名 | 性别 | 年龄 |
|---|---|---|---|---|
| { {index+1}} | { {s.stuNum}} | { {s.stuName}} |
| { {s.stuAge}} |
data:{
stus:[
{
stuNum:"100001",
stuName:"张⼤三",
stuGender:"M",
stuAge:23
},
{
stuNum:"100002",
stuName:"张中三",
stuGender:"M",
stuAge:22
},
{
stuNum:"100003",
stuName:"张⼩三",
stuGender:"F",
stuAge:20
}
]
}
v-bind绑定标签属性
v-bind：可简写为 :
------------------------------------
data{
str:"从前有座⼭",
stu:{
stuImg:"img/01.jpg"
}
}
表单标签的双向绑定 v-model
只能使用在表单输入标签
v-model:value 可以简写为 v-model
------------------------------------
data{
str:"从前有座⼭"
}
vue实例
每个使用vue进行数据渲染的网页文档度需要创建一个Vue实例--ViewModel
Vue实例的声明周期
vue实例生命周期--vue实例从创建到销毁的过程
创建vue实例（初始化data、创建el）
数据挂载（将vue实例data中的数据渲染到网页HTML标签）
重新渲染（当vue的data数据发生变化，会重新渲染到HTML标签）
销毁实例
钩子函数
为了便于开发者在vue实例生命周期的不同阶段进行特定的操作，vue在生命周期四个阶段的前后分别提供了一个函数，这个函数无需开发者调用，当vue实例到达生命周期的指定阶段会自动调用对应的函数
{str}}
{str}}
计算属性和侦听器
计算属性
data中的属性可以通过声明获得，也可以通过在computed通过计算获得
特性：计算属性所依赖的属性值发生变化会影响计算属性的值同时发生变化
示例
{
{str3}}
侦听器
侦听器，就是data中属性的监听器，当data中的属性值发生变化就会触发侦听器函数的执行
{
{str3}}
class与style绑定
我们可以使用mustache语法将vue中data的数据绑定到HTML标签及标签的属性，如何将data中的值绑定到标签的class及style属性呢
class绑定
style绑定
WH2010
Wh2021
wh2021
wh2021