Vue3 学习教程，从入门到精通，使用 VSCode 开发 Vue3 的详细指南（3）

使用 VSCode 开发 Vue3 的详细指南

本文将详细介绍如何使用 Visual Studio Code (VSCode) 开发 Vue3 项目，包括创建项目、打开项目、运行第一个入门程序，并涵盖关键的语法知识点及使用方法。每个知识点都将提供具体的案例代码，并附有详细注释。此外，还将提供一些入门案例，帮助您快速上手 Vue3 开发。

准备工作
[创建 Vue3 项目](#创建 Vue3 项目)
[在 VSCode 中打开 Vue3 项目](#在 VSCode 中打开 Vue3 项目)
运行第一个入门程序
[Vue3 关键语法知识点及案例代码](#Vue3 关键语法知识点及案例代码)
- [5.1 组件基础](#5.1 组件基础)
- [5.2 数据绑定](#5.2 数据绑定)
- [5.3 指令](#5.3 指令)
  - [5.3.1 v-bind](#5.3.1 v-bind)
  - [5.3.2 v-if / v-else-if / v-else](#5.3.2 v-if / v-else-if / v-else)
  - [5.3.3 v-for](#5.3.3 v-for)
  - [5.3.4 v-on](#5.3.4 v-on)
  - [5.3.5 v-model](#5.3.5 v-model)
- [5.4 计算属性与侦听器](#5.4 计算属性与侦听器)
  - [5.4.1 计算属性](#5.4.1 计算属性)
  - [5.4.2 侦听器](#5.4.2 侦听器)
- [5.5 生命周期钩子](#5.5 生命周期钩子)
- [5.6 组件通信](#5.6 组件通信)
  - [5.6.1 Props](#5.6.1 Props)
  - [5.6.2 Emit](#5.6.2 Emit)
  - [5.6.3 Provide/Inject](#5.6.3 Provide/Inject)
- [5.7 组合式 API](#5.7 组合式 API)
  - [5.7.1 setup 函数](#5.7.1 setup 函数)
  - [5.7.2 ref 和 reactive](#5.7.2 ref 和 reactive)
  - [5.7.3 computed 和 watch](#5.7.3 computed 和 watch)
入门案例
总结

1. 准备工作

在开始之前，请确保您已经完成以下准备工作：

安装 Node.js ：Vue3 项目依赖于 Node.js 环境。可以从 Node.js 官网下载并安装最新的 LTS 版本。
安装 VSCode ：从 VSCode 官网下载并安装最新版本的 VSCode。
安装 Vue CLI（可选）：虽然可以使用 Vite 创建 Vue3 项目，但 Vue CLI 也是一个常用的工具。可以使用以下命令全局安装 Vue CLI：
bash 复制代码
```
npm install -g @vue/cli
```
安装 Vue 3 相关插件 （可选）：在 VSCode 中安装 Vue 3 相关的扩展，如 Volar （推荐用于 Vue 3）、ESLint 、Prettier 等，以增强开发体验。

2. 创建 Vue3 项目

使用 Vite 创建 Vue3 项目是一个现代且高效的选择。以下是具体步骤：

打开终端 ：在 VSCode 中使用快捷键 Ctrl + ~ 或通过菜单 终端 > 新终端 打开终端。
运行创建命令：
bash 复制代码
```
npm create vite@latest my-vue3-app -- --template vue
```
这将使用 Vite 创建一个名为 my-vue3-app 的 Vue3 项目。
进入项目目录：
bash 复制代码
```
cd my-vue3-app
```
安装依赖：
bash 复制代码
```
npm install
```

3. 在 VSCode 中打开 Vue3 项目

打开 VSCode。
打开项目：
- 选择 文件 > 打开文件夹...。
- 选择刚刚创建的 my-vue3-app 文件夹并打开。
或者，在终端中运行：
bash 复制代码
```
code .
```
（确保 VSCode 的命令行工具已安装）

4. 运行第一个入门程序

启动开发服务器：

在终端中运行：
bash 复制代码
```
npm run dev
```
这将启动开发服务器，并显示本地服务器的地址（通常是 http://localhost:5173/）。
查看应用：

打开浏览器，访问 http://localhost:5173/，您将看到 Vue3 的欢迎页面。
修改代码：

打开 src/App.vue 文件，尝试修改 <h1> 标签的内容，例如：
vue 复制代码
```
<template>
  <h1>欢迎使用 Vue3!</h1>
</template>
```
保存文件后，浏览器会自动刷新，显示修改后的内容。

5. Vue3 关键语法知识点及案例代码

5.1 组件基础

Vue3 使用组件化的架构，组件是 Vue 应用的基本构建块。每个组件包含三个部分：模板（Template）、脚本（Script）和样式（Style）。

案例代码：

vue 复制代码

<!-- src/components/HelloWorld.vue -->
<template>
  <div>
    <h2>{{ message }}</h2>
    <button @click="updateMessage">点击我</button>
  </div>
</template>

<script>
export default {
  name: 'HelloWorld',
  data() {
    return {
      message: '你好，Vue3!'
    }
  },
  methods: {
    updateMessage() {
      this.message = '消息已更新!'
    }
  }
}
</script>

<style scoped>
h2 {
  color: #42b983;
}
button {
  padding: 10px 20px;
  background-color: #42b983;
  color: white;
  border: none;
  border-radius: 5px;
  cursor: pointer;
}
button:hover {
  background-color: #369870;
}
</style>

说明：

模板（Template） ：定义了组件的 HTML 结构，使用 {``{ message }} 进行数据绑定。
脚本（Script） ：包含组件的逻辑，data 返回组件的数据，methods 定义组件的方法。
样式（Style） ：使用 scoped 属性确保样式仅作用于当前组件。

5.2 数据绑定

数据绑定是 Vue 的核心特性之一，允许将数据与 DOM 元素进行绑定，实现动态更新。

案例代码：

vue 复制代码

<template>
  <div>
    <p>姓名: {{ name }}</p>
    <input v-model="name" placeholder="请输入姓名" />
  </div>
</template>

<script>
export default {
  data() {
    return {
      name: ''
    }
  }
}
</script>

说明：

v-model 指令实现了双向数据绑定，用户的输入会实时更新 name 数据，反之亦然。

5.3 指令

指令是带有 v- 前缀的特殊属性，用于在模板中绑定数据或添加行为。

5.3.1 v-bind

用于动态绑定 HTML 属性。

案例代码：

vue 复制代码

<template>
  <div>
    <img v-bind:src="imageUrl" alt="示例图片" />
    <!-- 简写 -->
    <a :href="link">点击访问</a>
  </div>
</template>

<script>
export default {
  data() {
    return {
      imageUrl: 'https://via.placeholder.com/150',
      link: 'https://www.example.com'
    }
  }
}
</script>

说明：

v-bind:src 动态绑定图片的 src 属性。
: 是 v-bind 的简写形式。

5.3.2 v-if / v-else-if / v-else

用于条件渲染。

案例代码：

vue 复制代码

<template>
  <div>
    <p v-if="count > 0">计数大于零</p>
    <p v-else-if="count === 0">计数等于零</p>
    <p v-else>计数小于零</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      count: 5
    }
  }
}
</script>

说明：

根据 count 的值，渲染不同的段落。

5.3.3 v-for

用于循环渲染列表。

案例代码：

vue 复制代码

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

<script>
export default {
  data() {
    return {
      items: ['苹果', '香蕉', '橘子', '葡萄']
    }
  }
}
</script>

说明：

v-for 遍历 items 数组，渲染每个元素。
:key 属性用于优化渲染性能，通常使用唯一标识符。

5.3.4 v-on

用于绑定事件监听器。

案例代码：

vue 复制代码

<template>
  <div>
    <button v-on:click="handleClick">点击我</button>
    <!-- 简写 -->
    <button @click="handleClick">点击我</button>
  </div>
</template>

<script>
export default {
  methods: {
    handleClick() {
      alert('按钮被点击了!')
    }
  }
}
</script>

说明：

v-on:click 绑定点击事件，@click 是简写形式。
handleClick 方法在按钮点击时触发。

5.3.5 v-model

实现双向数据绑定。

案例代码：

vue 复制代码

<template>
  <div>
    <input v-model="message" placeholder="输入消息" />
    <p>消息内容: {{ message }}</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      message: ''
    }
  }
}
</script>

说明：

用户在输入框中输入的内容会实时更新 message 数据，反之亦然。

5.4 计算属性与侦听器

5.4.1 计算属性

用于根据现有数据计算出新数据。

案例代码：

vue 复制代码

<template>
  <div>
    <p>原始价格: {{ price }}</p>
    <p>折扣价格: {{ discountedPrice }}</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      price: 100
    }
  },
  computed: {
    discountedPrice() {
      return this.price * 0.9
    }
  }
}
</script>

说明：

discountedPrice 是一个计算属性，根据 price 计算折扣后的价格。

5.4.2 侦听器

用于监听数据的变化并执行相应操作。

案例代码：

vue 复制代码

<template>
  <div>
    <input v-model="username" placeholder="输入用户名" />
    <p>用户名: {{ username }}</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      username: ''
    }
  },
  watch: {
    username(newVal, oldVal) {
      console.log(`用户名从 ${oldVal} 变为 ${newVal}`)
    }
  }
}
</script>

说明：

watch 侦听 username 的变化，并在控制台输出变化前后的值。

5.5 生命周期钩子

Vue 组件有多个生命周期钩子，可以在特定的生命周期阶段执行代码。

案例代码：

vue 复制代码

<template>
  <div>
    <p>组件已加载!</p>
  </div>
</template>

<script>
export default {
  name: 'LifecycleComponent',
  data() {
    return {
      count: 0
    }
  },
  mounted() {
    console.log('组件已挂载')
    this.interval = setInterval(() => {
      this.count++
    }, 1000)
  },
  beforeUnmount() {
    console.log('组件即将卸载')
    clearInterval(this.interval)
  }
}
</script>

说明：

mounted 钩子在组件挂载后执行，启动一个定时器。
beforeUnmount 钩子在组件卸载前执行，清除定时器。

5.6 组件通信

5.6.1 Props

用于从父组件向子组件传递数据。

父组件代码：

vue 复制代码

<template>
  <div>
    <ChildComponent :message="parentMessage" />
  </div>
</template>

<script>
import ChildComponent from './ChildComponent.vue'

export default {
  components: {
    ChildComponent
  },
  data() {
    return {
      parentMessage: '来自父组件的消息'
    }
  }
}
</script>

子组件代码：

vue 复制代码

<template>
  <div>
    <p>{{ message }}</p>
  </div>
</template>

<script>
export default {
  props: {
    message: {
      type: String,
      required: true
    }
  }
}
</script>

说明：

父组件通过 props 向子组件传递 parentMessage 数据。
子组件通过 props 接收 message 数据。

5.6.2 Emit

用于子组件向父组件发送事件和数据。

子组件代码：

vue 复制代码

<template>
  <div>
    <button @click="sendMessage">发送消息</button>
  </div>
</template>

<script>
export default {
  methods: {
    sendMessage() {
      this.$emit('messageSent', '来自子组件的消息')
    }
  }
}
</script>

父组件代码：

vue 复制代码

<template>
  <div>
    <ChildComponent @messageSent="handleMessage" />
    <p>{{ receivedMessage }}</p>
  </div>
</template>

<script>
import ChildComponent from './ChildComponent.vue'

export default {
  components: {
    ChildComponent
  },
  data() {
    return {
      receivedMessage: ''
    }
  },
  methods: {
    handleMessage(message) {
      this.receivedMessage = message
    }
  }
}
</script>

说明：

子组件通过 $emit 触发 messageSent 事件，并传递数据。
父组件监听 messageSent 事件，并更新 receivedMessage 数据。

5.6.3 Provide/Inject

用于祖先组件向后代组件传递数据。

祖先组件代码：

vue 复制代码

<template>
  <div>
    <ChildComponent />
  </div>
</template>

<script>
import ChildComponent from './ChildComponent.vue'

export default {
  components: {
    ChildComponent
  },
  provide() {
    return {
      message: '来自祖先组件的消息'
    }
  }
}
</script>

后代组件代码：

vue 复制代码

<template>
  <div>
    <p>{{ message }}</p>
  </div>
</template>

<script>
export default {
  inject: ['message']
}
</script>

说明：

祖先组件通过 provide 提供 message 数据。
后代组件通过 inject 接收 message 数据。

5.7 组合式 API

组合式 API 是 Vue3 引入的一种新的编写组件逻辑的方式，提供了更灵活的代码组织方式。

5.7.1 setup 函数

setup 函数是组合式 API 的入口，返回的对象中的属性和方法将暴露给模板。

案例代码：

vue 复制代码

<template>
  <div>
    <p>{{ count }}</p>
    <button @click="increment">增加</button>
  </div>
</template>

<script>
import { ref } from 'vue'

export default {
  name: 'Counter',
  setup() {
    const count = ref(0)
    const increment = () => {
      count.value++
    }
    return {
      count,
      increment
    }
  }
}
</script>

说明：

setup 函数中定义了 count 和 increment。
ref 用于创建响应式数据。

5.7.2 ref 和 reactive

ref 和 reactive 是组合式 API 中用于创建响应式数据的函数。

案例代码：

vue 复制代码

<template>
  <div>
    <p>{{ user.name }}</p>
    <p>{{ user.age }}</p>
    <button @click="updateName">更新姓名</button>
    <button @click="updateAge">更新年龄</button>
  </div>
</template>

<script>
import { reactive } from 'vue'

export default {
  name: 'UserInfo',
  setup() {
    const user = reactive({
      name: '张三',
      age: 25
    })
    const updateName = () => {
      user.name = '李四'
    }
    const updateAge = () => {
      user.age = 30
    }
    return {
      user,
      updateName,
      updateAge
    }
  }
}
</script>

说明：

reactive 创建响应式对象 user。
修改 user 的属性会触发视图更新。

5.7.3 computed 和 watch

组合式 API 中使用 computed 和 watch 实现计算属性和侦听器。

案例代码：

vue 复制代码

<template>
  <div>
    <p>原始价格: {{ price }}</p>
    <p>折扣价格: {{ discountedPrice }}</p>
    <input v-model="price" placeholder="输入价格" />
  </div>
</template>

<script>
import { ref, computed, watch } from 'vue'

export default {
  name: 'PriceCalculator',
  setup() {
    const price = ref(100)
    const discountedPrice = computed(() => price.value * 0.9)
    watch(price, (newVal, oldVal) => {
      console.log(`价格从 ${oldVal} 变为 ${newVal}`)
    })
    return {
      price,
      discountedPrice
    }
    }
}
</script>

说明：

computed 创建计算属性 discountedPrice。
watch 侦听 price 的变化，并在控制台输出变化前后的值。

6. 入门案例

案例1：简单的计数器

代码：

vue 复制代码

<template>
  <div>
    <h2>计数器</h2>
    <p>当前计数: {{ count }}</p>
    <button @click="increment">增加</button>
    <button @click="decrement">减少</button>
  </div>
</template>

<script>
import { ref } from 'vue'

export default {
  name: 'Counter',
  setup() {
    const count = ref(0)
    const increment = () => {
      count.value++
    }
    const decrement = () => {
      count.value--
    }
    return {
      count,
      increment,
      decrement
    }
  }
}
</script>

<style scoped>
h2 {
  color: #42b983;
}
button {
  padding: 10px 20px;
  margin: 5px;
  background-color: #42b983;
  color: white;
  border: none;
  border-radius: 5px;
  cursor: pointer;
}
button:hover {
  background-color: #369870;
}
</style>

说明：

使用 ref 创建响应式数据 count。
increment 和 decrement 方法用于修改 count 的值。
模板中绑定按钮的点击事件，实现计数功能。

案例2：待办事项列表

代码：

vue 复制代码

<template>
  <div>
    <h2>待办事项列表</h2>
    <input v-model="newTodo" @keyup.enter="addTodo" placeholder="添加待办事项" />
    <ul>
      <li v-for="(todo, index) in todos" :key="index">
        {{ todo }}
        <button @click="removeTodo(index)">删除</button>
      </li>
    </ul>
  </div>
</template>

<script>
import { ref } from 'vue'

export default {
  name: 'TodoList',
  setup() {
    const newTodo = ref('')
    const todos = ref(['学习 Vue3', '完成项目', '喝咖啡'])
    const addTodo = () => {
      if (newTodo.value.trim() !== '') {
        todos.value.push(newTodo.value.trim())
        newTodo.value = ''
      }
    }
    const removeTodo = (index) => {
      todos.value.splice(index, 1)
    }
    return {
      newTodo,
      todos,
      addTodo,
      removeTodo
    }
  }
}
</script>

<style scoped>
h2 {
  color: #42b983;
}
input {
  padding: 10px;
  width: 300px;
  margin-bottom: 10px;
}
li {
  list-style: none;
  padding: 5px 0;
}
button {
  margin-left: 10px;
  padding: 5px 10px;
  background-color: #42b983;
  color: white;
  border: none;
  border-radius: 5px;
  cursor: pointer;
}
button:hover {
  background-color: #369870;
}
</style>

说明：

使用 ref 创建响应式数据 todos。
addTodo 方法添加新的待办事项，removeTodo 方法删除指定事项。
模板中展示待办事项列表，并提供添加和删除功能。

案例3：动态表单

代码：

vue 复制代码

<template>
  <div>
    <h2>动态表单</h2>
    <form @submit.prevent="submitForm">
      <div>
        <label for="name">姓名:</label>
        <input id="name" v-model="form.name" type="text" />
      </div>
      <div>
        <label for="email">邮箱:</label>
        <input id="email" v-model="form.email" type="email" />
      </div>
      <div>
        <label for="gender">性别:</label>
        <select id="gender" v-model="form.gender">
          <option disabled value="">请选择</option>
          <option>男</option>
          <option>女</option>
          <option>其他</option>
        </select>
      </div>
      <button type="submit">提交</button>
    </form>
    <div v-if="submitted">
      <h3>提交的数据:</h3>
      <p>姓名: {{ form.name }}</p>
      <p>邮箱: {{ form.email }}</p>
      <p>性别: {{ form.gender }}</p>
    </div>
  </div>
</template>

<script>
import { reactive, ref } from 'vue'

export default {
  name: 'DynamicForm',
  setup() {
    const form = reactive({
      name: '',
      email: '',
      gender: ''
    })
    const submitted = ref(false)
    const submitForm = () => {
      if (form.name.trim() === '' || form.email.trim() === '' || form.gender === '') {
        alert('请填写所有字段')
        return
      }
      submitted.value = true
    }
    return {
      form,
      submitted,
      submitForm
    }
  }
}
</script>

<style scoped>
h2 {
  color: #42b983;
}
form div {
  margin: 10px 0;
}
label {
  margin-right: 10px;
}
input, select {
  padding: 5px;
}
button {
  padding: 10px 20px;
  background-color: #42b983;
  color: white;
  border: none;
  border-radius: 5px;
  cursor: pointer;
}
button:hover {
  background-color: #369870;
}
</style>

说明：

使用 reactive 创建响应式对象 form。
submitForm 方法用于处理表单提交。
模板中展示动态表单，并显示提交的数据。

7. 总结

本文详细介绍了如何使用 VSCode 开发 Vue3 项目，包括创建项目、打开项目、运行程序，以及关键的语法知识点和案例代码。通过这些内容，您应该能够快速上手 Vue3 开发，并深入理解其核心概念和用法。

建议

深入学习 Vue3 官方文档：官方文档是学习 Vue3 的最佳资源，涵盖了从基础到高级的内容。
实践项目：通过实际项目练习所学知识，积累经验。
加入社区：参与 Vue 社区，与其他开发者交流，获取帮助和灵感。
学习周边技术：如 Vue Router、Vuex 或 Pinia、Axios 等，构建完整的 Vue 应用。

Vue3 学习教程，从入门到精通，使用 VSCode 开发 Vue3 的详细指南（3）

使用 VSCode 开发 Vue3 的详细指南

目录

1. 准备工作

2. 创建 Vue3 项目

3. 在 VSCode 中打开 Vue3 项目

4. 运行第一个入门程序

5. Vue3 关键语法知识点及案例代码

5.1 组件基础

5.2 数据绑定

5.3 指令

5.3.1 v-bind

5.3.2 v-if / v-else-if / v-else

5.3.3 v-for

5.3.4 v-on

5.3.5 v-model

5.4 计算属性与侦听器

5.4.1 计算属性

5.4.2 侦听器

5.5 生命周期钩子

5.6 组件通信

5.6.1 Props

5.6.2 Emit

5.6.3 Provide/Inject

5.7 组合式 API

5.7.1 setup 函数

5.7.2 ref 和 reactive

5.7.3 computed 和 watch

6. 入门案例

案例1：简单的计数器

案例2：待办事项列表

案例3：动态表单

7. 总结

建议