# v-on:Event

<div class="alert alert-success text-center">
v-on 縮寫可以用 @ 代替，v-on:click 就可寫成@click
</div>

我們用一個點擊事件後加總與減少的範例
## ==ref 使用方式==

* 解構出 ref , reactive 使用

    //解構出 ref , reactive 使用
      const { ref , reactive} = Vue; 

* 在setup 初定義 0，回傳 num 給予HTML使用

const App = {
        setup() {
          
          //在setup 初定義 0
          const num = ref(0);
          // 回傳 num 給予HTML使用
          return {
            num
          };
        },
      };

* 初設定架構

<div id="app">
       <!--  num值顯示  -->
      <h1>{{ num }}</h1>
      <button>Add</button>
      <button>Remove</button>
    </div>
    <script src="./js/vue.js"></script>
    <script>
       //解構出 ref , reactive 使用
      const { ref , reactive} = Vue; 
      
      const App = {
        setup() {
          
          //在setup 初定義 0
          const num = ref(0);
          // 回傳 num 給予HTML使用
          return {
            num
          };
        },
      };
      Vue.createApp(App).mount("#app");
    </script>

<div class="alert alert-danger text-center" >
如果要讓你的setup裡面資料或函式都要呈現在畫面一定要傳到 return 中處理
</div>

 <div id="app">
      <h1>{{ num }}</h1>
      //使用 @click 事件綁定 addSet 函式
      <button @click="addSet">Add</button>
      <button>Remove</button>
    </div>
    <script src="./js/vue.js"></script>
    <script>
       //解構出 ref , reactive 使用
      const { ref , reactive} = Vue; 
      
      const App = {
        setup() {
          
          const num = ref(0);
            
          const addSet = ()=> {
         
            num.value++;
          } 
         // addSet函式 還需要透過 return 回傳HTML中
          return {
            num, addSet
          };
        },
      };
      Vue.createApp(App).mount("#app");

<div class="alert alert-danger text-center" >
ref是物件函式需要用到的是函式裡面的value去處理
</div>


## ==reactive 物件使用方式==

//解構出 ref , reactive 使用
      const { ref , reactive} = Vue; 
      
      const App = {
        setup() {
          
          const num = reactive({index:0});

          const addSet = ()=> {

            num.index++;
          } 
        
          return {
            num, addSet
          };
        },
      };
      Vue.createApp(App).mount("#app");