# Vue 起手常見結構

> html 檔

## 常見基本結構

<div id="app"></div>

const app = {
// 資料 (函式)
  data() {
    return {
      
    };
  },
  
// 生命週期 (函式)
  created() {
    
  },
  
// 方法 (物件)
  methods: {

  },
};

Vue.createApp(app).mount("#app");

## 結構型態統整
| 結構 | 型態 |
| --------: | ---- |
| 資料 | 函式 |
| 生命週期 | 函式 |
| 方法| 物件 |

## 內容介紹
### 1. Data 資料
資料(Data) 一定是一個函式，會回傳一個物件，在內部新增 key、value

### 2. created 生命週期
生命週期(created)也是一個函式，有些資料必須在進入元件後才進行調整，就寫生命週期中

created 中的 this 照理說是指向 app 物件，卻可以取到 data 中的值。因為 created 中的 this 是指向 **Proxy 物件**，Proxy 物件會攔截所有的值，因此，created 中的 this 可以取到 counter 的值

可以在 Proxy 中的 Target 物件下方有：

1. $開頭的 Vue 自定義方法
2. 開發者自訂的一些值或是變數，例如上述 code 中的 counter：(...)

### 3. methods 方法

將函式放在 methods 物件中，並在想操作的元素加上 ` v-on:事件="函式名稱" `

## 範例

<div id="app">
  <button type="button" v-on:click="minus">
    -
  </button>
  {{ counter }}
  <button type="button" v-on:click="plus">
    +
  </button>
</div>

const app = {
// 資料 (函式)
  data() {
    return {
      counter: 0,
    };
  },
  
// 生命週期 (函式)
  created() {
    this.counter = 10;
    console.log(this);
  },
  
// 方法 (物件)
  methods: {
    minus() {
      if (this.counter > 0) {
        this.counter -= 1;
      }
      else {
        this.counter = 0;
      }
        // console.log(1);
      },
    plus() {
      this.counter += 1;
    },
  },
};

Vue.createApp(app).mount("#app");

###### tags: `Vue`