Vue3 教程
Vue3 教程
概述
Vue3是一个用于构建用户界面的JavaScript框架。它是Vue.js的最新版本,具有更快的速度和更好的性能,同时也包含了很多新特性,比如Compositions API、Teleport等。
安装
Vue3可以使用多种方式安装,包括通过CDN引入、NPM安装、CLI工具等。
通过CDN引入
在HTML文件中引入Vue3的CDN链接:
<script src="https://unpkg.com/vue@next"></script>
NPM安装
使用NPM安装Vue3:
npm install vue@next
CLI工具
通过Vue CLI工具创建一个新项目:
vue create my-project
使用
Hello World
Vue3的基本用法与Vue2相似。下面是一个简单的Hello World例子:
<div id="app">
{{ message }}
</div>
<script>
const app = Vue.createApp({
data() {
return {
message: 'Hello, World!'
}
}
})
app.mount('#app')
</script>
组件
Vue3中,我们可以使用组合式API来写组件,这使得组件的逻辑更加清晰、灵活。
下面是一个组件示例:
<template>
<div>
<h1>{{ title }}</h1>
<p>{{ content }}</p>
</div>
</template>
<script>
import { ref } from 'vue'
export default {
setup() {
const title = ref('Welcome')
const content = ref('This is a Vue3 tutorial')
return {
title,
content
}
}
}
</script>
在这个组件中,我们使用了ref
来定义了两个响应式变量title
和content
,然后把它们返回给模板进行渲染。
Teleport
Teleport是Vue3新增的功能之一,它提供了一种快速、方便、安全地在DOM树中移动子节点的方式。它可以用来实现例如模态框、弹出菜单等复杂UI组件。
下面是一个Teleport的例子:
<template>
<div>
<button @click="showModal = true">
Show modal
</button>
<teleport to="body">
<div v-if="showModal" class="modal">
<h2>Modal title</h2>
<p>Modal content</p>
<button @click="showModal = false">Close modal</button>
</div>
</teleport>
</div>
</template>
<script>
import { ref } from 'vue'
export default {
setup() {
const showModal = ref(false)
return {
showModal
}
}
}
</script>
<style>
.modal {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
background: white;
padding: 20px;
border: 1px solid gray;
}
</style>
在这个例子中,我们使用了一个Teleport来把modal组件移动到了DOM树的末尾,从而保证它的z-index最高。同时我们还使用了一个ref
来控制modal的显示与隐藏。
总结
Vue3是一个功能强大、性能出色的JavaScript框架。通过它提供的新特性,我们可以更加方便、灵活地构建复杂而美丽的用户界面。