vue基础

发表于 更新于 分类于 ， 阅读次数： Waline： 阅读次数：

1、响应式数据ref

ref 用来创建一个响应式数据

ref 接收一个初始值。

.value 用来访问或修改数据。

当 .value 改变时，模板会自动更新。

<script setup>
import { ref } from 'vue'

const msg = ref('Hello World!')
msg.value = "dsada"
</script>

<template>
  <h1>{{ msg }}</h1>
  <input v-model="msg" />
</template>

还有一种写法

<template>
  <h1 ref="multipleTableRef"></h1>
</template>

<script setup>
import { ref, onMounted } from 'vue'

const multipleTableRef = ref()

onMounted(() => {
  multipleTableRef.value.textContent = "dsad" // 操作 DOM
})
</script>

注意一定要在 onMounted 里操作，因为 DOM 还没渲染之前，multipleTableRef.value 是 undefined。

不要直接 multipleTableRef.value = "dsad"，那样 Vue 会报错。

2、响应式对象reactive

reactive 用来创建一个响应式对象

<script setup>
import { ref, reactive } from 'vue'

 const state = reactive({
      count: "dsad",
      message: 'Hello Vue!',
      add: "dasd"
    });
</script>

<template>
  <h1>{{state.message}}</h1>
  <h1>{{state.count}}</h1>
  <p>{{state.add}}</p>
</template>

3、数据双向绑定v-model

v-model = 数据双向绑定

输入框内容变化 → message 自动更新

message 改变 → 输入框内容自动更新

就是双向绑定的概念

<template>
  <div>
    <input v-model="message" placeholder="输入内容">
    <p>你输入的是：{{ message }}</p>
  </div>
</template>

<script setup>
import { ref } from 'vue';

const message = ref(''); // 响应式变量
</script>

4、属性绑定v-bind

把 Vue 里的 数据变量绑定到 HTML 或组件的属性上。

在 Vue 里，: 是 v-bind 的简写

src是html里面本来的属性，按理说只能是一个唯一的，写死的，现在使用v-bind，它就可以变化了。

<template>
  <div>
    <!-- 用 v-bind 动态绑定图片地址 -->
    <img :src="imageUrl" alt="示例图片">
  </div>
</template>

<script setup>
import { ref } from 'vue';

const imageUrl = ref('https://via.placeholder.com/150');
</script>

5、条件渲染v-if

<template>
  <div>
    <p v-if="show">这句话只有在 show 为 true 时才会显示</p>
    <p v-else>show 为 false 时显示这一句</p>
  </div>
</template>

<script setup>
import { ref } from "vue"

const show = ref(true)
</script>

6、触发事件绑定@event=”method”

语法

<!-- 简写 -->
@事件名="方法名"

<!-- 完整写法 -->
v-on:事件名="方法名"

个人理解：触发事件绑定嘛，就是触发了某一动作，比如说点击，移动，然后就会执行自定义函数中的内容嘛。

例子

<button @click="handleClick">点我</button>

<script setup>
const handleClick = () => {
  alert('按钮被点击了！')
}
</script>

常用的vue方法

image-20250828155035786

7、生命周期函数

都是对于组件而言的东西

（1）setup()

组件实例创建时，还没挂载到 DOM

初始化数据、定义方法、引入响应式状态

setup() 是 组件创建时最先执行的函数，在这里你可以：

  • 定义响应式数据（ref / reactive）
  • 定义方法（函数）
  • 引入计算属性（computed）
  • 调用生命周期钩子（onMounted、onBeforeUnmount 等）

一般不写是直接隐藏了，但是流程是这么个流程

（2）onBeforeMount()

在 DOM 渲染之前，可以做一些初始化工作，基本不用。

（3）onMounted

在 Vue 里，**从后端获取数据（API 请求）最常见的位置是 onMounted()**。

当组件真正出现在页面上后，执行你在 onMounted 里写的函数。

onMounted 内的代码在 DOM 渲染完成后 执行

