Vue中有两种数据绑定：

  1. 单向数据绑定:数据只能从data流向页面，（即就是在Vue调试工具进行操作，页面的内容会改变
  2. 双向数据绑定:v-model
    1. 双向数据绑定只能用于表单数据元素上面（input,select）

基本指令：

条件渲染

  1. v-if v-else：指的是对于两个表单，把所有情况分为两种，显示一种。

列表渲染

  1. v-for：条件渲染 v-for=”(item,index) in list” :key=’item.id’

:key = “item.id”的作用是：唯一标识符，对于DOM元素每次不是重新渲染，而是尽可能地复用。（如果没有id属性的话，:key=”index”）

  1. v-model可以同步获取表单元素，例如表单的选中与否，都可以通过这个属性与之绑定。(双向绑定)

他有三个属性：

  • lazy：只有失去焦点或者是回车键才会触发
1
<input v-model.lazy="msg">
  • number：将字符串转换为有效数字
  • trim输入首尾空格进行过滤（去掉首位空格，邮箱手机号等）

  1. v-bind:src=””或者可以简写 :src=””。

  2. @click=””绑定点击事件，全写为 v-on:click=””

删除功能：

核心就是过滤：this.list = this.list.filter(item=>(item.id !==id))

这里的filter返回的是一个新的数组，需要用一个新的数组来接收

计算属性：

img

全选反选：

用到完整的计算属性，set()和get()。同时需要v-model双向绑定我的计算属性，当发生变化时候调用不同的方法

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
<script setup>
import { computed, ref } from 'vue';

const goodsList = ref([
  { id: 1, name: '华为 Mate 70', price: 5999, isChecked: true },
  { id: 2, name: '小米 15 Pro', price: 5299, isChecked: false },
  { id: 3, name: 'iPhone 16', price: 6999, isChecked: true }
])
//全选反选的核心逻辑
const isAll = computed({
  get() {
    return goodsList.value.length > 0 && goodsList.value.every(item => item.isChecked)
  },
  set(value) {
    goodsList.value.forEach(item => item.isChecked = value)
  }
})

//计算金钱用到了reduce
const totalPrice = computed(() => {
  return goodsList.value
    .filter(item => item.isChecked)
    .reduce((sum, item) => sum + item.price, 0)
})
</script>

<template>
  <div>
  //逻辑主要在这里体现
    <input type="checkbox" id="all" v-model="isAll">
    <label for="all">全选</label> | 当前总价:￥{{ totalPrice }}
  </div>
  <ul>
    <li v-for="item in goodsList" :key="item.id">
      <input type="checkbox" v-model="item.isChecked">
      <span>{{ item.name }} --{{ item.price }}</span>
    </li>
  </ul>
</template>

<style lang="css" scoped>
li {
  list-style: none;
}
</style>

本地存储：

JSON.parse()和JSON.stringify()是两个互逆过程

JSON.stringify()是将js对象转化为JSON字符串，因为本地存储localStorage只能存储字符串

1
2
3
4
5
6
7
//兜底用法，页面加载时，先从柜子拿。柜子空了（null）就用初始值 cs
const list = ref(JSON.parse(localStorage.getItem('my_list')) || cs)

//配合watch监听数据，只要用户勾选或删除了，就执行
watch(list, (newValue) => {
  localStorage.setItem('my_list', JSON.stringify(newValue))
}, { deep: true }) // 深度监听，保证内部属性变化也能存进去

监听和深度监听：

vue2是选项式API：

1
2
3
4
5
6
7
8
watch: {
  list: {
    handler(newValue, oldValue) {
      console.log('list内部变了');
    },
    deep: true // 必须手动开启
  }
}

vue3的组合式API：

1
2
3
4
//监听ref的时候用的
watch(list, (newValue) => {
  // 逻辑
}, { deep: true }) //

补充，上面监听响应式对象的ref和reactive可以直接传值

但是一旦涉及到对象里的某个属性，我就需要用到函数的形式了

import { watch } from ‘vue’

import { useRoute } from ‘vue-router’

const route = useRoute()

// 侦听 route.params.id 的变化

watch(

() => route.params.id,

(newId) => {

​ // 只有当 newId 存在时才发送请求（防止跳转到非分类页时报错）

​ if (newId) {

​ getCatgory(newId)

​ }

},

{ immediate: true } // 核心：立即执行一次

)

生命周期钩子：(面试重点)

img

常见的生命周期钩子：

mounted:（初始化操作）发送ajax请求、启动定时器、绑定自定义事件，

beforedestory:清除定时器，取消订阅消息(首位操作)

  • 一旦进入页面，会执行四个生命周期钩子:beforeCreate,created,beforeMount,mounted

绑定样式：

  • class样式：数组，对象，字符串三种
  • style内联样式：优先级最高，例如font-size属性你在书写的时候就要使用小驼峰形式，fontSize形式

template框

  • 把一堆元素包裹起来，但自己不产生任何实际的 HTML 标签。
  • 当作div框一起应用，但是当你页面展示出来的时候会自动去掉这个效果

但是注意只能配合v-if使用，不能配合v-show进行使用

  • 因为v-show底层是通过display：none；来控制显示和隐藏的，所以需要一个真实的HTML结点
  • 而v-if不需要操作样式

Key的作用和原理：

涉及虚拟dom结点转换为真实dom结点

涉及虚拟dom对比算法：

  1. 如果是使用索引index进行对比的话，如果数据插入在开头，那么就会出问题，索引相同的进行对比，随后如果值不一样，新的dom会使用新的值，但例如input框就会采取旧的dom结点里面的。
  2. 但是如果采用p.id，这种形式就不会发生，效率高，并且不会出现数据错乱

Vue.set()的三个属性值：（只有vue2有

参数顺序 官方名称 你的理解 实际例子
第一个 target 目标对象 this.person (或者是数组名)
第二个 key / index 新增属性名 ‘age’ (或者是数组下标 0)
第三个 value 增添的对象值 18 (你想赋的具体值)

this.$set(this.person, ‘age’, 18);我不能在vue中直接.添加一个对象，因为响应式监控不能监测并覆盖到新的属性，所以我需要使用Vue.set进行添加

对于数组监测来说：（vue2

数组原生的写法：

  • push()/pop()
  • shift()/unshift()
  • splice()
  • sort()
  • reserve()

v-clock：

解决页面闪烁，浏览器加载过慢，出现一些的问题

配合display:none;进行使用即可

1
2
3
4
5
6
7
8
//在css中定义规则
[v-cloak] {
  display: none;
}
//在html根元素上使用
<div id="app" v-cloak>
  {{ message }}
</div>

路由:

安装 npm i vue-router@3,因为默认版本是4，我对于vue2来说要限制3版本，插件的版本是比vue的版本要大一的

路由就是切换页面的时候不刷新页面，即就是在当前页面的网址后面加一个/**/，而不是实现跳转

其次呢，标签来说会实现跳转，对应的是href属性，所以这个时候我就需要使用现成的里面的跳转,，对应的是to属性

对于展示位置来说，就像插槽，你要是用slot占位，而此处需要使用进行占位操作

参考资料