vuejs最小demo示例

当创建一个最小的Vue.js demo示例，实现一个计数器页面时，可以按照以下步骤进行操作：

创建一个HTML文件（例如index.html）并添加Vue.js库的引用：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Vue.js Counter Demo</title>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
    <div id="app">
        <p>Count: {{ count }}</p>
        <button @click="increment">+</button>
        <button @click="decrement">-</button>
    </div>

    <script src="app.js"></script>
</body>
</html>

创建一个名为app.js的JavaScript文件，并在其中编写Vue实例的代码：

new Vue({
    el: '#app',
    data: {
        count: 0
    },
    methods: {
        increment() {
            this.count++;
        },
        decrement() {
            this.count--;
        }
    }
});

在上面的代码中，我们首先创建了一个Vue实例，并将其绑定到id为"app"的元素上。接下来，我们定义了一个data对象，其中包含了一个名为count的属性，初始值为0。然后，我们定义了两个方法increment和decrement，分别用于增加和减少count的值。在模板中，我们使用双花括号语法{{ count }}将count的值显示在页面上，并使用@click指令来监听按钮的点击事件，触发相应的方法。

在浏览器中打开index.html文件，你将看到一个计数器页面，其中有一个文本显示当前的计数值，以及一个加按钮和一个减按钮。点击加按钮将增加计数值，点击减按钮将减少计数值。

通过这个简单的示例，你可以学习如何使用Vue.js创建一个基本的计数器页面，并了解Vue.js的基本概念，如数据绑定、方法和指令的使用。你可以根据自己的需求进行进一步的扩展和定制。

Docs