Vue基础知识点总结

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

MVVM​

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

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

特点：（需要记忆）

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

组件​

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

特点：由三部分组成

1. template：书写html代码
   • 注意：必须有一个根节点
2. script：书写JS代码
3. style：书写样式代码

插值表达式​

作用： 给标签设置内容

语法：{ { 表达式 } }

指令​

三个特点：

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

v-bind​

作用：给标签设置属性

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

推荐：:属性名="表达式"

说明：任意的属性想实现js环境就可以通过v-bind:属性=’js环境表达式‘ 

v-on​

作用：绑定事件

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

推荐：@事件名="..."

 123 
 123 
 123 

事件对象获取​

// 函数通过形参获取
 123 < /button>
    

 // 通过$event传入事件对象   
  123 

鼠标事件修饰符​

作用：给事件增强功能

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

种类（常用）:

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

按键修饰符​

作用：给事件增强功能

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

种类:

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

v-if和v-show​

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

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

区别：

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

场景：

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

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

语法：

1. v-if="布尔值"
2. v-else-if="布尔值"
3. v-else

注意：

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

v-model ​

作用： 数据双向绑定

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

双向绑定：

1. 数据变化，页面自动变化。
2. 页面变化， 数据自动变化。

场景：

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

---

v-model修饰符​

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

种类：

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

---

v-for​

作用：创建多个标签

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

语法：

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

---

key属性​

作用： 提高dom更新效率

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

:style 和 :class​

作用：给标签添加样式

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

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

计算属性​

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

优势：

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

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

语法：

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

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更新结束， 再执行某些代码

语法：

js

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

1
2
3
4
5

动态组件​

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

步骤：

插槽​

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

种类3种：

---

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

步骤：

语法：

子组件.vue

vue

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

1
2

父组件.vue

vue

// 2. 父组件内，子组件标签夹着的内容区域， 传给`slot`内容

   你要传给slot区域的内容 

1
2
3
4

---

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

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

步骤：

语法：

示例：

子组件.vue：

vue

1
2
3
4

父组件.vue：

vue

1
2
3
4
5
6
7
8
9

---

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

步骤：

语法：

注意：

---

路由参数​

路由模式​

种类：

语法：

js

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

1
2
3

编程式导航​

了解-导航种类：

跳转方式

js

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

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

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

1
2
3
4
5

路由传参​

js

// 传查询字符串：  ?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个钩子函数

增加使用场景

---

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

常用的钩子函数：

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

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

   侦听器​

3. 简写写法 - 基本数据类型

4. js

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

5. 完整写法 - 引用数据类

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

   1
   2
   3
   4
   5
   6
   7
   8
   9
   10
   11

   组件​

   组件注册​

   规范：

7. 注册的组件：大驼峰，如HmButton
8. 使用组件：小写+连字符, 如
9. 文件名：
   1. 小写+连字符，如hm-button.vue
   2. 大驼峰，如HmButton.vue
10. 父组件内， 在自组件标签上， 写属性
11. 子组件内， 通过props属性接收
12. 子组件内， 通过：$emit(“自定义事件”, 参数， 参数2)
13. 父组件内， 子组件标签上，： @自定义事件名="函数式"
14. 不推荐子组件，直接修改父组件传来的数据
15. 让父组件自己修改数据
16. 设置 
17. 切换组件名称 变量
18. 匿名插槽
19. 具名插槽
20. 作用域插槽
21. 子组件内，使用占位
22. 父组件内，子组件标签夹着的内容区域，设置传给slot的内容
23. 子组件内，使用占位，并给 设置不同的name属性
24. 父组件内，子组件标签夹着的内容区域，使用