---
# System prepended metadata

title: 'Data Property, Methods'
tags: [Vue]

---

# Data Property, Methods
###### tags: `Vue`

### $data
> 為了與變數區分，取用屬性時，通常會在前面加上 `$` 符號。
```javascript=
const app = Vue.createApp({
    // data 方法寫法
    data(){  
        return {count:4}
    }
    // data 屬性寫法
    data:{count:4}
})

const vm = app.amount("#app")

console.log(app.$data)  // 印出所有 data 屬性的資料
console.log(app.count)  // data 屬性的資料會全部展開 可以直接取到屬性值
```

### $method
> 若會使用到 this，勿使用箭頭函式。
```javascript=
const app = Vue.createApp({
    data(){  
        return {count:4}
    },
    method(){
        increment(){   // increment 函式
            this.count++
        } 
    }
})

const vm = app.amount("#app")

vm.increment()  // 使用方法
console.log(app.count)  // 5
```

#### 直接在 HTML Tag 中綁定事件方法
```htmlembedded=
<button @click="increment">Click Me</button>
```

### $computed
##### `getter`
##### `setter`