Vue基础知识点总结

小胖梅前端

已于 2023-07-28 13:55:12 修改

阅读量830

点赞数 3

文章标签： vue.js 前端 javascript

于 2023-07-05 20:21:50 首次发布

本文链接：https://blog.csdn.net/xm1037782843/article/details/131563157

版权

Vue2-第二版-后台管理系统项目实战/vue+element-ui/vue经典全套系统案例讲解_哔哩哔哩_bilibili

MVVM💥💥

本质：一种架构模式（编写代码的方式）。

理解：不需要操作dom的代码编写方式。

特点：（需要记忆）

数据驱动视图：数据变化，页面会自动变化。（我们不操作dom）
数据双向绑定：页面变化，数据会自动变化。（我们不操作dom）

组件

本质：一个.vue文件，就是一个组件

特点：由三部分组成

template：书写html代码
- 注意：必须有一个根节点
script：书写JS代码
style：书写样式代码

插值表达式

作用：给标签设置内容

语法：{ { 表达式 } }

指令💥💥

三个特点：

所有的指令都是，特殊的 标签属性可以实现特殊功能
所有的指令都是，都以 v-开头
所有的指令都是，都是等号右侧连接引号，如， v-xxx="..."

v-bind

作用：给标签设置属性

语法：v-bind:属性名="表达式"

v-on

作用：绑定事件

语法：v-on:事件名="..."

事件对象获取

// 函数通过形参获取
<button @click="函数名" > 123 < /button>
    

 // 通过$event传入事件对象   
 <button @click="函数名(参数1， $event)" > 123 </button>

鼠标事件修饰符

作用：给事件增强功能

语法：@鼠标事件.修饰符="..."

种类（常用）:

.prevent：阻止默认行为
.stop：阻止事件冒泡

按键修饰符

作用：给事件增强功能

语法：@键盘事件.修饰符="..."

种类:

.enter：监听回车按键触发
.esc：监听Esc按键触发

v-if和v-show

作用：控制标签的显示和隐藏

语法：v-if="布尔值"。布尔为true，标签显示。为false，标签不显示

区别：

v-show：通过样式display：none控制隐藏
v-if：通过创建或销毁，控制显示与隐藏

场景：

频繁创建，用v-show，节省性能
不频繁数据，敏感数据，使用v-if

v-if 和 v-else-if 和v-else

语法：

v-if="布尔值"
v-else-if="布尔值"
v-else

注意：

v-if、 v-else-if、 v-else三者之间，不能放入其它标签

v-model 💥💥💥

作用：数据双向绑定

语法： v-model="变量名"

双向绑定：

数据变化，页面自动变化。
页面变化，数据自动变化。

场景：💥💥

收集用户输入内容
回填表单数据

v-model修饰符

语法：v-model.修饰符="变量名"

种类：

.number: 将收集的数据，转为数字格式，再存给变量
.trim：去除首尾空白字符
.lazy：失去焦点时，才收集数据

v-for

作用：创建多个标签

口诀：需要生成多个谁，就写在谁身上

语法：

v-for="item in 数组" :key="数据.id"
v-for="(item, index) in 数组" :key="数据.id"

key属性

作用：提高dom更新效率

口诀： 💥💥💥有id用id，没id用唯一，没唯一用索引

:style 和 :class👍

作用：给标签添加样式

语法：:class="{类名：布尔值}" 为ture添加类名，为false去除类名

语法: style="{css属性名: 值, 小驼峰属性名：值， '连字符属性名'：属性值}"

计算属性

作用：根据其它的数据，计算得来一个新的值

优势：

只有依赖的数据变化，才会重新计算
计算属性，自带缓存效果

注意💥：计算属性名称，不能和data数据 methods方法其它的计算属性成名

语法：

简写写法：只读不改，用简写

computed: {
    xxx(){    
      return ... // 💥💥 必须有返回值
    }
}

组件通信-父传子

组件通信-子传父

组件通信-单项数据流

