Vue学习笔记总结
目录
1、Vue核心
1.1什么是vue?
1.2什么是mvvm?
编辑 1.3插值表达式{{}}
2.Vue中的常用指令
2.1内容渲染指令
2.2条件渲染指令
2.3事件绑定指令
2.4属性绑定指令
2.5列表渲染指令
2.5.1小案例-小黑的书架
2.6v-for中的key
2.7双向绑定指令
3.指令修饰符
3.1什么是指令修饰符？
3.2按键修饰符
3.3v-model修饰符
3.4事件修饰符
4.v-bind对样式控制的增强-操作class
4.1语法：
4.2对象语法
4.3数组语法
4.4代码练习
5.v-bind对有样式控制的增强-操作style
5.1语法
5.2代码练习
5.3进度条案例
6.v-model在其他表单元素的使用
6.1讲解内容：
6.2代码准备
7.computed计算属性
7.1概念
7.2语法
7.3注意
8.computed计算属性 VS methods方法
8.1computed计算属性
8.2methods计算属性
8.3计算属性的优势
8.4总结
9.Vue生命周期
9.1Vue生命周期钩子
1、Vue核心
1.1什么是vue?
Vue (发音为 /vjuː/，类似 view) 是一款用于构建用户界面的 JavaScript 框架。它基于标准 HTML、CSS 和 JavaScript 构建，并提供了一套声明式的、组件化的编程模型，帮助你高效地开发用户界面。无论是简单还 是复杂的界面，Vue 都可以胜任。
https://cn.vuejs.org/ 最新vue3.x官方参考地址
1.2什么是mvvm?
MVVM，是Model-View-ViewModel的简写，是M-V-VM三部分组成。它本质上就是MVC 的改进版。MVVM 就是将其中的View 的状态和行为抽象化，其中ViewModel将视图 UI 和业务逻辑分开，它可以取出 Model 的数据同时帮忙处理 View 中由于需要展示内容而涉及的业务逻辑。 MVVM采用双向数据绑定，view中数据变化将自动反映到viewmodel上，反之，model中数据变化也将会自 动展示在页面上。把Model和View关联起来的就是ViewModel。ViewModel负责把Model的数据同步到View 显示出来，还负责把View的修改同步回Model。
MVVM核心思想，是关注model的变化，让MVVM框架利用自己的机制自动更新DOM，也就是所谓的数据视图分离，数据不会影响视图。
1.3插值表达式{{}}
插值表达式是一种Vue的模板语法
我们可以用插值表达式渲染出Vue提供的数据
1.作用：利用表达式进行插值，渲染到页面中
表达式：是可以被求值的代码，JS引擎会讲其计算出一个结果
以下的情况都是表达式：
money + 100 money - 100 money * 10 money / 10 price >= 100 ? '真贵':'还行' obj.name arr[0] fn() obj.fn()
2.语法
插值表达式语法：{{ 表达式 }}
{{title}}
{{nickName.toUpperCase()}}
{{age >= 18 ? '成年':'未成年'}}
{{obj.name}}
{{fn()}}
2.Vue中的常用指令
概念：指令（Directives）是 Vue 提供的带有 v- 前缀 的 特殊 标签属性。
为啥要学：提高程序员操作 DOM 的效率。
vue 中的指令按照不同的用途可以分为如下 6 大类：
-
内容渲染指令（v-html、v-text）
-
条件渲染指令（v-show、v-if、v-else、v-else-if）
-
事件绑定指令（v-on）
-
属性绑定指令 （v-bind）
-
双向绑定指令（v-model）
-
列表渲染指令（v-for）
指令是 vue 开发中最基础、最常用、最简单的知识点。
2.1内容渲染指令
内容渲染指令用来辅助开发者渲染 DOM 元素的文本内容。常用的内容渲染指令有如下2 个：
-
v-text（类似innerText）
-
-
使用语法：
hello
-
类似 innerText，使用该语法，会覆盖 p 标签原有内容
-
-
v-html（类似 innerHTML）
-
-
使用语法：
hello
-
类似 innerHTML，使用该语法，会覆盖 p 标签原有内容
-
类似 innerHTML，使用该语法，能够将HTML标签的样式呈现出来。
-
代码演示：
个人信息
// 既然指令是vue提供的特殊的html属性，所以咱们写的时候就当成属性来用即可
姓名：
简介：
2.2条件渲染指令
条件判断指令，用来辅助开发者按需控制 DOM 的显示与隐藏。条件渲染指令有如下两个，分别是：
-
v-show
-
作用： 控制元素显示隐藏
-
语法： v-show = "表达式" 表达式值为 true 显示， false 隐藏
-
原理： 切换 display:none 控制显示隐藏
-
场景：频繁切换显示隐藏的场景
-
-
v-if
-
作用： 控制元素显示隐藏（条件渲染）
-
语法： v-if= "表达式" 表达式值 true显示， false 隐藏
-
原理： 基于条件判断，是否创建 或 移除元素节点
-
场景： 要么显示，要么隐藏，不频繁切换的场景
示例代码：
我是v-show控制的盒子我是v-if控制的盒子 -
-
v-else 和 v-else-if
-
作用：辅助v-if进行判断渲染
-
语法：v-else v-else-if="表达式"
-
需要紧接着v-if使用
-
示例代码：
性别：♂ 男
性别：♀ 女
成绩评定A：奖励电脑一台
成绩评定B：奖励周末郊游
成绩评定C：奖励零食礼包
成绩评定D：惩罚一周不能玩手机
2.3事件绑定指令
使用Vue时，如需为DOM注册事件，及其的简单，语法如下：
-
v-on:简写为 @
-
内联语句
{{ count }} -
事件处理函数
注意：
-
事件处理函数应该写到一个跟data同级的配置项（methods）中
-
methods中的函数内部的this都指向Vue实例
-
黑马程序员
3.给事件处理函数传参
-
如果不传递任何参数，则方法无需加小括号；methods方法中可以直接使用 e 当做事件对象
-
如果传递了参数，则实参
$event表示事件对象，固定用法。
小黑自动售货机
银行卡余额：{{ money }}元
2.4属性绑定指令
-
作用：动态设置html的标签属性 比如：src、url、title
-
语法：v-bind:属性名=“表达式”
-
v-bind:可以简写成 => :
比如，有一个图片，它的 src 属性值，是一个图片地址。这个地址在数据 data 中存储。
则可以这样设置属性值：
-
-
![]()
![]()
2.5列表渲染指令
Vue 提供了 v-for 列表渲染指令，用来辅助开发者基于一个数组来循环渲染一个列表结构。
v-for 指令需要使用 (item, index) in arr 形式的特殊语法，其中：
-
item 是数组中的每一项
-
index 是每一项的索引，不需要可以省略
-
arr 是被遍历的数组
此语法也可以遍历对象和数字
//遍历对象
{{value}}
value:对象中的值
key:对象中的键
index:遍历索引从0开始
//遍历数字
{{item}}
item从1 开始2.5.1小案例-小黑的书架
需求：
1.根据左侧数据渲染出右侧列表（v-for）
2.点击删除按钮时，应该把当前行从列表中删除（获取当前行的id，利用filter进行过滤）
准备代码：
小黑的书架
-
《红楼梦》
曹雪芹
2.6v-for中的key
语法： key="唯一值"
作用：给列表项添加的唯一标识。便于Vue进行列表项的正确排序复用。
为什么加key：Vue 的默认行为会尝试原地修改元素（就地复用）
实例代码：
-
{{ item.name }}
{{ item.author }}
注意：
-
key 的值只能是字符串 或 数字类型
-
key 的值必须具有唯一性
-
推荐使用 id 作为 key（唯一），不推荐使用 index 作为 key（会变化，不对应）
2.7双向绑定指令
所谓双向绑定就是：
-
数据改变后，呈现的页面结果会更新
-
页面结果更新后，数据也会随之而变
作用： 给表单元素（input、radio、select）使用，双向绑定数据，可以快速 获取 或 设置 表单元素内容
语法：v-model="变量"
需求：使用双向绑定实现以下需求
-
点击登录按钮获取表单中的内容
-
点击重置按钮清空表单中的内容
账户：
密码：
3.指令修饰符
3.1什么是指令修饰符？
所谓指令修饰符就是通过“.”指明一些指令后缀 不同的后缀封装了不同的处理操作 —> 简化代码
3.2按键修饰符
-
@keyup.enter —>当点击enter键的时候才触发
代码演示：
@keyup.enter → 监听键盘回车事件
3.3v-model修饰符
-
v-model.trim —>去除首位空格
-
v-model.number —>转数字
3.4事件修饰符
-
@事件名.stop —> 阻止冒泡
-
@事件名.prevent —>阻止默认行为
-
@事件名.stop.prevent —>可以连用 即阻止事件冒泡也阻止默认行为
4.v-bind对样式控制的增强-操作class
为了方便开发者进行样式控制， Vue 扩展了 v-bind 的语法，可以针对 class 类名 和 style 行内样式 进行控制 。
4.1语法：
:class = "对象/数组">这是一个div
4.2对象语法
当class动态绑定的是对象时，键就是类名，值就是布尔值，如果值是true，就有这个类，否则没有这个类
适用场景：一个类名，来回切换
4.3数组语法
当class动态绑定的是数组时 → 数组中所有的类，都会添加到盒子上，本质就是一个 class 列表
使用场景:批量添加或删除类
4.4代码练习
黑马程序员
黑马程序员
5.v-bind对有样式控制的增强-操作style
5.1语法
5.2代码练习
5.3进度条案例
50%
6.v-model在其他表单元素的使用
6.1讲解内容：
常见的表单元素都可以用 v-model 绑定关联 → 快速 获取 或 设置 表单元素的值
它会根据 控件类型 自动选取 正确的方法 来更新元素
输入框 input:text ——> value 文本域 textarea ——> value 复选框 input:checkbox ——> checked 单选框 input:radio ——> checked 下拉菜单 select ——> value ...
6.2代码准备
小黑学习网
姓名：
是否单身：
性别:
男
女
所在城市:
自我描述：
7.computed计算属性
7.1概念
基于现有的数据，计算出来的新属性。 依赖的数据变化，自动重新计算。
7.2语法
-
声明在 computed 配置项中，一个计算属性对应一个函数
-
使用起来和普通属性一样使用 {{ 计算属性名}}
7.3注意
-
computed配置项和data配置项是同级的
-
computed中的计算属性虽然是函数的写法，但他依然是个属性
-
computed中的计算属性不能和data中的属性同名
-
使用computed中的计算属性和使用data中的属性是一样的用法
-
computed中计算属性内部的this依然指向的是Vue实例
8.computed计算属性 VS methods方法
8.1computed计算属性
作用：封装了一段对于数据的处理，求得一个结果
语法：
-
写在computed配置项中
-
作为属性，直接使用
-
js中使用计算属性： this.计算属性
-
模板中使用计算属性：{{计算属性}}
-
8.2methods计算属性
作用：给Vue实例提供一个方法，调用以处理业务逻辑。
语法：
-
写在methods配置项中
-
作为方法调用
-
js中调用：this.方法名()
-
模板中调用 {{方法名()}} 或者 @事件名=“方法名”
-
8.3计算属性的优势
-
缓存特性（提升性能）
计算属性会对计算出来的结果缓存，再次使用直接读取缓存，
依赖项变化了，会自动重新计算 → 并再次缓存
-
methods没有缓存特性
-
通过代码比较
小黑的礼物清单?
名字
数量
{{ item.name }}
{{ item.num }}个
礼物总数：{{ totalCount }} 个
8.4总结
1.computed有缓存特性，methods没有缓存
2.当一个结果依赖其他多个值时，推荐使用计算属性
3.当处理业务逻辑时，推荐使用methods方法，比如事件的处理函数
9.Vue生命周期
Vue生命周期：就是一个Vue实例从创建 到 销毁 的整个过程。
生命周期四个阶段：① 创建 ② 挂载 ③ 更新 ④ 销毁
1.创建阶段：创建响应式数据
2.挂载阶段：渲染模板
3.更新阶段：修改数据，更新视图
4.销毁阶段：销毁Vue实例
9.1Vue生命周期钩子
Vue生命周期过程中，会自动运行一些函数，被称为【生命周期钩子】→ 让开发者可以在【特定阶段】运行自己的代码
