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:事件名="..."

推荐:👍@事件名="..."

<button @click="少量的代码" > 123 <button>
<button @click="函数名" > 123 <button>
<button @click="函数名(参数)" > 123 <button>
事件对象获取
// 函数通过形参获取
<button @click="函数名" > 123 < /button>
    

 // 通过$event传入事件对象   
 <button @click="函数名(参数1, $event)" > 123 </button>
鼠标事件修饰符

作用:给事件增强功能

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

种类(常用):

  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标签占位
<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


作用:组件内的数据,可以传给父组件使用

步骤:

语法:

注意💥:


路由参数

路由模式

种类:

语法:

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. 使用组件:小写+连字符, 如<hm-button>
  9. 文件名:
    1. 小写+连字符,如hm-button.vue
    2. 大驼峰,如HmButton.vue
  10. 父组件内, 在自组件标签上, 写属性
  11. 子组件内, 通过props属性接收
  12. 子组件内, 通过:$emit(“自定义事件”, 参数, 参数2)
  13. 父组件内, 子组件标签上,: @自定义事件名="函数式"
  14. 👎不推荐子组件,直接修改父组件传来的数据
  15. 👍让父组件自己修改数据
  16. 设置 <component :is="组件名称" >
  17. 切换组件名称 变量
  18. 匿名插槽
  19. 具名插槽
  20. 作用域插槽
  21. 子组件内,使用<slot></slot>占位
  22. 父组件内,子组件标签夹着的内容区域,设置传给slot的内容
  23. 子组件内,使用<slot/>占位,并给<slot /> 设置不同的name属性
  24. 父组件内,子组件标签夹着的内容区域,使用<template #xxx />,传给slot内容
  25. 👍 <slot name="xxx"/> 与 <template #xxx > 内容 </template>
  26. 👍 <slot /> 与 <template #default > 内容 </template>
  27. 子组件内,给标签,设置属性
  28. 父组件内,通过#xxx="对象变量",接收数据
  29. <slot name="xxx" yes="确定" no="取消" /> 和 <template #xxx="{yes, no}" />
  30. <slot yes="确定" no="取消" /> 和 <template #default="{yes, no}" />
  31. 为什么叫作用域插槽? 父组件接收的数据,只能在<template #xxx="{}" />标签范围内使用
  32. 动态路由 :
    1. .传:
      1. 改造动态路由, path: "路径名/:自定义属性名"
      2. 路径传参
    2. 接收: $route.params
    3. 场景: 必传参数
  33. 查询(搜索)字符串: ?aa=xx&bb=yy
    1. 传: 不用改造
    2. 接: $route.query
    3. 场景:可选参数
  34. hash路由: 带#
  35. history路由: 不带#, 需要服务度端支持
  36. 声明式导航: router-link
  37. 编程式导航: 通过JS跳转
  38. vue2脚手架,如何使用?答案
  39. 项目名称,是否可以有中文或特殊符号?能否叫vue、webpack之类?推荐命名方式是什么?答案
  40. 数据驱动视图: 数据变化,页面会自动变化。 (我们不操作dom)
  41. 数据双向绑定:页面变化, 数据会自动变化。 (我们不操作dom)
  42. 一个大的页面,会先拆分成不同的小组件。
  43. 通过组装多个小组件,组合成一个页面。
  44. 便于维护
  45. 便于复用
  46. created: 创建后, 发请求,请求数据
  47. mounted: 渲染后,最先获取dom
  48. Axios中有没有钩子函数?
  49. query 用 params
  50. body 用 data写
  51. ES6之前6种:
    1. string 、number、undefined、null、boolean、
    2. 对象 (易错点:💥💥 函数、数组、对象都属于对象数据类型)
  52. ES6新增了第7种:Symbol
  53. 比较同级根元素:

    1. 如果类型变化不复用该根元素。该元素及后代元素,,全部删除。
    2. 如果类型没变复用该根元素,对比属性,更新Dom属性。
  54. 比较同级兄弟节点:

    1. 如果不写key,下标相同的节点,进行对比。 根据策略1, 决定是否复用。
    2. 如果有写key,key相同的节点进行对比,,根据策略1, 决定是否复用。
  55. 创建- 前,后
  56. 挂载- 前,后
  57. 更新- 前,后
  58. 销毁- 前,后
  59. created 发请求
  60. mounted最新获取dom,比如加载后立马激活input
  • 3
    点赞
  • 5
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值