前言

在了解完Vue的项目架构后就要进行真正的Vue项目开发学习了，我们先来看看一个Vue架构的项目为何优于传统的HTML+JS的项目了，这里就用简单计数器的例子来说明

Vue vs HTML+JS

HTML+JS

我们先来看看HTML+JS如何实现一个简单计数器

项目思路

我们可以先在html上放上一个数字（初始为0），再放上两个按钮实现+1与-1的功能，这俩功能我们可以利用addEventListener事件监听来监听按钮的点击事件，来对数字的增加与减少，即可。

项目实现

html：

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

我们在html部分只需要这样设置了id的三个容器来实现我们的功能

Js：

<script>
        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
        })
</script>

在JS方面，我们使用document.getElementById来用变量承载这三个DOM结构，然后用变量count来代替h2的innerText的增减，然后监听点击事件来增减count并替换h2的内容就简单实现了我们的简单计数器需求。

接下来看Vue.js会怎么做

Vue.js

Vue框架首先强大的一点在于，你‘不需要’在HTML中写繁多的HTML代码了，而是在JS中写，HTML中只提供一个id为App的挂载点

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

JS部分，我们首先是

const { createApp } = Vue

在安装了Vue3之后，我们就可以通过这段代码来创建一个Vue的App了，这里是用了解构的思想从Vue中解构了createApp这个方法，现在我们就可以用这个方法来搞点事情了，这个方法有什么用呢,且听我细细说来。

createApp 是 Vue 3 中用于创建 Vue 应用程序实例的方法。它取代了 Vue 2 中的 new Vue() 构造函数，是 Vue 3 的核心功能之一。下面是一些关于 createApp 的详细介绍：

1. 介绍

createApp 是 Vue 3 中用于创建应用程序的入口点。
它返回一个可配置的应用程序实例，允许您注册全局组件、指令、插件等。
最终，您需要调用 .mount() 方法来挂载应用程序到 DOM。

2. 语法

import { createApp } FROM 'vue';

const app = createApp({
  // 根组件的选项
});

3. 参数

createApp 接受一个选项对象作为参数，该对象可以包含以下属性：

template: 用于根组件的模板字符串，我们将本该写在Html中的代码以字符串的形式写在这里，同时这里的代码中就可以使用vue的一些方法，然后vue会自动的扫描出这些方法来。
render: 用于根组件的渲染函数。
components: 注册的全局组件。
directives: 注册的全局指令。
methods: 定义在根组件上的方法。
data: 根组件的数据选项，储存我们在template中设置的变量代码。

我们的代码就水落石出了

const app = 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++
                }
            }
        })

template中装的代码与传统的不太一样，原本默认为0的h2中装了{{count}}这样一个东西，这就是Vue中对html代码中你要的变量的使用方式。在button 按钮中click="minus"``lick="add"顾名思义，就是对点击事件的监听,@是vue的一个命令的简写，即v-on事件，意为绑定一个事件，内存一个方法的调用。

data内就是我们定义的变量，内部的变量是响应式的，即其他地方的count发生改变就会改变所有地方的值，包括html中的。

app.mount('#app')

#代表的就是id，这里就是把app挂载到了html上。

对比

在这样一个简单的需求上，vue的代码量可能不会太领先于传统的html+js,但在复杂的需求中，vue的优势就是无法比拟的了，你可以想象一下，vue不再需要反复的使用document.getElementById来获取Dom结构来修改内部数据了，而vue内置的很多方法也方便了事件监听等方法的实现。

总结

通过简单的比较，Vue强大的性能以及语义化的使用方式较之传统HTML+JS可谓是遥遥领先。

如果这篇文章对你有所帮助，就点个赞再走吧！！！

我是Ace，我们下次分享再见！！！

Vue.js vs 传统HTML+JS：感受框架的魅力

前言