💥 Vue 单项数据流：

v-model语法糖

本质：:value和@input，两个指令二合一

ref和$refs

作用：1获取dom； 2获取组件实例对象

步骤：

1.绑定ref属性： <标签名 ref="xxx"></标签名>

2.通过$refs.xxx获取： this.$refs.xxx

$nextTcik

作用：等dom更新结束，再执行某些代码

语法：

this.$nextTick(() => {
    
    // dom更新后， 回调函数自动执行
    
})

1
2
3
4
5

动态组件

作用：在同一个位置，动态切换，显示不同的组件

步骤：

插槽

场景：当组件内，有不确定的标签时，使用插槽.

种类3种：

场景：组件内， 只有一处有不确定的标签时，使用匿名插槽

步骤：

语法：

子组件.vue

vue

// 1. 子组件内， 使用slot标签占位
<slot>默认值（如果父组件不传任何内容，默认值将显示）</slot>

1
2

父组件.vue

vue

// 2. 父组件内，子组件标签夹着的内容区域， 传给`slot`内容
<hm-child>
  <xxx> 你要传给slot区域的内容 </xxx>
</hm-child>

1
2
3
4

场景：组件内， 有多处有不确定的标签时

简写：v-slot:xxx可以简化成#xxx

步骤：

语法：

示例：

子组件.vue：

vue

<template>
  <slot name="xxx">默认值1</slot>
  <slot name="zzz">默认值2</slot>
</template>

1
2
3
4

父组件.vue：

vue

<hm-child>
  <template #xxx>
    <span> 你要传给slot-xxx区域的内容 </span>
  </template>

  <template #zzz>
    <span> 你要传给slot-zzz区域的内容 </span>
  </template>
</hm-child>

1
2
3
4
5
6
7
8
9

作用：组件内的数据，可以传给父组件使用

步骤：

语法：

注意💥：

路由参数

路由模式

种类：

语法：

new VueRouter({
  mode: "history" // 不写mode为hash路由
})

1
2
3

编程式导航

了解-导航种类：

跳转方式

this.$router.push("/路径")

this.$router.back() // 返回上一页

this.$router.go(-1) // 返回上一页

1
2
3
4
5

路由传参

// 传查询字符串：  ?keyword=123&name=xxx
this.$router.push({path: "/路径名", query: { 属性名: 值}})

// 传动态路由： 路径传值
this.$router.push('/路径名/' + 参数值)

1
2
3
4
5

概念

脚手架

本质：前端脚手架是一个npm包

作用：一键生成一个空的项目，已配置好需要的环境，提高程序员开发效率。

问题：

MVVM💥💥💥💥💥

本质：一种架构模式（编写代码的方式）。

理解：不需要操作dom的代码编写方式。

背景：现代前端项目，代码量非常大，需要分不同的文件管理代码。

本质：

优势：

扩展问题：

Axios

参数位置：

扩展：

ES6入门指南

面试题：

JS数据类型：

面试题

diff算法-更新策略

设计目的： 比较新旧虚拟节点，找出需要更新的节点，从而最小化DOM操作的次数，提高页面的性能。

策略:

说一下Vue的声明周期

常用：四大阶段、8个钩子函数

👍增加使用场景

本质：某个时机，会自动执行的函数

常用的钩子函数：

2.完整写法: 需要对计算属性赋值时，用完整

computed: {
  xxx: {
    get() { // 💥💥 必须有返回值     
      return  ...
    },
    set(val) { // 形参val，是计算属性接收到的值
        
    }
  }
}

侦听器

简写写法 - 基本数据类型

watch:{
  被监听的数据名(){
        
  }
}

完整写法 - 引用数据类

watch: {

  被监听的数据名:  {
    immediate: true
    deep: true,
    handler(){
        
    }
  }

}

1
2
3
4
5
6
7
8
9
10
11

组件

组件注册

规范：

