Vue3核心知识

Vue 3 是一个现代化的前端框架，通过一系列简单而强大的特性，使得构建用户界面变得更加高效。以下是Vue 3的核心知识点，通过这些知识点，你可以快速上手并运用 Vue 3。

创建你的应用

Vue 3 推荐使用 Vite 来快速创建开发环境：

npm init vite-app <project-name>
cd <project-name>
npm install
npm run dev

模板语法

文本插值

<span> {{ msg }} </span>
<span v-text='msg'></span>

设置内部 HTML

<span v-html='rawHTML'></span>

使用 JS 表达式

<span> {{ msg.split('').reverse().join('') }} </span>

指令

条件渲染

<div v-if='show'>显示</div>
<div v-else-if='showElse'>显示其他</div>
<div v-else>隐藏</div>

事件处理

<button @click='handleClick'>点击我</button>

const handleClick = (event) => {
  console.log(event.target);
};

列表渲染

<ul>
  <li v-for='(item, index) in items' :key='index'>{{ item }}</li>
</ul>

双向绑定

<input v-model='inputValue' />

绑定数据

简单绑定

<div :id='dynamicId'></div>

绑定类和样式

<div :class='{ active: isActive }'></div>
<div :style='{ margin: marginValue + "px" }'></div>

父子组件通信

父组件向子组件传递数据

<child-component :msg='parentMsg' @update='handleUpdate'></child-component>

子组件通过 emit 发送事件

// 子组件
context.emit('update', 'new value');

插槽 (Slots)

基本插槽

<!-- 子组件 -->
<div>
  <slot></slot>
</div>

<!-- 父组件 -->
<child-component>
  这里的内容会替换插槽内容
</child-component>

命名插槽

<!-- 子组件 -->
<div>
  <slot name='header'></slot>
  <slot></slot>
</div>

<!-- 父组件 -->
<child-component>
  <template v-slot:header>头部内容</template>
  默认插槽内容
</child-component>

组合 API (Composition API)

Vue 3 引入了 Composition API，使得逻辑组织更加灵活：

<script lang="ts" setup>
import { ref, reactive, onMounted } from 'vue';

const count = ref(0);
const state = reactive({ message: 'Hello Vue 3' });

const increment = () => {
  count.value++;
};

onMounted(() => {
  console.log('Component mounted!');
});

</script>

<template>
  <div>{{ state.message }}</div>
  <button @click="increment">Count: {{ count }}</button>
</template>

生命周期钩子

onMounted

import { onMounted } from 'vue';

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

其他钩子

• onBeforeMount
• onBeforeUpdate
• onUpdated
• onBeforeUnmount
• onUnmounted

计算属性和侦听器

计算属性

<script lang="ts" setup>
import { ref, computed } from 'vue';

const a = ref(1);
const b = computed(() => a.value * 2);
</script>

<template>
  <div>{{ b }}</div>
</template>

侦听器

<script lang="ts" setup>
import { ref, watchEffect } from 'vue';

const site = ref('learnvue.co');

watchEffect(() => {
  console.log(site.value);
});
</script>

通过以上内容，你可以快速掌握 Vue 3 的核心知识，并开始构建功能强大的前端应用。对于更多详细的用法和示例，可以参考官方文档和相关教程。