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('组件已卸载');
});
相关推荐
格调UI成品几秒前
元宇宙工厂前端新形态:Three.js与WebGL实现3D产线交互的轻量化之路
前端·javascript·webgl
gnip12 分钟前
微前端框架选型
前端·javascript
芒果12522 分钟前
【转载文章】ECharts-GL 实现世界级、国家级、省市级 3D 地图
前端
一只小风华~32 分钟前
JavaScript:数组常用操作方法的总结表格
前端·javascript·数据结构·vue.js·算法
前端老鹰36 分钟前
JavaScript Array.prototype.some ():数组判断的 “快捷侦探”
前端·javascript
张元清37 分钟前
揭秘JS事件循环:一道字节跳动面试题带你深入理解async/await、Promise与RAF
前端·react.js·面试
KenXu41 分钟前
F2C-Chrome插件-Figma免费的DevMode来了!
前端
北海几经夏1 小时前
React组件中的this指向问题
前端·react.js
程序媛李李李李李蕾1 小时前
你不能直接用现成的吗?整个前端做笔记管理工具真是折腾人
javascript·vue.js·后端
passer9811 小时前
列表项切换时同步到可视区域
前端