<template>
  <div>窗口宽度：{{ windowWidth }}</div>
</template>

<script setup>
import { ref, onMounted } from 'vue';

const windowWidth = ref(0);

onMounted(() => {
  windowWidth.value = window.innerWidth; // 组件挂载后获取窗口宽度
});
</script>

（4）onBeforeUpdate()

在 组件的响应式数据发生变化、DOM 更新之前 执行。

简单理解就是：数据变了，但页面还没刷新显示时，会先执行这个钩子。

（5）onUpdated()

DOM 已经根据最新数据更新

（6）onBeforeUnmount

组件被销毁（unmount） 并不是指整个网页关闭，而是指这个组件从页面上被移除，它对应的 DOM 元素也会被 Vue 清理掉。

常见情况

路由切换：你跳转到页面 B，组件 A 从 DOM 上消失 → 被销毁。

条件渲染：用 v-if 控制组件显示/隐藏。

父组件销毁

（7）onUnmounted()

组件从页面上移除，DOM 已经消失了，这时执行 onUnmounted() 用来做最后清理或收尾工作。

（8）生命周期函数总结

其实我觉得这个生命周期就三点吧，setup实际感觉就是隐藏起来的，基本不用，一是整个组件的一个初始化，然后就是数据变动时，然后就是组件销毁时。然后这些时有分前后before在这些之前，其他就是之后。

初始化阶段

  • setup()（数据、方法初始化）
  • onBeforeMount()（DOM 还没渲染）
  • onMounted()（DOM 渲染完成）

更新阶段

  • onBeforeUpdate()（数据变了，DOM 还没更新）
  • onUpdated()（DOM 已更新）

销毁阶段

  • onBeforeUnmount()（即将销毁，做清理准备）
  • onUnmounted()（销毁完成，DOM 已移除）

最常用 = onMounted()，其次 = onUnmounted()**（和资源清理相关），其他则很少了。

“setup 定义逻辑，onMounted 发请求，onUnmounted 做清理”

8、computed

vue里面凡是涉及到计算的都要用computed了，因为能缓存节省性能。

和模板绑定的计算值 → 用 computed，一次性调用的逻辑 → 用函数

const brickA = ref(2)
const brickB = ref(3)

const totalWeight = computed(() => brickA.value + brickB.value)

function getTotal() {
  return brickA.value + brickB.value
}

9、watch

watch 就是 “监听某个数据的变化，并执行一段副作用逻辑”。，可以同时监听多个值，就是值变化了执行什么什么东西这种。

import { ref, watch } from 'vue'

const count = ref(0)

watch(count, (newVal, oldVal) => {
  console.log(`count 从 ${oldVal} 变成了 ${newVal}`)
})

10、axios请求

就是想后端发起请求获取返回的数据

import axios from 'axios';
import { ref } from 'vue';

const zong = ref([]);

const getAllData = async () => {
  try {
    const response = await axios.get('http://127.0.0.1:5000/all_data');
    console.log('获取数据成功:', response.data);
    zong.value = response.data;
  } catch (error) {
    // 一行直接打印完整错误信息
    console.error('请求出错:', error?.response?.data || error?.message || error);
  }
};

后端数据

{ "id": 1, "name": "张三", "age": 25 }

如果返回是单个json

zong.value = response.data;
console.log(zong.value.name); // 输出：张三

如果是多个

const names = zong.value.map(item => item.name);
console.log(names);

然后是psot请求

import { ref } from 'vue';
import axios from 'axios';

const zong = ref([]);

const getAllData = async () => {
  try {
    const params = { userId: 123, type: 'all' }; // 要传给后端的参数
    const response = await axios.post('http://127.0.0.1:5000/all_data', params);
    
    // 存储返回的数据
    zong.value = response.data;

    // 如果返回的是数组对象，获取所有 name
    const names = zong.value.map(item => item.name);
    console.log('所有 name:', names);
  } catch (error) {
    console.error('请求出错:', error?.response?.data || error?.message || error);
  }
};