明天其實不只明天，也是後天的昨日。

昨天我們雖然只介紹了三個 Vue Directives 的常用內建指令v-text,v-html,v-on，但相信嘛？使用 Vue.js 只要幾個步驟就可以把一個計數器實作出來，使用的情境像是我們在網路購物時的數量控制，

實作時可以先想想哪個部分需要初始化資料(最初顯示在畫面的資料)，然後再把事件監聽綁在加號和減號的按鈕上，綁定的方法再處理邏輯(目前的數字加 1 或減 1)就完成了。

我們先來看範例：VueJs_Base_counter

HTML 的部分

<div id="app">
  <!-- 分別在兩個按鈕上監聽、綁定方法 -->
  <input type="button" value="-" v-on:click="decrease" />
    <span>{{count}}</span>
  <input type="button" value="+" v-on:click="increase" />
</div>

JavaScript 的部分：
別忘了以 CDN 的方式將vue.js載入文件裡喔！

const app = new Vue({
  el: '#app',
  data: {
    count: 1,
  },
  methods: {
    // 確認數字比 0 大才可以減
    decrease: function () {
      if (this.count > 0) {
        this.count--;
      } else {
        console.log('out of stock');
      }
    },
    // 加法，最多只能增加到10
    increase: function () {
      // 庫存只有10
      if (this.count < 10) {
        this.count++;
      } else {
        console.log('all sele, out of stock');
      }
    },
  },
});

以往的 JS 原生寫法必須先把 DOM 取到的值抓到再處理，處理完後在塞會去 DOM 裡顯示，但 Vue 只要把變數綁定在元素上，只要資料一改變，元素上的資料也會自動地更新，有沒有很方便？

明天我們再來學習其他的指令喔～

每日一句法文有益身心：À demain ! 阿.ㄉㄜ .嗎！ 明天見！