Vue 3.0 笔记
Vue 3.0 笔记
WaterBoatNode（后端）中的 MVC 与 前端中的 MVVM 之间的区别（了解内容）
-
+
- MVC 主要是后端的分层开发思想；把 一个完整的后端项目，分成了三个部分：
-
+
- Model：（数据层）主要负责 数据库的操作； +
- View：（视图层）所有前端页面，统称为 View 层 +
- Controller：（业务逻辑层）主要处理对应的业务逻辑；（对于后台来说，这是开发的重点） +
+ - MVVM 是前端页面的分层开发思想，主要关注于 视图层 分离，也就是说：MVVM 把前端的视图层，分为了 三部分 Model, View, ViewModel
-
+
- Model 是 页面中，需要用到的数据 +
- View 是页面中的 HTML 结构； +
- ViewModel 是 一个 中间的调度者,提供了双向数据绑定的概念； +
+ - 为什么有了 MVC 还要有 MVVM
-
+
- 因为 MVC 是后端的开发思想，并没有明确定义前端的页面该如何开发； +
- MVVM 是前端的页面的开发思想，把每个页面，分成了三个部分，同时 VM 作为 MVVM 的核心，提供了双向数据绑定的概念，前端程序员，不需要手动渲染页面了，而且，页面数据发送变化，也不需要程序员手动把 数据的变化同步到 Model 中；这所有的操作，都是 VM 自动完成的！ +
- 有了 MVVM 的思想以后，前端只关心 页面交互逻辑，不关心页面如何渲染； +
+
Vue.js 基本代码 和 MVVM 之间的对应关系
-
+
- 注意：Vue 中，不推荐程序员手动操作 DOM 元素；所以，在 Vue 项目中，没有极其变态的需求，一般不要引入 Jquery； +
- Vue 代码解析执行的步骤：
-
+
- 当 VM 实例对象，被 创建完成之后 把模板和数据进行绑定 存储到内存中； +
- 当 VM 调用 mount()方法的时候 ，看到 mount(元素)把内存中已经渲染好的 html 结构插入到元素中去 +
+ - 注意：每当 vm 实例对象，监听到 data 中数据发生了变化，就会立即 重新解析 重新指向 model 内，所有的代码； +
什么是 Vue 中的指令
定义： Vue 中，通过一些特殊的语法，扩展了 HTML 的能力；
+-
+
- 将来 创建 Vue 实例的时候，Vue 会把 这些指令 都进行解析，从而，根据不同的指令，执行不同的操作、渲染不同的结果； +
8.1 Vue 指令之 插值表达式 {\{ }\}
-
+
基本使用演示
+
在指定的位置动态插入内容，例如：+1
<p>{{msg}}</p>
+在插值表达式中 使用简单的语句
+
+注意：插值表达式只能用在元素的内容区域；不能用在元素的属性节点中；
+
+
8.2 Vue 指令之 v-cloak
-
+
- 解决的问题
-
+
- 插值表达式有闪烁的问题（
v-cloak指令来解决闪烁问题）
+
+ - 插值表达式有闪烁的问题（
- 应用场景
-
+
- 当 网络比较卡的时候，我们可以为 最外层的 元素，添加
v-cloak，防止用户看到 插值表达式
+
+ - 当 网络比较卡的时候，我们可以为 最外层的 元素，添加
8.3 Vue 指令之 v-text
-
+
基本使用
+
在 元素的属性节点上，添加v-text指令，例如：+1
<p v-text="msg"></p>
+在
+v-text中 使用简单的语句
+
+v-text与{{}}的区别-
+
- 是否覆盖内容 +
- 指令闪烁问题 +
+应用场景
+-
+
- 向指定元素的内容区域中，渲染指定的文本； +
+
8.4 Vue 指令之 v-html
-
+
基本使用
+
在 元素的属性节点上，添加v-html指令，例如：+1
<div v-html="msg"></div>
+应用场景
+
当 服务器返回的数据中，包含的 HTML 的标签，此时，这些标签只能使用v-html来渲染；
+
8.5 Vue 指令之 v-bind: 属性绑定
-
+
基本使用
+-
+
+v-bind:是为 html 属性节点动态绑定数据的，例如：1
<button v-bind:title="titleStr">按钮</button>
+
+应用场景
+-
+
- 如果元素的属性值，需要动态地进行绑定，则需要使用
v-bind:指令
+
+- 如果元素的属性值，需要动态地进行绑定，则需要使用
简写形式
+-
+
+v-bind:指令可以简写成:，例如，可以简写成如下格式：1
<button :title="titleStr">按钮</button>
+
+
8.6 Vue 指令之 v-on: 事件绑定
-
+
基本使用：
+v-on:的作用，是为 HTML 元素，绑定 事件处理函数，例如：+1
<input type="button" value="按钮" v-on:click="事件处理函数名" />
+绑定事件处理函数并传参：
++1
<input type="button" value="按钮" v-on:click="show(123)" />
+简写形式：
+v-on:指令可以简写成@，例如，可以简写成如下格式：1
<input type="button" value="按钮" @click="事件处理函数名" />
+
8.7 【案例】跑马灯效果
8.8 Vue 指令之 v-model 实现 双向数据绑定
-
+
- 基本使用： +
-
+
可以把页面上数据的变化，自动同步更新到
+VM实例的data中。例如：1
<input type="text" v-model="msg" />
+
-
+
- 和
v-bind:的区别：-
+
v-bind:只能实现单向的数据同步data ---> 页面；
+v-model可以实现双向的数据同步data <--> 页面；
+
+ - 注意：
-
+
v-model只能 和 表单元素 配合使用，例如input、select、textarea等；
+v-model是 Vue 中 唯一支持 双向数据绑定的指令；
+
+ - 应用场景：
-
+
- 【案例】自动计算文本框中，字符串的长度 +
- 【案例】简易加法计算器 +
+
8.9 在 Vue 中使用 class 样式
-
+
类名数组：
+-
+
- 通过
v-bind:为元素的class绑定具体的类名：
+
+1
<p :class="['thin', 'red', 'big']">彬哥最帅</p>
+- 通过
类名数组中使用三元表达式，按需为元素添加某些类名
++1
<p :class="['thin', flag ? 'red' : '']">彬哥最帅a a a</p>
+应用场景
+-
+
- 【案例】网页开关灯 +
+
Vue 常用特性
表单基本操作
-
+
获取单选框中的值
+-
+
- 通过 v-model +
+1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21<!--
1、 两个单选框需要同时通过v-model 双向绑定 一个值
2、 每一个单选框必须要有value属性 且value 值不能一样
3、 当某一个单选框选中的时候 v-model 会将当前的 value值 改变 data 中的 数据
gender 的值就是选中的值，我们只需要实时监控他的值就可以了
-->
<input type="radio" id="male" value="1" v-model="gender" />
<label for="male">男</label>
<input type="radio" id="female" value="2" v-model="gender" />
<label for="female">女</label>
<script>
new Vue({
data: {
// 默认会让当前的 value 值为 2 的单选框选中
gender: 2,
},
});
</script>
+获取复选框中的值
+-
+
- 通过 v-model +
- 和获取单选框中的值一样 +
- 复选框
checkbox这种的组合时 data 中的 hobby 我们要定义成数组 否则无法实现多选
+
+1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25<!--
1、 复选框需要同时通过v-model 双向绑定 一个值
2、 每一个复选框必须要有value属性 且value 值不能一样
3、 当某一个单选框选中的时候 v-model 会将当前的 value值 改变 data 中的 数据
hobby 的值就是选中的值，我们只需要实时监控他的值就可以了
-->
<div>
<span>爱好：</span>
<input type="checkbox" id="ball" value="1" v-model="hobby" />
<label for="ball">篮球</label>
<input type="checkbox" id="sing" value="2" v-model="hobby" />
<label for="sing">唱歌</label>
<input type="checkbox" id="code" value="3" v-model="hobby" />
<label for="code">写代码</label>
</div>
<script>
new Vue({
data: {
// 默认会让当前的 value 值为 2 和 3 的复选框选中
hobby: ["2", "3"],
},
});
</script>
+获取下拉框和文本框中的值
+-
+
- 通过 v-model +
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27<div>
<span>职业：</span>
<!--
1、 需要给select 通过v-model 双向绑定 一个值
2、 每一个option 必须要有value属性 且value 值不能一样
3、 当某一个option选中的时候 v-model 会将当前的 value值 改变 data 中的 数据
occupation 的值就是选中的值，我们只需要实时监控他的值就可以了
-->
<!-- multiple 多选 -->
<select v-model="occupation" multiple>
<option value="0">请选择职业...</option>
<option value="1">教师</option>
<option value="2">软件工程师</option>
<option value="3">律师</option>
</select>
<!-- textarea 是 一个双标签 不需要绑定value 属性的 -->
<textarea v-model="desc"></textarea>
</div>
<script>
new Vue({
data: {
// 默认会让当前的 value 值为 2 和 3 的下拉框选中
occupation: ["2", "3"],
desc: "nihao",
},
});
</script>
+
表单修饰符
-
+
.number 转换为数值
+-
+
- 注意点： +
- 当开始输入非数字的字符串时，因为 Vue 无法将字符串转换成数值 +
- 所以属性值将实时更新成相同的字符串。即使后面输入数字，也将被视作字符串。 +
+.trim 自动过滤用户输入的首尾空白字符
+-
+
- 只能去掉首尾的 不能去除中间的空格 +
+.lazy 将 input 事件切换成 change 事件
+-
+
- .lazy 修饰符延迟了同步更新属性值的时机。即将原本绑定在 input 事件的同步逻辑转变为绑定在 change 事件上 +
+在失去焦点 或者 按下回车键时才更新
+1
2
3
4
5
6
7
8<!-- 自动将用户的输入值转为数值类型 -->
<input v-model.number="age" type="number" />
<!--自动过滤用户输入的首尾空白字符 -->
<input v-model.trim="msg" />
<!-- 在“change”时而非“input”时更新 -->
<input v-model.lazy="msg" />
+
自定义指令
-
+
- 内置指令不能满足我们特殊的需求 +
- Vue 允许我们自定义指令 +
Vue.directive 注册全局指令
1 | <!-- |
Vue.directive 注册全局指令 带参数
1 | <input type="text" v-color="msg" /> |
自定义指令局部指令
-
+
- 局部指令，需要定义在 directives 的选项 用法和全局用法一样 +
- 局部指令只能在当前组件里面使用 +
- 当全局指令和局部指令同名时以局部指令为准 +
1 | <input type="text" v-color="msg" /> |
计算属性 computed
-
+
- 模板中放入太多的逻辑会让模板过重且难以维护 使用计算属性可以让模板更加的简洁 +
- 计算属性是基于它们的响应式依赖进行缓存的 +
- computed 比较适合对多个变量或者对象进行处理后返回一个结果值，也就是数多个变量中的某一个值发生了变化则我们监控的这个值也就会发生变化 +
1 | <div id="computed-basics"> |
侦听器 watch
-
+
- 使用 watch 来响应数据的变化 +
- 一般用于异步或者开销较大的操作 +
- watch 中的属性 一定是 data 中 已经存在的数据 +
- 当需要监听一个对象的改变时，普通的 watch 方法无法监听到对象内部属性的改变，只有 data 中的数据才能够监听到变化，此时就需要 deep 属性对对象进行深度监听 +
1 |
|
过滤器
-
+
- Vue.js 允许自定义过滤器，可被用于一些常见的文本格式化。 +
- 过滤器可以用在两个地方：双花括号插值和 v-bind 表达式。 +
- 过滤器应该被添加在 JavaScript 表达式的尾部，由“管道”符号指示 +
- 支持级联操作 +
- 过滤器不改变真正的
data，而只是改变渲染的结果，并返回过滤后的版本
+ - 全局注册时是 filter，没有 s 的。而局部过滤器是 filters，是有 s 的 +
1 | <div id="app"> |
过滤器中传递参数
1 | <div id="box"> |
生命周期
-
+
- 事物从出生到死亡的过程 +
- Vue 实例从创建 到销毁的过程 ，这些过程中会伴随着一些函数的自调用。我们称这些函数为钩子函数 +
####常用的 钩子函数
+| beforeCreate | +在实例初始化之后，数据观测和事件配置之前被调用 此时 data 和 methods 以及页面的 DOM 结构都没有初始化 什么都做不了 | +
|---|---|
| created | +在实例创建完成后被立即调用此时 data 和 methods 已经可以使用 但是页面还没有渲染出来 | +
| beforeMount | +在挂载开始之前被调用 此时页面上还看不到真实数据 只是一个模板页面而已 | +
| mounted | +el 被新创建的 vm.$el 替换，并挂载到实例上去之后调用该钩子。 数据已经真实渲染到页面上 在这个钩子函数里面我们可以使用一些第三方的插件 | +
| beforeUpdate | +数据更新时调用，发生在虚拟 DOM 打补丁之前。 页面上数据还是旧的 | +
| updated | +由于数据更改导致的虚拟 DOM 重新渲染和打补丁，在这之后会调用该钩子。 页面上数据已经替换成最新的 | +
| beforeDestroy | +实例销毁之前调用 | +
| destroyed | +实例销毁后调用 | +
数组变异方法
-
+
- 在 Vue 中，直接修改对象属性的值无法触发响应式。当你直接修改了对象属性的值，你会发现，只有数据改了，但是页面内容并没有改变 +
- 变异数组方法即保持数组方法原有功能不变的前提下对其进行功能拓展 +
push() |
+往数组最后面添加一个元素，成功返回当前数组的长度 | +
|---|---|
pop() |
+删除数组的最后一个元素，成功返回删除元素的值 | +
shift() |
+删除数组的第一个元素，成功返回删除元素的值 | +
unshift() |
+往数组最前面添加一个元素，成功返回当前数组的长度 | +
splice() |
+有三个参数，第一个是想要删除的元素的下标（必选），第二个是想要删除的个数（必选），第三个是删除 后想要在原位置替换的值 | +
sort() |
+sort() 使数组按照字符编码默认从小到大排序,成功返回排序后的数组 | +
reverse() |
+reverse() 将数组倒序，成功返回倒序后的数组 | +
替换数组
-
+
- 不会改变原始数组，但总是返回一个新数组 +
| filter | +filter() 方法创建一个新的数组，新数组中的元素是通过检查指定数组中符合条件的所有元素。 | +
|---|---|
| concat | +concat() 方法用于连接两个或多个数组。该方法不会改变现有的数组 | +
| slice | +slice() 方法可从已有的数组中返回选定的元素。该方法并不会修改数组，而是返回一个子数组 | +
动态数组响应式数据
-
+
- Vue.set(a,b,c) 让 触发视图重新更新一遍，数据动态起来 +
- a 是要更改的数据 、 b 是数据的第几项、 c 是更改后的数据 +
图书列表案例
-
+
- 静态列表效果 +
- 基于数据实现模板效果 +
- 处理每行的操作按钮 +
1、 提供的静态数据
-
+
- 数据存放在 vue 中 data 属性中 +
1 | var vm = new Vue({ |
2、 把提供好的数据渲染到页面上
-
+
- 利用 v-for 循环 遍历 books 将每一项数据渲染到对应的数据中 +
1 | <tbody> |
3、 添加图书
-
+
- 通过双向绑定获取到输入框中的输入内容 +
- 给按钮添加点击事件 +
- 把输入框中的数据存储到 data 中的 books 里面 +
1 | <div> |
4 修改图书-上
-
+
- 点击修改按钮的时候 获取到要修改的书籍名单
-
+
- 4.1 给修改按钮添加点击事件， 需要把当前的图书的 id 传递过去 这样才知道需要修改的是哪一本书籍 +
+ - 把需要修改的书籍名单填充到表单里面
-
+
- 4.2 根据传递过来的 id 查出 books 中 对应书籍的详细信息 +
- 4.3 把获取到的信息填充到表单 +
+
1 | <div id="app"> |
5 修改图书-下
-
+
- 5.1 定义一个标识符， 主要是控制 编辑状态下当前编辑书籍的 id 不能被修改 即 处于编辑状态下 当前控制书籍编号的输入框禁用 +
- 5.2 通过属性绑定给书籍编号的 绑定 disabled 的属性 flag 为 true 即为禁用 +
- 5.3 flag 默认值为 false 处于编辑状态 要把 flag 改为 true 即当前表单为禁用 +
- 5.4 复用添加方法 用户点击提交的时候依然执行 handle 中的逻辑如果 flag 为 true 即 表单处于不可输入状态 此时执行的用户编辑数据数据 +
1 | <div id="app"> |
6 删除图书
-
+
- 6.1 给删除按钮添加事件 把当前需要删除的书籍 id 传递过来 +
- 6.2 根据 id 从数组中查找元素的索引 +
- 6.3 根据索引删除数组元素 +
1 | <tbody> |
常用特性应用场景
1 过滤器
-
+
- Vue.filter 定义一个全局过滤器 +
1 | <tr :key="item.id" v-for="item in books"> |
2 自定义指令
-
+
- 让表单自动获取焦点 +
- 通过 Vue.directive 自定义指定 +
1 | <!-- 2.2 通过v-自定义属性名 调用自定义指令 --> |
3 计算属性
-
+
- 通过计算属性计算图书的总数
-
+
- 图书的总数就是计算数组的长度 +
+
1 | <div class="total"> |
生命周期
-
+
- 2.0 +
-
+
- 3.0 +
组件
组件
-
+
- 组件 (Component) 是 Vue.js 最强大的功能之一 +
- 组件可以扩展 HTML 元素，封装可重用的代码 +
组件注册
全局注册
-
+
- vm.component(‘组件名称’, { }) 第 1 个参数是标签名称，第 2 个参数是一个选项对象 +
- 全局组件注册后，任何vue 实例都可以用 +
组件基础用
1 | <div id="example"> |
组件注意事项
-
+
- 组件参数的 data 值必须是函数同时这个函数要求返回一个对象 +
- 组件模板必须是单个根元素 +
- 组件模板的内容可以是模板字符串 +
1 | <div id="app"> |
局部注册
-
+
- 只能在当前注册它的 vue 实例中使用 +
1 | <div id="app"> |
Vue 调试工具
Vue 组件之间传值
父组件向子组件传值
-
+
- 父组件发送的形式是以属性的形式绑定值到子组件身上。 +
- 然后子组件用属性 props 接收 +
- 在 props 中使用驼峰形式，模板中需要使用短横线的形式字符串形式的模板中没有这个限制 +
1 | <div id="app"> |
子组件向父组件传值
-
+
- 子组件用
$emit()触发事件
+ $emit()第一个参数为 自定义的事件名称 第二个参数为需要传递的数据
+- 父组件用 v-on 监听子组件的事件 +
1 | <div id="app"> |
兄弟之间的传递
-
+
- 兄弟之间传递数据需要借助于事件中心，通过事件中心传递数据
-
+
- 提供事件中心 var hub = new Vue() +
+ - 传递数据方，通过一个事件触发 hub.$emit(方法名，传递的数据) +
- 接收数据方，通过 mounted(){} 钩子中 触发 hub.$on()方法名 +
- 销毁事件 通过 hub.$off()方法名销毁之后无法进行传递数据 +
1 | <div id="app"> |
vue-cli
安装与启动
1 | # 1 |
使用 sass 全局方法 @mixnin
-
+
- 先运行 vue add style-resources-loader +
配置 vue.config.js
+1 | const path = require("path"); |
样式穿透
https://github.com/vuejs/rfcs/blob/master/active-rfcs/0023-scoped-styles-changes.md
+vue-router
安装
1 | #下载 vue-router包 |
配置文件书写
1 | /* |
main.js 文件的书写
1 | /* |
路由重定向 router-redirect
1 | let routes = [ |
嵌套路由 router-nest
1 | let routes = [ |
路由传参 router-dynamic
直接接收
在路由规则中
+1 | let routes = [ |
在对应组件中
+1 | <template> |
通过 props 属性
在路由规则中
+1 | let routes = [ |
在对应组件中
+1 | <template> |
通过回调函数
在路由规则中
+1 | let routes = [ |
在对应组件中
+1 | <template> |
编程式导航 router-program
1 | // 如果在methods中 在created 在watch这样的方法中 使用this.$router.push() 跳转到另外的路由 |
命名路由
在路由规则中
+1 | let routes = [ |
在对应组件中
+1 | <template> |
Vuex 统一状态管理
VueX 概述
为什么要学习 VueX
父向子传值：父元素 v-bind 属性绑定数据，子元素使用 props 接受父元素传递的数据
子向父传值：父元素 v-on 事件绑定，子元素使用$emit 触发，并通过回调函数把值传递给父元素
兄弟组件之间共享数据：EventBus(mitt)
emitter.on() 接收数据的那个组件
emitter.emit() 发送数据的那个组件
VueX 简介
.
Vuex 是实现组件全局状态（数据）管理的一种机制，可以方便的实现组件之间的数据共享
+使用 Vuex 管理数据的好处：
A.能够在 vuex 中集中管理共享的数据，便于开发和后期进行维护
B.能够高效的实现组件之间的数据共享，提高开发效率
C.存储在 vuex 中的数据是响应式的，当数据发生改变时，页面中的数据也会同步更新
注意,不是任何数据都适合放在vuex中的，一般情况下，只有组件之间共享的数据，才有必要存储到vuex 中；对于组件中的私有数据，依旧存储在组件自身的data 中即可
VueX 的基本使用
1.安装
+1 | If using Vue 3.0 + Vuex 4.0: |
2.配置(store/index.js)
+1 | // 引入VueX |
3.挂载(src/main.js)
+1 | import { createApp } from "vue"; |
VueX 的核心概念
State(类似于 Vue 中的 data 选项)
State 提供唯一的公共数据源，所有共享的数据都要统一放到 Store 的 State 中进行存储
+定义语法:
+1 | const store = createStore({ |
访问:
+1 | // 组件的script中访问(方法1) |
mutation 相当于 Vue 中 methods
Mutation 用于修改 Store 中的数据。 1.只能通过 mutation 变更 Store 数据，不可以直接操作 Store 中的数据。 2.通过这种方式虽然操作起来稍微繁琐一些，但是可以集中监控所有数据的变化。
+方法 1(未传参数)
1.store/index.js
+1 | // 定义Mutation |
2.在某一个组件文件中
+1 | // 触发mutation |
方法 2(传参数)
1.store/index.js
+1 | import { createStore } from "vuex"; |
2.在某一个组件文件中
+1 | <template> |
方法 3
1.store/index.js
+1 | import { createStore } from "vuex"; |
2.在某一个组件文件中
+1 | <template> |
action 用于异步处理数据
Action 用于处理异步任务。
如果通过异步操作变更数据，必须通过 Action，而不能使用 Mutation，
但是在 Action 中还是要通过触发 Mutation 的方式间接变更数据。
方法 1
1.store/index.js
+1 | import { createStore } from "vuex"; |
2.在某一个组件中
+1 | methods: { |
方法 2
2.在某一个组件中使用
+1 | <template> |
getter 相当于 Vue 中 computed
Getter 用于对 Store 中的数据进行加工处理形成新的数据。
1.Getter 可以对 Store 中已有的数据加工处理之后形成新的数据，类似 Vue 的计算属性。
2.Store 中数据发生变化，Getter 的数据也会跟着变化
方法 1
1.store/index.js
+1 | import { createStore } from "vuex"; |
2.在某一个组件中使用
+1 | <template> |
++https://www.v2ex.com/t/347227 > https://bigdata.bihell.com/language/javascript/vue/vuex.html#揭开-vuex-的神秘面纱 > https://cn.vuejs.org/v2/guide/state-management.html#简单状态管理起步使用
+
总结
1 | // 一个完整的 vuex 例子 |
vue-compositionAPI 的使用
-
+
setup()
+
+- + +
定义变量 ref、reactive
-
+
- ref 定义简单数据类型 +
- reactive 定义复杂数据类型 +
1 | <template> |
方法的使用
1 | <template> |
watch 监听值的变化
1 | <template> |
watchEffect
1 | <template> |
computed
1 | <template> |
调用 vuex
-
+
- App.vue +
1 | <template> |
-
+
- store/index.js +
1 | import { createStore } from "vuex"; |
vue 获取元素
https://blog.csdn.net/weixin_43233914/article/details/108776124
+ +vue3 语法糖
rfcs/0000-script-setup.md at script-setup-2 · vuejs/rfcs (github.com)
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
