<script src="https://unpkg.com/vue@next"></script>

<script src="../vue.js"></script>

<h2>當(dāng)前計數(shù)：<span class="counter"></span></h2>
<button class="add">+1</button>
<button class="sub">-1</button>
<script>
//1.獲取dom
const h2E1 = document.querySelector("h2");
const counterE1 = document.querySelector(".counter");
const addBtnE1 = document.querySelector(".add");
const subBtnE1 = document.querySelector(".sub");

// 2.定義一個變量記錄數(shù)據(jù)
let counter = 100;
counterE1.textContent = counter;
//3.監(jiān)聽按鈕的點擊
addBtnE1.onclick = function () {
      counter++;
      counterE1.textContent = counter;
    };
subBtnE1.onclick = function () {
      counter--;
      counterE1.textContent = counter;
    };

<div id="app">
	<h2>當(dāng)前計數(shù):{{counter}}</h2>
	<button @click="increment">+1</button>
	<button @click="decrement">-1</button>
</div>

<script src="./lib/vue.js"></script>
<script>
      const app = Vue.createApp({
        // @click 綁定

        data: function () {
          return {
            counter: 0,
          };
        },
        methods: {
          increment: function () {
            this.counter++;
          },
          decrement: function () {
            this.counter--;
          },
        },
      });
app.mount("#app");