在了解Vue前我们先用纯js代码来写一个实现计数器功能的代码

纯js版计数器

首先我们先写一段基本的html

<h2 id="h2">0</h2>
<button id="minus">-1</button>
<button id="add">+1</button>

然后我们要获取DOM节点绑定监听事件来实现我们点击button按键能实现加减的操作

具体代码我们这样实现

let minus = document.getElementById("minus");
let add = document.getElementById("add");
let h2 = document.getElementById("h2");
let count = 0
minus.addEventListener("click", () => {
    count--;
    h2.innerText = count;
})
add.addEventListener("click", () => {
    count++;
    h2.innerText = count;
})

使用Vue来完成计数器

首先我们来到Vue的文档来了解怎么使用

我们先通过解构赋值的方式从Vue库中导入createApp函数。

接下来，createApp函数接收一个配置对象作为参数，用于定义应用的行为和结构。

然后定义应用的HTML结构

再获取相应的htmldom结构添加相应的方法和数值

最后，通过.mount('#app')将应用挂载到DOM中ID为app的元素上。

最后根据思路我们写出代码为：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
</head>

<body>
    <div id="app"></div>

    <script>
        const { createApp } = Vue

        createApp({
            template: `<h2 id="h2">{{count}}</h2>
                      <button id="minus" @click="minus">-1</button>
                      <button id="add" @click="add">+1</button>`,
            data: function () {
                return {     // 响应式
                    count: 0,
                }
            },
            methods: {
                minus() {
                    this.count--
                },
                add() {
                    this.count++
                }
            }
        }).mount('#app')
    </script>
</body>

</html>

实现结果与纯js是一样的，但是否有感觉使用vue写的代码更优雅一点呢？我感觉是有点呢。来把现在进入我们的主题吧

Vue简介

来到Vue官方文档的介绍可以了解：

官方文档可能看的不那么容易理解我来浅浅总结一下：

Vue是一款用于构建用户界面的 JavaScript 框架。它帮助开发者用标准的 HTML、CSS 和 JavaScript 高效地创建漂亮的网页和应用。Vue 的主要特点是：

渐进式框架：你可以逐步把 Vue 集成到现有的项目中，不需要一次性全部重写。
灵活性：可以用 Vue 构建简单的静态页面、单页应用（SPA）、服务器端渲染（SSR）的网站、静态站点（SSG），甚至是桌面和移动端应用。

和以前的前端开发相比，使用 Vue 有几个显著的优点：

组件化开发：Vue 提供了一种组件化的开发方式，你可以把界面分成多个小组件，每个组件独立开发和维护，这样更容易管理和复用代码。
声明式编程：你可以直接在模板中描述 UI 应该如何展示，Vue 会自动处理数据的变化，更新界面，减少手动操作 DOM 的工作量。
开发效率高：Vue 有丰富的生态系统，包括各种插件和工具，帮助你快速开发和调试应用。

总的来说，Vue 让前端开发变得更简单、更高效，并且适应各种不同的项目需求。

创建一个 Vue 应用

npm create vue@latest

通过这个指令我们会安装并执行 create-vue，它是 Vue 官方的项目脚手架工具。你将会看到一些诸如 TypeScript 和测试支持之类的可选功能提示：

这里我们初学所有功能可以先别选，然后我们再执行两个指令

cd learn

这里是来到我们新创建的learn项目文件的目录下

npm install

安装Vue项目所需要的依赖

npm run dev

最后通过这个指令执行这个初始化成功的Vue项目，然后访问Local地址就能看到这个页面了：

接下来我们来介绍一下Vue的目录结构吧：

.gitignore：这个文件用于指定在使用Git进行版本控制时忽略哪些文件或文件夹。
jsconfig.json：这是JavaScript项目配置文件，用于提供IntelliSense支持、代码导航等功能。
package-lock.json：这个文件是npm包管理器生成的锁定文件，它记录了项目中所有依赖项的确切版本信息。
package.json：这个文件包含了关于你的项目的信息（如名称、版本），以及安装的模块列表及其版本号等信息。
README.md：这是一个Markdown格式的文档，通常用来描述项目的用途、如何运行测试、如何贡献代码等内容。
viteconfig.js：这是Vite构建工具的配置文件，可以在这里设置各种选项来定制你的开发环境。

在src目录下：

assets: 存放静态资源，比如图片、字体等；
components: 存放组件，一个Vue应用是由多个组件组成的树形结构构成的；
App.vue: 应用入口文件，定义整个应用程序的基本布局或者外壳；
main.js: 入口脚本文件，负责初始化 Vue 实例并挂载到目标元素上；

最后

大致了解了一下我们创建的Vue项目结构，那我们来写第一个Vue项目吧

main.js中的代码我们修改为

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

createApp(App).mount('#app')

App.vue的代码修改为

<template>
  <div>
    <h1>我的第一个Vue项目</h1>
    <h2>{{ count }}</h2>
    <button @click="minus">-1</button>
    <button @click="add">+1</button>
  </div>
</template>

<script setup>
import { ref } from "vue";
let count = ref(0)

const minus = () => {
  count.value--
}
const add = () => {
  count.value++
}
</script>

<style lang="scss" scoped></style>

最后效果为：

入门Vue3——从0到0.001

纯js版计数器

使用Vue来完成计数器

Vue简介

创建一个 Vue 应用

最后