Vue.js 计数器示例：入门指南

<div id="app">
  <h1>Counter: {{ counter }}</h1>
  <button @click="increment">+</button>
  <button @click="decrement">-</button>
</div>
<script>
  new Vue({
    el: '#app',
    data: {
      counter: 0
    },
    methods: {
      increment() {
        this.counter++;
      },
      decrement() {
        this.counter--;
      }
    }
  });
</script>
<p>这个示例展示了如何使用 Vue.js 创建一个简单的计数器应用。</p>
<p>首先，我们引入了 Vue.js 的 CDN 链接：</p>
<pre><code class="language-html">&lt;script src=&quot;https://cdn.jsdelivr.net/npm/vue/dist/vue.js&quot;&gt;&lt;/script&gt;
</code></pre>
<p>然后，我们创建一个 Vue 实例并将其绑定到 <code>#app</code> 元素：</p>
<pre><code class="language-javascript">new Vue({
  // ...
});
</code></pre>
<p>在 Vue 实例中，我们定义了一个 <code>counter</code> 变量，并初始化为 0。</p>
<pre><code class="language-javascript">data: {
  counter: 0
},
</code></pre>
<p>我们还定义了两个方法 <code>increment</code> 和 <code>decrement</code>，分别用于增加和减少 <code>counter</code> 的值：</p>
<pre><code class="language-javascript">methods: {
  increment() {
    this.counter++;
  },
  decrement() {
    this.counter--;
  }
},
</code></pre>
<p>在 HTML 部分，我们使用了 Vue 的模板语法 <code>{{ counter }}</code> 来动态绑定 <code>counter</code> 变量的值到页面上。同时，我们给两个按钮分别绑定了点击事件 <code>@click</code>，并调用了对应的方法：</p>
<pre><code class="language-html">&lt;button @click=&quot;increment&quot;&gt;+&lt;/button&gt;
&lt;button @click=&quot;decrement&quot;&gt;-&lt;/button&gt;
</code></pre>
<p>这样，当我们点击加号按钮时，<code>counter</code> 的值会增加，点击减号按钮时，<code>counter</code> 的值会减少，并且页面上的计数器会实时更新。</p>
<p>这个简单的示例展示了 Vue.js 的一些基本功能，例如数据绑定、方法和事件处理。您可以通过修改这个示例来学习更多关于 Vue.js 的知识。</p>