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('组件已卸载');
});
相关推荐
毕业设计制作和分享29 分钟前
springboot150基于springboot的贸易行业crm系统
java·vue.js·spring boot·后端·毕业设计·mybatis
键盘不能没有CV键3 小时前
【图片处理】✈️HTML转图片字体异常处理
前端·javascript·html
yantuguiguziPGJ3 小时前
WPF 联合 Web 开发调试流程梳理(基于 Microsoft.Web.WebView2)
前端·microsoft·wpf
大飞记Python4 小时前
部门管理|“编辑部门”功能实现(Django5零基础Web平台)
前端·数据库·python·django
tsumikistep5 小时前
【前端】前端运行环境的结构
前端
你的人类朋友5 小时前
【Node】认识multer库
前端·javascript·后端
Aitter5 小时前
PDF和Word文件转换为Markdown的技术实现
前端·ai编程
mapbar_front6 小时前
面试问题—上家公司的离职原因
前端·面试
昔人'6 小时前
css使用 :where() 来简化大型 CSS 选择器列表
前端·css
昔人'6 小时前
css `dorp-shadow`
前端·css