---
# System prepended metadata

title: 'v-on:Event'
tags: [Mike課程]

---

---
tags:  Mike課程
---



# v-on:Event

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

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

* 解構出 ref , reactive 使用

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

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

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

```javascript=
<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>

```javascript=
 <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>

![](https://i.imgur.com/7u16Jhk.png)


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

```javascript=
//解構出 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");
```