Vue页面展示计数器Vue.js 是一个用于构建用户界面的渐进式框架。Vue 被设计为可以自底向上逐层应用，从简单的脚本

Vue.js 是一个用于构建用户界面的渐进式框架。Vue 被设计为可以自底向上逐层应用，从简单的脚本标签增强到完整的单页应用程序（SPA）。

OLD方法实现计数器：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <h2 id="h2">0</h2>
    <button id='minus'>-1</button>
    <button id='add'>+1</button>
</body>
<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>
</html>

这段HTML和JS代码创建了一个简单的计数器应用，它包括一个标题元素（<h2>）用于显示当前计数，以及两个按钮，一个用于递减计数，另一个用于递增计数。下面是代码的工作原理：

HTML结构：页面包含一个<h2>元素，初始文本为0，代表计数器的起始值。还有两个<button>元素，分别用于减少和增加计数。
获取DOM元素： JavaScript部分首先使用document.getElementById获取页面上三个关键元素的引用：minus按钮、add按钮和h2标题。
初始化计数器变量：定义了一个名为count的变量，并将其初始值设置为0。
事件监听器：
- 对minus按钮添加了一个点击事件监听器，每当按钮被点击时，count的值就会递减1，并且更新h2元素的文本内容为新的count值。
- 同样，对add按钮也添加了一个点击事件监听器，每次点击时，count的值会递增1，然后更新h2元素的文本内容。

当页面加载时，计数器将显示为0。用户可以通过点击-1按钮递减计数，或点击+1按钮递增计数，<h2>元素会实时更新显示当前的计数值。

Vue实现计数器：

<!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 : 10
                }
            },
            methods:{
                minus(){
                    this.count--
                },
                add (){
                    this.count++
                }
            }
            }).mount('#app')

    </script>
</body>
</html>

这段代码使用了Vue框架来创建一个简单的计数器应用。这里的关键点如下：

引入 Vue.js：通过 <script> 标签从 unpkg CDN 引入Vue。
创建 Vue 实例：使用 createApp 函数创建一个 Vue 应用实例。
定义模板：在 createApp 的配置对象中，使用 template 属性来定义一个字符串模板。这个模板包含了 HTML 结构，包括一个显示计数的 h2 标签和两个按钮，一个用于减少计数，另一个用于增加计数。
响应式数据：使用 data 函数来返回一个对象，其中包含了 count 属性。这个属性是响应式的，意味着它的变化会触发视图的更新。
方法：在 methods 对象中定义了 minus 和 add 方法，这两个方法分别用于减少和增加 count 的值。当按钮被点击时，对应的事件处理器会调用这些方法。
挂载应用：使用 mount 方法将 Vue 实例挂载到页面的 #app 元素上。这意味着 Vue 将接管这个元素，并将模板渲染到这个元素的位置。

当页面加载时，#app 元素会被替换为模板的内容。count 的初始值为 10，显示在 h2 标签中。用户可以通过点击 -1 和 +1 按钮来减少或增加计数，页面会即时更新显示新的计数值。