vue3常用的东西

组件 : 组件是Vue应用程序的基本构建块,允许您将用户界面分解为独立、可重用的部分。在Vue 3中,您可以使用<script setup>语法来定义组件。

复制代码
<template>
  <div>
    <h1>{{ title }}</h1>
    <button @click="increment">增加</button>
  </div>
</template>

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

const title = ref('Vue 3 示例');
const increment = () => {
  title.value += '!';
};
</script>

指令 : 指令是Vue的特殊属性,用于添加交互和行为。一些常用的指令包括v-model(用于双向数据绑定)、v-for(用于循环渲染元素)、v-ifv-else(用于条件渲染)等。

复制代码
<input v-model="message">
<ul>
  <li v-for="item in items" :key="item.id">{{ item.name }}</li>
</ul>
<div v-if="showElement">显示此元素</div>

应式数据 : 在Vue 3中,您可以使用refreactive来创建响应式数据。ref用于创建可变的响应式数据,而reactive用于创建可变对象的响应式版本。

复制代码
import { ref, reactive } from 'vue';

const count = ref(0);
const user = reactive({
  name: 'John',
  age: 30,
});

生命周期钩子 : Vue 3提供了一系列生命周期钩子,允许您在组件的不同生命周期阶段执行自定义逻辑,例如createdmountedupdatedunmounted等。

复制代码
import { onMounted, onUnmounted } from 'vue';

onMounted(() => {
  console.log('组件已挂载');
});

onUnmounted(() => {
  console.log('组件已卸载');
});
相关推荐
蒙特卡洛的随机游走4 分钟前
Spark的宽依赖与窄依赖
大数据·前端·spark
共享家952711 分钟前
QT-常用控件(多元素控件)
开发语言·前端·qt
幸运小圣12 分钟前
Iterator迭代器 【ES6】
开发语言·javascript·es6
葱头的故事13 分钟前
将传给后端的数据转换为以formData的类型传递
开发语言·前端·javascript
中微子24 分钟前
🚀 2025前端面试必考:手把手教你搞定自定义右键菜单,告别复制失败的尴尬
javascript·面试
_233325 分钟前
vue3二次封装element-plus表格,slot透传,动态slot。
前端·vue.js
jump68028 分钟前
js中数组详解
前端·面试
崽崽长肉肉31 分钟前
iOS 基于Vision.framework从图片中提取文字
前端
温宇飞37 分钟前
Web Abort API - AbortSignal 与 AbortController
前端
Tomoon38 分钟前
前端开发者的全栈逆袭
前端