Vue常用指令和生命周期

zzumsc2025-08-31 15:30

Vue 是基于 MVVM模型的前端 JavaScript 框架。

Vue 核心是数据驱动视图，通过响应式数据实现视图自动更新。

javascript 复制代码

<template>
  <div>{{ message }}</div>
  <button @click="changeMsg">修改内容</button>
</template>

<script setup>
import { ref } from 'vue'
// 响应式数据
const message = ref('Hello Vue')
// 方法
const changeMsg = () => {
  message.value = '数据已更新' // 修改数据，视图自动更新
}
</script>

常用指令

v-bind：用于绑定 HTML 属性，比如绑定元素的 class、style 或者自定义属性等。

例如 <img :src="imageUrl">，将 imageUrl 数据绑定到 img 标签的 src 属性。

v-model：实现表单元素和数据的双向绑定，在输入框、单选框、复选框等表单元素中常用。

例如 <input v-model="message">，输入框内容变化时，message 数据会同步更新，反之 message 数据变化，输入框内容也会更新。

v-on：用于绑定事件监听器，比如点击事件、鼠标移入事件等。

例如 <button @click="handleClick">点击我</button>，点击按钮时会触发 handleClick 方法。

v-if：根据表达式的真假，动态地插入或移除元素。如果条件为假，元素会被完全从 DOM 中移除。

例如 <div v-if="isShow">显示内容</div>，当 isShow 为 true 时，div 会显示，否则不显示。

v-show：根据表达式的真假，切换元素的显示或隐藏，元素始终在 DOM 中，只是通过 CSS 的 display 属性来控制显示与否。

例如 <div v-show="isShow">显示内容</div>，isShow 为 false 时，div 会被隐藏（display: none）。

v-for：用于遍历数组或对象，生成重复的元素。

例如 <li v-for="(item, index) in list" :key="index">{{ item }}</li>，遍历 list 数组，生成对应的 li 元素。

生命周期

共 8 阶段，每阶段自动执行钩子函数中的方法。

javascript 复制代码

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

onMounted(() => {
  console.log('组件已挂载，可请求数据')
})

onUpdated(() => {
  console.log('组件已更新')
})

onUnmounted(() => {
  console.log('组件已卸载，清理资源')
})
</script>