vue3 笔记
时间: 2025-05-11 17:28:11 浏览: 27
### 关于 Vue3 学习笔记和教程
Vue 是一个流行的前端框架,用于构建交互式的用户界面。以下是有关 Vue3 的学习资源以及如何设置开发环境的相关信息。
#### 1. 安装 Vue CLI 并创建 Vue3 项目
为了快速上手 Vue3,可以使用官方推荐的工具 `vue-cli` 来初始化一个新的项目。安装 Vue CLI 需要 Node.js 和 npm 支持。运行以下命令来全局安装 Vue CLI:
```bash
npm install -g @vue/cli
```
接着可以通过以下命令创建新的 Vue3 项目[^1]:
```bash
vue create my-vue3-project
```
在创建过程中可以选择 Vue3 版本作为默认选项。
---
#### 2. 使用 CDN 方式引入 Vue3 进行初步体验
如果不想立即配置本地开发环境,可以直接通过 HTML 文件中的 `<script>` 标签加载 Vue3 的 CDN 资源来进行简单的实验。例如,在 HTML 中加入以下代码即可开始编写第一个 Vue 应用程序[^2]:
```html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Vue3 Example</title>
<!-- 引入 Vue3 -->
<script src="https://unpkg.com/vue@next"></script>
</head>
<body>
<div id="app">{{ message }}</div>
<script>
const app = {
data() {
return {
message: 'Hello, Vue3!'
}
}
}
Vue.createApp(app).mount('#app')
</script>
</body>
</html>
```
上述代码展示了如何利用 Vue3 实现数据绑定功能。
---
#### 3. 组件间通信:v-model 在 Vue3 中的应用
对于更复杂的场景,比如父子组件之间的双向数据绑定,Vue3 提供了增强版的 `v-model` 功能。下面是一个典型的例子,展示父组件向子组件传递值并接收更新的过程[^3]:
**父组件**
```javascript
<script setup>
import MyInput from './components/MyInput.vue'
import { ref } from 'vue'
const txt = ref('初始文本')
</script>
<template>
<MyInput v-model="txt" />
<p>{{ txt }}</p>
</template>
```
**子组件 (MyInput.vue)**
```javascript
<script setup>
defineProps(['modelValue'])
defineEmits(['update:modelValue'])
</script>
<template>
<input :value="modelValue" @input="$emit('update:modelValue', $event.target.value)" />
</template>
```
此示例说明了 Vue3 如何支持自定义事件名称前缀(如 `update:`),从而实现更加灵活的数据同步机制。
---
#### 4. 推荐的学习资料
除了以上提到的内容外,还有许多优秀的在线课程可以帮助深入理解 Vue3 技术栈。其中包括但不限于以下几个方面:
- **尚硅谷 Vue2.0+Vue3.0 全套教程**: 结合实际案例讲解核心概念和技术要点。
- **黑马程序员 Vue3 学习笔记**: 主要针对初学者设计,适合零基础入门者阅读。
- **官方文档**: https://v3.vuejs.org/guide/introduction.html —— 最权威且详尽的技术指南。
---
阅读全文
相关推荐