注册的组件：大驼峰，如HmButton
使用组件：小写+连字符, 如<hm-button>
文件名：
1. 小写+连字符，如hm-button.vue
2. 大驼峰，如HmButton.vue
父组件内，在自组件标签上，写属性
子组件内，通过props属性接收
子组件内，通过：$emit(“自定义事件”, 参数，参数2)
父组件内，子组件标签上，： @自定义事件名="函数式"
👎不推荐子组件，直接修改父组件传来的数据
👍让父组件自己修改数据
设置 <component :is="组件名称" >
切换组件名称 变量
匿名插槽
具名插槽
作用域插槽
子组件内，使用<slot></slot>占位
父组件内，子组件标签夹着的内容区域，设置传给slot的内容
子组件内，使用<slot/>占位，并给<slot /> 设置不同的name属性
父组件内，子组件标签夹着的内容区域，使用<template #xxx />，传给slot内容
👍 <slot name="xxx"/> 与 <template #xxx > 内容 </template>
👍 <slot /> 与 <template #default > 内容 </template>
子组件内，给标签，设置属性
父组件内，通过#xxx="对象变量"，接收数据
<slot name="xxx" yes="确定" no="取消" /> 和 <template #xxx="{yes, no}" />
<slot yes="确定" no="取消" /> 和 <template #default="{yes, no}" />
为什么叫作用域插槽？ 父组件接收的数据，只能在<template #xxx="{}" />标签范围内使用
动态路由：
1. .传：
  1. 改造动态路由， path: "路径名/:自定义属性名"
  2. 路径传参
2. 接收: $route.params
3. 场景：必传参数
查询（搜索）字符串： ？aa=xx&bb=yy
1. 传：不用改造
2. 接： $route.query
3. 场景：可选参数
hash路由：带#
history路由：不带#，需要服务度端支持
声明式导航： router-link
编程式导航：通过JS跳转
vue2脚手架，如何使用？答案
项目名称，是否可以有中文或特殊符号？能否叫vue、webpack之类？推荐命名方式是什么？答案
数据驱动视图：数据变化，页面会自动变化。（我们不操作dom）
数据双向绑定：页面变化，数据会自动变化。（我们不操作dom）
一个大的页面，会先拆分成不同的小组件。
通过组装多个小组件，组合成一个页面。
便于维护
便于复用
created：创建后，发请求，请求数据
mounted：渲染后，最先获取dom
Axios中有没有钩子函数？
query 用 params
body 用 data写
ES6之前6种：
1. string 、number、undefined、null、boolean、
2. 对象（易错点：💥💥 函数、数组、对象都属于对象数据类型）
ES6新增了第7种：Symbol
比较同级根元素：
1. 如果类型变化，不复用该根元素。该元素及后代元素,，全部删除。
2. 如果类型没变, 复用该根元素，对比属性，更新Dom属性。
比较同级兄弟节点：
1. 如果不写key，下标相同的节点，进行对比。根据策略1, 决定是否复用。
2. 如果有写key，key相同的节点进行对比,，根据策略1, 决定是否复用。
创建- 前，后
挂载- 前，后
更新- 前，后
销毁- 前，后
created 发请求
mounted最新获取dom，比如加载后立马激活input

小胖梅前端

关注

3
点赞
踩
5

收藏

觉得还不错? 一键收藏
1
评论
Vue基础知识点总结

比较新旧虚拟节点，找出需要更新的节点，从而最小化DOM操作的次数，提高页面的性能。注意💥：计算属性名称，不能和data数据 methods方法其它的计算属性成名。作用：一键生成一个空的项目，已配置好需要的环境，提高程序员开发效率。背景：现代前端项目，代码量非常大，需要分不同的文件管理代码。口诀： 💥💥💥有id用id，没id用唯一，没唯一用索引。作用：根据其它的数据，计算得来一个新的值。作用：在同一个位置，动态切换，显示不同的组件。作用：1获取dom；作用：组件内的数据，可以传给父组件使用。
复制链接

扫一扫