视频笔记是根据B站 千锋 涛哥 - SpringBoot+vue+前后端分离项目《锋迷商城》实战课-完结版 进行整理的
笔记可上 gitee仓库 自取
千锋 Vue 笔记整理
- 一、vue 的简介
- 二、 vue 入门使用
- 三、 vue 的语法
- 四、vue 实例
- 五、 计算属性和侦听器
- 六、class 与 style 绑定
- 七、条件与列表渲染
- 八、事件处理
- 九、表单输入绑定
- 十、组件
- 十一、axios 异步通信
- 十二、 路由 router
一、vue 的简介
1.1 使用 JQuery 的复杂性问题
- 使用 JQuery 进行前后端分离开发,既可以实现前后端交互 (ajax) ,又可以完成数据渲染
- 存在的问题: JQuery 需要通过 HTML 标签拼接、DOM 节点操作完成数据的显示,开发效率低且容易出错,渲染效率较低
- vue 是继 JQuery 之后的又一优秀的前端框架:专注于前端数据的渲染 ———— 语法简单、渲染效率高
1.2 VUE 简介
1.2.1 前端框架
-
前端三框架:HTML、CSS、JavaScript
- HTML 决定网页结构
- CSS 决定显示效果
- JavaScript 决定网页功能 (交互、数据显示)
-
UI 框架:(只提供样式、显示效果)
- Bootstrap
- amazeUI
- Layui
-
JS 框架:
- JQuery (JQuery UI)
- React
- angular
- nodejs ---- 后端开发
- vue 集各种前端框架的优势发展而来
1.2.2 MVVM
项目结构经历的三个阶段:
后端 MVC :可以理解为单体结构,流程控制是由后端控制器来完成
前端 MVC :前后端分离开发,后端只负责接收响应请求
MVVM是MVC的增强版,实质上和MVC没有本质区别,只是代码的位置变动而已
MVVM 前端请求后端接口,后端返回数据,前端接收数据,并将接收到的数据设置为 “VM”,HTML 从 vm 取值
- M model 数据模型,指的是后端接口返回的数据
- V view 视图
- VM ViewModel 视图模型 数据模型与视图之间的桥梁,后端返回的 model 转换前端所需的 vm,视图层可以直接从 vm 中提取数据
Model-View-ViewModel —— 概念图
二、 vue 入门使用
Vue (读音 /vju/,类似于 view) 是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是,Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层,不仅易于上手,还便于与第三方库或既有项目整合。另一方面,当与现代化的工具链以及各种支持类库结合使用时,Vue 也完全能够为复杂的单页应用提供驱动。
2.1 vue 的引入
-
离线引用:下载 vue 的 js 文件,添加到前端项目,在网页中通过 script 标签引用 vue.js 文件
-
CDN 引用:
直接使用在线 CDN 的方式引入
2.2 入门案例 – Hello World
文本:数据绑定最常见的形式就是使用“Mustache”语法 (双大括号) 的文本插值:
{ {message}}
-
创建一个 HTML 文件
-
引入 vue.js 文件
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
-
示例:
Title 从 0 开始: { {message}}<script type="text/javascript"> var vm = new Vue({ el: '#app-1', data: { message: 'Hello World!' } }) </script>
Mustache 标签将会被替代为对应数据对象上 message
property 的值。无论何时,绑定的数据对象上 message
property 发生了改变,插值处的内容都会更新。
三、 vue 的语法
3.1 基本类型数据和字符串
<div id="app-2">
{
{code}}
从 0 开始: {
{message}}
</div>
<script type="text/javascript">
var vm = new Vue({
el: '#app-2',
data: {
code: 1_3_3,
message: 'Hello World!'
}
})
</script>
3.2 对象类型数据
-
支持 ognl 语法
学号:{ {stu.stuNum}}
姓名:{ {stu.stuName}}
性别:{ {stu.stuGender}}
年龄:{ {stu.stuAge}}
3.3 条件 v-if
v-if : 用来控制切换一个元素是否显示 (底层控制是 DOM 元素,操作 DOM)
注:在浏览器中网页打开这个文件 F12,从标签上可以看到没有 stu.stuGender == 'F'
对应的元素。即条件不成立,网页不会渲染该 DOM,连标签都不会有。
<div id="app-4">
学号:{
{stu.stuNum}} <br />
姓名:{
{stu.stuName}} <br />
性别:
<label v-if="stu.stuGender == 'M'">
男
</label>
<label v-if="stu.stuGender == 'F'">
女
</label>
<br />
年龄:{
{stu.stuAge}}
</div>
<script type="text/javascript">
var vm = new Vue({
el: '#app-4',
data: {
stu: {
stuNum: '10001',
stuName: '张三',
stuGender: 'M',
stuAge: 20
}
}
})
</script>
3.4 循环 v-for
v-for
指令基于一个数组来渲染一个列表。在
v-for
块中,我们可以访问所有父作用域的 property。v-for
还支持一个可选的第二个参数,即当前项的索引。
<div id="app-5">
<table border="1" cellspacing="0" width="400">
<tr>
<th>序号</th>
<th>学号</th>
<th>姓名</th>
<th>性别</th>
<th>年龄</th>
</tr>
<tr v-for="(stu, index) in stus">
<td>{
{index + 1}}</td>
<td>{
{stu.stuNum}}</td>
<td>{
{stu.stuName}}</td>
<td>
<table v-if="stu.stuGender == 'M'">
男
</table>
<table v-if="stu.stuGender == 'F'">
女
</table>
</td>
<td>{
{stu.stuAge}}</td>
</tr>
</table>
</div>
<script type="text/javascript">
var vm = new Vue({
el: '#app-5',
data: {
stus: [
{
stuNum: '10001',
stuName: '张三',
stuGender: 'M',
stuAge: 20
},
{
stuNum: '10002',
stuName: '李四',
stuGender: 'M',
stuAge: 23
},
{
stuNum: '10003',
stuName: '郑红',
stuGender: 'F',
stuAge: 19
}
]
}
})
</script>
3.5 绑定标签属性 v-bind
-
v-bind:属性名 缩写:
:属性名
</tr> </table>
序号 学号 姓名 性别 年龄 { {index + 1}} { {stu.stuNum}} { {stu.stuName}} 男 女
{ {stu.stuAge}}
3.6 表单标签的双向绑定 v-model
-
只能使用在表单输入标签
-
v-model:value 可以简写为 v-model
双向绑定:{ {message}}
四、vue 实例
每个使用 vue 进行数据渲染的网页文档都需要创建一个 vue 实例 — — ViewModel
4.1 vue 实例的生命周期
vue 实例生命周期 — — vue 实例从创建到销毁的过程
- 创建 vue 实例 (初始化 data,加载 el)
- 数据挂载 (将 vue 实例 data 中的数据渲染到网页 HTML 标签)
- 重新渲染 (当 vue 的 data 数据发生变化,会重新渲染到 HTML 标签)
- 销毁实例
创建对象 ---- 属性初始化 ---- 获取属性值 ----- GC 回收
4.2 钩子函数
为了便于开发者在 vue 实例生命周期的不同阶段进行特定的操作,vue 在生命周期四个阶段的前后分别提供了一个函数,这个函数无需开发者调用,当 vue 实例到达生命周期的指定阶段会自动调用对应的函数。
<div id="app-8">
<label v-once>{
{message}}</label><br />
<label>{
{message}}</label><br />
<input type="text" v-model="message">
</div>
<script type="text/javascript">
var vm = new Vue({
el: '#app-8',
data: {
message: 'Hello World!!'
},
beforeCreate: function () {
// 1. data 初始化之前执行,不能操作 data
},
create: function () {
// 2. data 初始化之后执行,模板加载之前,可以修改 / 获取 data 中的值
console.log(this.message);
// this.message = 'Hello World!! create()';
},
beforeMount: function () {
// 3. 模板加载之后,数据初始渲染(挂载)之前,可以修改 / 获取 data 中的值
// this.message = 'Hello World!! beforeMount';
},
mounted: function () {
// 4. 数据初始渲染(挂载)之后,可以对 data 中的变量进行修改,但是不会影响 v-once 的渲染
// this.message = "Hello World!! mounted";
},
beforeUpdate: function () {
// 5. 数据渲染之后,当 data 中的数据发生变化触发重新渲染,渲染之前执行此函数
console.log("---" + this.message);
this.message = 'Hello World!! beforeUpdate';
},
update: function () {
// 6. data 数据被修改之后,重新渲染到页面之后
// this.message = "Hello World!! update";
},
beforeDestroy: function () {
// 7. 实例销毁之前
},
destroy: function () {
// 8. 实例销毁之后
}
})
</script>
五、 计算属性和侦听器
5.1 计算属性
data 中的属性可以通过声明获得,也可以