vue3.0项目,vue3 vue.use,vue3ui,vue3.0使用,vue3 app.use,vue 资源路径
Vue 3.0 是一个流行的 JavaScript 前端框架，它提供了一系列的选项和资源，用于开发现代化的 web 应用程序。

以下是几个 Vue 3.0 的常见选项/资源及其示例：

1. 组件（Component）：Vue 组件是一个可复用的代码块，它可以接收输入参数并生成输出结果。例如，下面是一个简单的组件，用于显示一个带有标题和正文的卡片：

vue
<template>
<div class="card">
<h2>{{ title }}</h2>
<p>{{ content }}</p>
</div>
</template>

<script>
export default {
name: 'Card',
props: {
title: String,
content: String
}
}
</script>


2. 模板语法（Template Syntax）：Vue 3.0 的模板语法允许开发人员轻松地将数据绑定到 HTML 元素上，并使用条件语句、循环语句等来控制页面的渲染。例如，下面是一个简单的示例，用于显示一个列表：

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

<script>
export default {
name: 'List',
data() {
return {
items: ['Item 1', 'Item 2', 'Item 3']
}
}
}
</script>


3. 生命周期钩子函数（Lifecycle Hooks）：Vue 3.0 的生命周期钩子函数允许开发人员在组件的生命周期中执行一些操作，例如在组件创建之前、销毁之后等。例如，下面是一个简单的示例，在组件创建之前打印一条消息：

vue
<template>
<div>Hello, World!</div>
</template>

<script>
export default {
name: 'HelloWorld',
created() {
console.log('Component created!')
}
}
</script>


4. 插件（Plugins）：Vue 3.0 的插件允许开发人员通过扩展 Vue 功能来实现自定义需求，例如添加全局指令、过滤器等。例如，下面是一个简单的示例，用于注册一个全局的过滤器：

javascript
import { createApp } from 'vue'
import App from './App.vue'

const app = createApp(App)

app.config.globalProperties.$filters = {
toUpperCase(value) {
return value.toUpperCase()
}
}

app.mount('#app')


然后可以在模板中使用该过滤器：

vue
<template>
<div>{{ message | toUpperCase }}</div>
</template>

<script>
export default {
name: 'HelloWorld',
data() {
return {
message: 'hello, world!'
}
}
}
</script>