Vue2核心知识思维导图

青松xyz

2023-06-20

浏览量: 16

Vue

前端

计算机

Vue2核心知识

树图思维导图提供《Vue2核心知识》在线思维导图免费制作，点击“编辑”按钮，可对《Vue2核心知识》进行在线思维导图编辑，本思维导图属于思维导图模板主题，文件编号是：05ef13c3997b5aac1c90a626d6d1575d

思维导图大纲

Vue实例

new Vue(options)

指定Vue实例挂载的元素，可以是一个CSS选择器字符串，或一个DOM元素。

data

定义数据

1. 值可以为对象，也可以为函数，但组件中必须是函数。

2. data中尽量不要用箭头函数。

3. data中后续动态添加的新属性，Vue将无法监听这些属性的变化（不是响应式的），可以使用$set()解决该问题。

props

接收父组件传递的属性

子组件不能直接修改接收到的props的值——单项数据流。

三种接收方式

1. 仅接收

2. 接收的同时：限制类型

type

3.接收的同时：限制类型、限制必要性、指定默认值

type

required

default

methods

定义方法

Vue所管理的函数，不要用箭头函数定义。

非Vue所管理的函数，一般用箭头函数定义。

this指向

组件中：this是组件实例对象。

vm中：this是vm。

computed

计算属性

根据已有的数据计算得出新的属性值。

基于依赖进行计算。

内部具有缓存机制。

对比methods

计算属性依赖的内容发生变更时，才会重新计算。而方法是只要页面重新渲染，就会重新调用执行。

计算属性可以有getter和setter方法，可以通过setter方法来对计算属性进行修改，但使用频率不高。

watch

用于监听数据

被监视的可以是：data、computed、props等。

配置深度监视可以监测对象内部属性的改变。

与computed的对比

computed返回一个计算后的值，而watch没有返回值，它主要用于执行一些逻辑操作，例如异步请求数据等。

template

用于定义Vue实例的模板。

MVVM模型

模型（Model）

可以是：从服务器获取的数据、本地存储的数据。

视图（View）

视图通常由HTML模板表示，用于将模型的数据渲染到视图上。

视图模型（ViewModel）

视图和模型之间的桥梁，它负责处理视图和模型之间的通信和交互。

模板语法

插值语法

在模板中输出变量，可以写JavaScript表达式。例如：{{1+2}}，{{a}}，{{str.toUpperCase()}}，但不能写语句。

指令语法

v-model

基本使用

用于输入类DOM元素，实现双向数据绑定。可以实现表单元素值的双向同步。

进阶使用

用在组件标签上，是一种组件通信方式。

v-bind

简写为：将Vue实例的数据，绑定到元素的属性上。绑定的数据可以是属性或计算属性。

v-if、v-else、v-else-if

用于根据条件来添加或移除元素。

v-show

根据条件来控制元素的显示和隐藏。通过修改元素的display CSS属性来实现，元素始终存在于DOM中。

v-for

用于循环渲染列表中的元素，下面的【列表渲染】中会详细说。

v-on

简写为@，用于监听DOM事件，并触发Vue实例中对应的方法，可以通过指令参数传递事件名，也可以使用修饰符来对事件进行处理，下面的【事件处理】中会详细说。

v-text

用于将数据渲染到元素的文本内容中。v-text会将数据转换为字符串，而v-html会解析数据中的HTML标签。

样式绑定

class样式绑定

字符串写法

:class="xxx"，要绑定的样式，类名不确定。

对象写法

:class="{active:xxx}"，要绑定的样式，个数确定、类名确定，但不确定用不用。

数组写法

:class="[xxx,xxx,xxx]"，要绑定的样式，个数、类名都不确定。

style样式绑定

字符串写法

:style="xxx"，字符串写法。

对象写法

:style="xxx"，对象写法适用于：样式的属性名确定，但值不确定。

数组写法

:style="xxx"，对象写法适用于：样式的属性名确定，但值不确定。

列表渲染

v-for

遍历数组

遍历对象

<li v-for="(value,key,index) in car" :key="index"> {{value}} - {{key}} - {{index}}</li>

遍历字符串

<li v-for="(char,index) in str" :key="index"> {{char}} - {{index}} </li>

遍历指定次数

<li v-for="(number,index) in 10" :key="index"> {{number}} - {{index}} </li>

特殊情况（均不报错）

key的作用

提高性能

key属性帮助Vue跟踪每个节点的身份，当数据发生变化时，Vue可以更准确地确定哪些节点是新创建的、被修改的或被删除的。Vue通过比较新旧节点的key来最小化DOM操作，提高性能。

注意点

key具有唯一性，最好使用唯一的标识符，若后续有破坏顺序的操作，一定要避免使用随机数或索引值。

数组更新检测

Vue中操作数组，一定要用这7个数组的变更方法

push

unshift

pop

shift

sort

reverse

splice

事件绑定

