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 的核心知识，并开始构建功能强大的前端应用。对于更多详细的用法和示例，可以参考官方文档和相关教程。
网友评论