Vue3 起步学习笔记

一、前置知识

在学习 Vue3 之前，需要具备一定的前端基础知识，包括但不限于：

• HTML、CSS、JavaScript 基础语法
• DOM 操作基础
• 了解组件化思想以及常用框架（如 React、Angular）的使用

如果你还没有学习过这些基础知识，建议先进行学习。

二、Vue3 简介

Vue3 是目前前端界最为流行的三大框架之一，其具有以下特点：

• 更快的渲染速度
• 更小的体积
• 更好的 TypeScript 支持
• 更好的开发体验
• 更好的性能优化

三、Vue3 入门

安装

推荐使用 Vue CLI 工具来搭建 Vue3 项目。在命令行中输入以下命令安装 Vue CLI：

bashCopy Code
npm install -g @vue/cli

安装完成后，使用以下命令创建一个新的 Vue3 项目：

bashCopy Code
vue create vue3-demo

基本语法

Vue3 主要使用模板语法和组件化的方式来实现页面的构建。以下是一个简单的 Vue3 组件示例：

Copy Code
<template>
  <div>
    <h1>{{ message }}</h1>
    <button @click="changeMessage">改变消息</button>
  </div>
</template>

<script>
export default {
  name: 'HelloWorld',
  data() {
    return {
      message: 'Hello, Vue3!'
    }
  },
  methods: {
    changeMessage() {
      this.message = 'Vue3 真香！'
    }
  }
}
</script>

在上面的代码中，我们通过 data 属性定义了一个名为 message 的数据，并使用双花括号语法在模板中进行了引用。同时，在 methods 中定义了一个名为 changeMessage 的方法，用于修改 message 数据。

实例

以下是一个简单的实例，展示了如何使用 Vue3 来实现一个计数器：

Copy Code
<template>
  <div>
    <h1>计数器：{{ count }}</h1>
    <button @click="increment">+</button>
    <button @click="decrement">-</button>
  </div>
</template>

<script>
import { ref } from 'vue'

export default {
  name: 'Counter',
  setup() {
    const count = ref(0)

    function increment() {
      count.value++
    }

    function decrement() {
      count.value--
    }

    return {
      count,
      increment,
      decrement
    }
  }
}
</script>

在这个示例中，我们使用了 Vue3 中新的响应式数据类型 ref 来定义了一个名为 count 的计数器数据，并在组件的 setup 函数中定义了两个方法 increment 和 decrement，用于增加和减少计数器的数值。在组件的模板中，我们使用了双花括号语法来引用 count 数据，并分别为两个按钮添加了点击事件。

四、总结

本篇文章介绍了 Vue3 的基本语法和使用方法，并且给出了一个简单的计数器实例。希望可以对初学者有所帮助。