使用 v-on:xxx 或 @xxx 绑定事件，xxx是事件名，同原生 DOM 事件名。

事件对象

Vue在触发事件回调时，会主动的给我们传入一个参数 —— event（事件对象）。

事件传参

不传递参数

@click="show" ，show 方法会收到一个event（事件对象）。

传一个参数

@click="show(6)" ，show方法只会收到一个6。

传多个参数

@click="show(6,7,8)" ，show方法会收到：6、7、8。

传参+事件对象

@click="show($event,6)"，show方法会收到：event、6。

事件修饰符

.stop

阻止事件冒泡。使用.stop修饰符可以阻止事件向上冒泡，即停止事件传播到父元素。

.prevent

阻止默认事件。使用.prevent修饰符可以阻止元素的默认行为，例如阻止表单提交或链接跳转等。

.once

只触发一次事件处理函数。使用.once修饰符可以确保事件处理函数只执行一次，之后会自动解绑。

键盘事件别名

回车 => enter

删除 => delete （退格、删除按键）

退出 => esc

空格 => space

换行 => tab（必须配合keydown去使用）

上 => up

下 => down

左 => left

右 => right

生命周期

何为生命周期？

在特定时刻自动执行的函数，(又称周期函数、钩子函数)

整体流程

1. beforeCreate

在初始化之前执行的函数

2. Created

在初始化之后执行的函数

3. beforeMount

在组件内容被渲染到页面之前自动执行的函数

注意：此时无法找到任何模板DOM节点

4. mounted

在组件内容被渲染到页面之后自动执行的函数

5. beforeUpdate

在数据将要变化之前自动执行的函数

6. updated

在数据发生变化之后自动执行的函数

7. beforeUnmount

在VUE实例销毁之前自动执行的函数

8. unmounted

在VUE实例销毁之后自动执行的函数

整体图示

子主题1

组件化

什么是组件？

每个组件都有自己的结构、样式和行为，并且可以在应用程序中独立使用或与其他组件组合在一起形成更大的功能。组件具备复用性，可以使用多次。

定义组件

Vue.extend(options)

其中的options和new Vue(options)几乎一样，但也有点小区别：

① 组件配置中不能写el。

② 组件配置中data必须写成函数。

全局组件

注册方式：Vue.component('组件名'，{})。

特点：全局组件只要定义，随处可以使用。

局部组件

注册方式：在父组件里new Vue({components:{Hello:Hello}})。

特点：只能在其父组件中使用。

关于组件名

一个单词组成

第一种写法：(首字母小写)：school

第二种写法：(首字母大写，推荐)：School

多个单词组成

第一种写法：kebab-case命名，例如：atguigu-school

第二种写法：CamelCase命名，例如：AtguiguSchool

VueComponent

组件的本质是一个构造函数，名为VueComponent

VueComponent是Vue.extend()生成的

Vue 和 VueComponent 的关系

子主题1

slot插槽

默认插槽

父组件写法

子组件写法

<slot>default value</slot>

具名插槽

概念：一个组件里，可以设置多个插槽，然后在父组件里可以写多个<template>来填充这些插槽。

父组件

子组件

作用域插槽

当子组件的具体标签输出方式，要有父组件决定时，可以使用作用域插槽。

父组件

<Game> <template scope="parmas"> <span>{{parmas.games}}<span> </template> </Game>

子组件

mixin 混入

什么是混入

混入（mixin）是一种用于在多个组件之间共享代码的技术。使用混入，您可以定义一组可重用的逻辑，然后将其混入到需要该逻辑的组件中。这样可以避免代码重复，提高代码的可维护性和可重用性。

优先级

数据和方法：组件data ，methods 优先级高于mixin data，methods优先级。

生命周期：生命周期函数，先执行mixin里面的，再执行组件里的。

自定义的属性、组件中的属性、优先级高于mixin属性的优先级。

局部mixin

mixins:[myMixin]

全局mixin

Vue.mixin( )

特别注意：Vue3中尽量避免使用mixin，因为可以使用CompositionAPI来代替，可维护性更高。

Linux 网络基础知识思维导图

U880113127

1.9

树图思维导图提供《Linux 网络基础知识》在线思维导图免费制作，点击“编辑”按钮，可对《Linux 网络基础知识》进行在线思维导图编辑，本思维导图属于思维导图模板主题，文件编号是：199680f0e48eac8a1aeaadb90447d4f4

掌握竞品分析的核心方法思维导图

U280312619

2.65

树图思维导图提供《掌握竞品分析的核心方法》在线思维导图免费制作，点击“编辑”按钮，可对《掌握竞品分析的核心方法》进行在线思维导图编辑，本思维导图属于思维导图模板主题，文件编号是：1287e7dc411446868eb1de211f1543ec

思维导图模板

高校与高等教育

其他学科

正文

相似思维导图模版

思维导图模版推荐

油酸功能化金属有机框架纳米片的摩擦学性能研究思维导图

首页

我的文件

我的团队

个人中心