From 7955f910d1f78b2245f612b1b73abb96f78d7961 Mon Sep 17 00:00:00 2001 From: aaaaeeeen <3313416266@qq.com> Date: Tue, 30 May 2023 21:14:36 +0800 Subject: [PATCH 1/4] =?UTF-8?q?=E5=85=A8=E6=A0=88-=E6=9D=8E=E9=9D=99?= =?UTF-8?q?=E6=80=A1-vue=E7=AC=AC=E5=9B=9B=E6=AC=A1=E5=AD=A6=E4=B9=A0?= =?UTF-8?q?=E4=BB=BB=E5=8A=A1?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../Vue.md" | 1792 +++++++++++++++++ 1 file changed, 1792 insertions(+) create mode 100644 "src/\344\270\203\346\234\237\345\255\246\345\221\230\346\226\207\344\273\266\345\244\271/\346\235\216\351\235\231\346\200\241/\345\205\250\346\240\210-\346\235\216\351\235\231\346\200\241-vue\347\254\254\345\233\233\346\254\241\345\255\246\344\271\240\344\273\273\345\212\241/Vue.md" diff --git "a/src/\344\270\203\346\234\237\345\255\246\345\221\230\346\226\207\344\273\266\345\244\271/\346\235\216\351\235\231\346\200\241/\345\205\250\346\240\210-\346\235\216\351\235\231\346\200\241-vue\347\254\254\345\233\233\346\254\241\345\255\246\344\271\240\344\273\273\345\212\241/Vue.md" "b/src/\344\270\203\346\234\237\345\255\246\345\221\230\346\226\207\344\273\266\345\244\271/\346\235\216\351\235\231\346\200\241/\345\205\250\346\240\210-\346\235\216\351\235\231\346\200\241-vue\347\254\254\345\233\233\346\254\241\345\255\246\344\271\240\344\273\273\345\212\241/Vue.md" new file mode 100644 index 00000000..83daae83 --- /dev/null +++ "b/src/\344\270\203\346\234\237\345\255\246\345\221\230\346\226\207\344\273\266\345\244\271/\346\235\216\351\235\231\346\200\241/\345\205\250\346\240\210-\346\235\216\351\235\231\346\200\241-vue\347\254\254\345\233\233\346\254\241\345\255\246\344\271\240\344\273\273\345\212\241/Vue.md" @@ -0,0 +1,1792 @@ +# Vue + +==官方文档:[Vue.js - 渐进式 JavaScript 框架 | Vue.js (vuejs.org)](https://cn.vuejs.org/)== + +==vscode代码片段快捷键:vueapp== + +## 导入 + +### 认识Vue + +Vue 是一款用于构建用户界面的渐进式 JavaScript 框架。 + +- 全称是`Vue.js`或`Vuejs` +- 它基于标准 HTML、CSS 和 JavaScript 构建,并提供了一套声明式的、组件化的编程模型 +- 帮助你高效地开发用户界面,无论任务是简单还是复杂 + +渐进式框架: + +- 表示我们可以在项目中一点点来引入和使用`vue`,而不一定需要全部使用vue来开发整个项目(即不需要整个项目都是使用vue,而可以同时使用其他框架) + +前端: + +- 目前最流行的三大框架:Vue、React、Angular + + + +--- + + + +### 使用vue + +vue的本质: + +- 就是一个JS的库 +- 在项目中可以引入并使用它 + +--- + + + +### 安装vue + +1. 在页面中通过CDN的方式引入 +2. 下载vue的JS文件,并且自己手动引入 +3. 通过npm包管理工具安装使用 +4. 直接通过Vue CLI创建项目,并使用它 + +#### CDN引入 + +```html + +``` + +链接为vue源码 + +> [BootCDN - Bootstrap 中文网开源项目免费 CDN 加速服务](https://www.bootcdn.cn/) + +image-20230403111215101 + +缺点: + +- 在CDN服务器上,加载需要时间 + + + +#### 本地引用 + +将vue.js源码放在文件中(cv),script直接引入该文件 + +优点: + +- 已下载,不需要加载,效率高 + +--- + + + +### vue体验 + +#### 动态展示 + +image-20230403113516796 + +- 插值语法:通过在template中`{{变量名}}`的方式传递data中的数据 +- data:需要以函数形式,数据要作为该函数的返回值返回,即数据需要写在data中的函数的返回值中 +- 逗号 + + + +#### 展示列表数据 + +image-20230403120202287 + +- `
  • {{item}}
  • `:即遍历数组,并将其中的数据依次插入到列表中 +- data中的数据以数组形式保存 + + + +#### 计数器 + +image-20230404170213442 + +- 绑定事件 +- `methods`:对象,其中保存绑定的数据 + +--- + + + +### 模板重构 + +将vue中`template`的部分写到其挂载的元素中去 + +--- + + + +### 思想 + +#### 命令式编程与声明式编程 + +##### 命令式编程 + +原生js的模式 + +需要将每一步要执行的行为详细写出 告知浏览器 + +关注“how to do”,自己来完成整个how的过程 + +##### 声明式编程 + +vue(react、angular、小程序等)的模式 + +只需要将需要的数据写好,剩余的基本步骤均由vue来完成(在`createApp`中传入对象声明需要的内容,模板`template`、数据`data`、方法`methods`) + +关注“what to do”,由框架(机器)来完成“how”的过程 + +##### 总结 + +其本质是一样的,都是操作DOM + +只是编程的模式发生了改变 + + + +#### MVVM模型 + +MVC和MVVM都是一种软件的体系结构 + +- MVC是`model-view-controller`的简称,是在前期被使用的非常框架的架构模式,如:ios、前端 + + 所有通信都是单向的 + + + +- MVVM是`model-view-viewModel`的简称,是目前非常流行的架构模式 + + 数据在`model`中 + + 它采用双向绑定(data-binding):View的变动,自动反映在 ViewModel,反之亦然。 + + + +--- + + + +### options api + +#### data属性 + +- data属性是传入一个函数,并且需要该函数返回一个对象 + +- - 在vue2.x中,也可以传入一个对象 + - 在vue3.x中,必须传入一个函数,否则直接保存 + + +- data返回的对象会被vue的响应式系统劫持,之后对该对象的修改或访问都会在劫持中被处理 + - 所以我们在`template`或app中通过`{{counter}}`访问counter,可以从对象中获取数据 + - 因此我们在修改counter的值的时候,app中的`{{counter}}`也会发生改变 + - data的数据发生改变时,页面会重新渲染 + + + +#### methods属性 + +methods属性是一个对象,通常我们会在这个对象中定义很多的方法: + +- 这些方法可以被绑定到模板中 +- 在该方法中,我们可以使用this关键字来直接访问到data中返回的对象的属性 + +为什么不能使用箭头函数: + +- 我们在methods中要使用data来返回对象中的数据: + - 因此this是必须有值的,并且应该可以通过this获得data中返回对象中的数据 +- 这个this不能是window: + - 不能是window,因为window中我们无法获得data返回对象中的数据 + - 但是如果我们使用箭头函数,那么这个this就会是window了 +- 为什么是window呢: + - this在自己的上层作用域中查找this + - 最终刚好找到的是script中作用域中的this,即window + +- > 官方文档: + > + > 注意,不应该使用箭头函数来定义methods函数(eg:plus:()=>this.a++),理由是箭头函数绑定了父级作用域的上下文,所以this将不会按照期望指向组件实例,this.a将是undefined + +不使用箭头函数的情况下,this到底指向的是什么: + +- 事实上vue的源码中就是对methods中的所有函数进行了遍历,并且通过bind绑定了this + + + +#### computed属性 + +##### 复杂的data数据处理方式 + +在模板中可以直接通过**插值语法**显示一些data中的数据 + +但是在某些情况,我们可能需要对数据进行一些转化后再显示,或者需要将多个数据结合起来进行显示: + +- 在模板中使用表达式,可以非常方便的实现,但是设计它们的初衷是用于简单的运算 +- 在模板中放入太多的逻辑会让模板过重和难以维护 +- 并且如果多个地方都使用到,那么会有大量重复的代码 + +将逻辑抽离出去: + +- 可以,其中一种方式是将逻辑抽取到一个**method**中,放到methods的options中 + + 但是,这种做法有一个直观的弊端,就是所有的data使用过程都会变成一个方法的调用 + +- 另外一种方式就是使用计算属性**computed** + +##### computed计算属性使用 + +什么是计算属性: + +- > 对于**任何**包含**响应式数据**的**复杂**逻辑,你**都**应该使用计算属性 + +- 计算属性将被混入到组件实例中 + - 所以getter和setter的this上下文自动地绑定为组件实例 + +用法: + +- 选项:computed + - 类型:`{[key:string]:Function | {get:Function,set:Function}}` + +计算属性默认对应的是一个函数 + +##### computed和method区别 + +计算属性是有缓存的 + +- 计算属性会基于它们的依赖关系进行缓存 +- 在数据不发生变化时,计算属性是不需要重新计算的 +- 但是如果以来的数据发生变化,在使用时,计算属性依然会重新进行计算(是性能的优化) + +##### computed的set和get + +是computed的完整写法 + + + +#### watch属性 + +##### 使用 + +用于声明在数据更改时调用的侦听回调。 + +什么是侦听器: + +- 开发中我们在data返回的对象中定义了数据,这个数据通过插值语法等方式绑定到了template中 +- 当数据变化时,template会自动更新来显示最新的数据 +- 但是在某些情况下,我们希望在代码逻辑中侦听某个数据的变化,这时候就需要使用侦听器watch来使用了 + +详细信息 + +`watch` 选项期望接受一个对象,其中键是需要侦听的响应式组件实例属性 (例如,通过 `data` 或 `computed` 声明的属性)——值是相应的回调函数。该回调函数接受被侦听源的**新值**和**旧值**。 + +用法如下: + +- 选项:watch + +- 类型:`{[key:string]:string | function |object |array}` + +- 参数:默认有两个`newValue`和`oldValue`,若想获取被侦听源的**新值**和**旧值**,此两参数即可实现 + +- 获取原始对象:当为对象类型时 直接使用上两个参数获取的是proxy(即代理),可通过 + + - ```vue + console.log(...newValue) + ``` + + - ```vue + console.log(Vue.toRaw(newValue)) + ``` + +除了一个根级属性,键名也可以是一个简单的由点分隔的路径,例如 `a.b.c`。注意,这种用法**不支持**复杂表达式——仅支持由点分隔的路径。如果你需要侦听复杂的数据源,可以使用命令式的 [`$watch()`](https://cn.vuejs.org/api/component-instance.html#watch) API。 + +值也可以是一个方法名称的字符串 (通过 `methods` 声明),或包含额外选项的对象。当使用对象语法时,回调函数应被声明在 `handler` 中。 + +##### 侦听器watch选项使用 + +额外的选项包含: + +- **`immediate`**:在侦听器创建时立即触发回调。第一次调用时,旧值将为 `undefined`。 +- **`deep`**:如果源是对象或数组,则强制深度遍历源,以便在深度变更时触发回调。详见[深层侦听器](https://cn.vuejs.org/guide/essentials/watchers.html#deep-watchers)。 +- **`flush`**:调整回调的刷新时机。详见[回调的触发时机](https://cn.vuejs.org/guide/essentials/watchers.html#callback-flush-timing)及 [`watchEffect()`](https://cn.vuejs.org/api/reactivity-core.html#watcheffect)。 +- **`onTrack / onTrigger`**:调试侦听器的依赖关系。详见[侦听器调试](https://cn.vuejs.org/guide/extras/reactivity-in-depth.html#watcher-debugging)。 + +声明侦听器回调时避免使用箭头函数,因为它们将无法通过 `this` 访问组件实例。 + +###### deep选项 + +template是深度监听,watch默认不是深度监听: + +- 在默认情况下,watch知识在侦听info的**引用**变化,对**内部属性**的变化是不会做出反应的 + +- 这时候可以使用一个deep选项做一个更深层次的侦听 + +- ```vue + deep:true + ``` + +###### immediate选项 + +希望一开始是就会立即执行一次 + +- 这个时候可以使用immediate选项 + +- 这个时候无论后面数据是否有变化,侦听的函数都会有限执行一次 + +- ```vue + immediate:true + ``` + +##### 侦听器watch其他写法 + +`info.name` + + + + + + + + + + + + + + + + + + + +--- + +--- + +--- + +--- + + + +## 基础 + +### 模板语法 + +#### 基础 + +==快捷键:`vueapp`== + +![image-20230404215250611](https://aaaaeeen.oss-cn-beijing.aliyuncs.com/image-20230404215250611.png) + +react的开发模式: + +- react使用的jsx,所以对应的代码都是编写的**类似于js**的一种语法 +- 之后通过babel将jsx编译成 `react.createElement`函数调用 + +vue也支持jsx的开发模式: + +- 但是在大多数情况下,使用**基于HTML**的模板语法 +- 在模板中,允许开发者以声明式的方式将DOM和底层组件实例的数据绑定在一起 +- 在底层的实现中,vue将模板`编译成虚拟DOM渲染函数` + +--- + + + +#### Mustache插值语法 + +也叫双大括号语法 + +- data返回的对象是由添加到vue的响应式系统中 +- 当data的数据改变时,对应的内容也会发生改变 + +可使用: + +- 文本(data中的属性) +- js表达式 +- 三元运算符 +- 调用methods中的函数 + +不可使用: + +- 不可定义语句 + +--- + +--- + + + +### 常见的基本指令 + +#### 概述 + +vue官网可看,在api选项中 + +指令写在类似属性的位置,eg: + +```html +

    我是标题

    +``` + + + +##### v-once + +表示只会渲染一次 + +当值改变时,值发生变化,但该变化并不会渲染到页面上 + +该指令具有继承性,外部使用此指令时,内部同时遵从该指令 + + + +##### v-text + +作用与插值语法类似 + +```html +

    {{message}}

    +

    +``` + +但插值语法更灵活 + +```html +

    aaa {{message}} aaa

    +

    aaa

    +//message="hello vue" + +//输出结果 +aaa hello vue aaa +hello vue +``` + + + +##### v-html + +默认情况下,如果我们展示的内容本身是html的,那么vue并不会对其进行特殊的解析 + +- 即内容是html语法,如`content=hhh` +- 如果我们希望这个内容被vue可以解析出来,那么可以使用v-html来展示,eg:`` + + + +##### v-pre + +用于跳过元素和它的子元素的编译过程,显示原始的mustache标签 + +- 跳过不需要编译的节点,加快编译的速度 +- 类似于展示转义符本身时,要在其前再加一个转义符,否则无法显示 + + + +##### v-cloak + +浏览器渲染过程: + +1. 解析html,先将这些元素展示给用户 +2. 解析script,再将对应的操作翻回去改变html + +因此当脚本执行较慢时,展示给用户的首先会是html,之后才能变成真正想要展示的页面 + +因此就需要斗篷,即v-cloak,将html遮住,渲染完成后(即组件实例准备完毕后)将斗篷摘取(vue自动) + +v-cloak需要**与css配合使用**,eg: + +```html + + + + +

    {{message}}

    + + + +``` + + + +##### v-memo + +仅支持3.2+版本 + +缓存一个模板的子树。在元素和组件上都可以使用。为了实现缓存,该指令需要传入一个固定长度的依赖值数组进行比较。如果数组里的每个值都与最后一次的渲染相同,那么整个子树的更新将被跳过。举例来说: + +template + +```html +
    + ... +
    +``` + +当组件重新渲染,如果 `valueA` 和 `valueB` 都保持不变,这个 `
    ` 及其子项的所有更新都将被跳过。实际上,甚至虚拟 DOM 的 vnode 创建也将被跳过,因为缓存的子树副本可以被重新使用。 + +正确指定缓存数组很重要,否则应该生效的更新可能被跳过。`v-memo` 传入空依赖数组 (`v-memo="[]"`) 将与 `v-once` 效果相同。 + +--- + + + +#### v-bind绑定属性 + +前面的一系列指令,主要是将值插入到**模板内容**中 + +但是不了内容需要动态来决定之外,某些**属性**也希望能动态绑定,如: + +- 动态绑定a元素的href属性 +- 动态绑定img元素的src属性 + +绑定属性我们用v-bind: + +- **用途:**动态的绑定一个或多个 attribute,也可以是组件的 prop。 + +- **缩写:**`:` 或者 `.` (当使用 `.prop` 修饰符) +- **期望:**`any (带参数) | Object (不带参数)` +- **参数:**`attrOrProp (可选的)` +- **修饰符:** + - `.camel` - 将短横线命名的 attribute 转变为驼峰式命名。 + - `.prop` - 强制绑定为 DOM property。3.2+ + - `.attr` - 强制绑定为 DOM attribute。3.2+ + +##### 绑定基本属性 + +- **语法:** + + ```html + + //imgUrl是写在data中的数据 + + //语法糖(即简写,省去v-bind,仅留下:) + + ``` + + + +##### 绑定全局属性 + +###### 绑定class + +在开发中,有时我们的元素class也是动态的,如: + +- 当数据为某个状态时,字体显示红色 +- 当数据另一个状态时,字体显示黑色 + +绑定class有两种语法: + +- 对象语法 + +- 数组语法 + +- ```html +
    +
    +
    + ``` + +**对象语法** + +可以传给`:class={}`一个或多个对象 + +值为布尔值 + +动态绑定的clss可以和普通class同时使用 + +image-20230405203844133 + +**数组语法** + +可以把一个数组传给`:class`,用以启用一个class列表 + + + +###### 绑定style + +动态绑定style,需要在后面跟上对象类型 + +键值对需要是一个整体,可在其外加单引号 + +```HTML + +
    +
    +``` + + + +###### 绑定属性名 + +`:[name]=` + + + +###### 绑定对象 + +直接将对象中的键值对都绑定,而不用一个一个手动绑定 + +常用于给组件传参 + +```HTML +

    hhh

    +//info在data中 +//info:{name:"111",age:18,height:1.88} +``` + +--- + + + +#### v-on绑定事件 + +给元素绑定事件监听器。 + +可以绑定多个事件:直接写,或将方法放在对象中 + +- **缩写:**`@`(=`v-on:`) +- **期望的绑定值类型:**`Function | Inline Statement | Object (不带参数)` +- **参数:**`event` (使用对象语法则为可选项) + - 如果在绑定事件的时候,没有传递任何的参数,那么event对象而会被默认传递进来 + - 明确参数 + - 明确参数+event:在模板中想要明确获取event——`$event` +- **修饰符:** + - 修饰符相当于对事件进行了一些特殊的处理 + - `.stop` - 调用 `event.stopPropagation()`。阻止事件冒泡 + - `.prevent` - 调用 `event.preventDefault()`。阻止默认行为 + - `.capture` - 在捕获模式添加事件监听器。 + - `.self` - 只有事件从元素本身发出才触发处理函数。 + - `.{keyAlias}` - 只在某些按键下触发处理函数。 + - `.once` - 最多触发一次处理函数。 + - `.left` - 只在鼠标左键事件触发处理函数。 + - `.right` - 只在鼠标右键事件触发处理函数。 + - `.middle` - 只在鼠标中键事件触发处理函数。 + - `.passive` - 通过 `{ passive: true }` 附加一个 DOM 事件。 + +--- + + + +#### vue的条件渲染 + +##### 基础 + +在某些情况下,我们需要根据当前的条件决定某些元素或组件是否渲染,这个时候我们要进行条件判断了 + +vue提供了以下指令来进行条件判断: + +- v-if +- v-else +- v-else-if +- v-show + +##### v-if + +空对象是true,因此用: + +```html +v-if="Object.keys(info).length" +``` + +v-if的渲染原理: + +- v-if是惰性的 +- 当条件为false时,其判断的内容完全不会被渲染或会被销毁掉 +- 当条件为true时,才会真正渲染条件块中的内容 + + + +##### template元素 + +用于包裹,不会渲染 + +可以当作不可见的包裹元素,并在v-if上使用 + +仅支持vue3以上 + +将多个指令(多个元素)包裹起来,在外层写判断内部继承较为简单 + +- 但用div包裹,浏览器就要多渲染一个,影响性能 +- 因此用template包裹,仅起到包裹作用,并不渲染 + + + +##### v-show + +v-show与v-if的用法看起来时一致的,也是根据一个条件来决定是否显示元素或者组件 + +区别: + +- 用法上 + - v-show不支持template + - v-show不可以与v-else一起使用 + +- 本质: + - v-show无论是否需要显示到浏览器上,它的DOM实际都是存在的,只是通过CSS的`display`属性来进行切换 + - v-if条件为false时,其对应的元素压根不会被渲染到DOM中(惰性) + +- 选择: + - 如果我们的元素需要在显示与隐藏之间频繁的切换,那么使用v-show + - 如果不会频繁地发生切换,那么使用v-if + +--- + + + +#### v-for遍历 + +##### 基础 + +在真实开发中,我们往往会从服务器拿到一组数据,并且需要对其渲染 + +- 可以使用v-for来完成 +- v-for类似于JS中的for循环,可以用于遍历一组数据 + +v-for的基本格式是`item in 数组`: + +- 数组通常是来自data或prop,也可以是其他方式 +- item是我们给每项元素起的一个别名,可自定义 + +在遍历数组时疆场需要拿到数组的索引: + +- 如果需要索引,可以使用格式:`(item,index) in 数组` + +##### v-for列表渲染 + +image-20230406145903814 + +image-20230406150102012 + + + +##### v-for支持的类型 + +可迭代对象都支持: + +- 数组 +- 对象 +- 字符串 +- 数字 +- …… + +v-for也支持遍历**对象**,并支持一二三个参数: + +- 一个参数:`value in object` +- 两个参数:`(value,key) in object` +- 三个参数:`(value,key,index) in object` + +也支持遍历**数字**: + +- ```html + + ``` + +- 表示从1遍历到该数字 + + + +##### template元素 + +支持 + +与模板上的 `v-if` 类似,你也可以在 `