Vue.js data

1 개요

Vue.js data

data: { ... }
data() { return { ... }}
data: function () { return { ... }}

2 예시 1 ★

<div id="app">{{ message }}</div>
<script src="//unpkg.com/vue/dist/vue.min.js"></script>
<script>
var app = new Vue({
  el: '#app',
  data: {
    message: 'Hello Vue!'
  }
})
</script>

3 예시 2

<div id="app">{{ message }}</div>
<script src="//unpkg.com/vue/dist/vue.min.js"></script>
<script>
var app = new Vue({
  el: '#app',
  data() { return {
    message: 'Hello Vue!'
  }}
})
</script>

4 예시 3

<div id="app">{{ message }}</div>
<script src="//unpkg.com/vue/dist/vue.min.js"></script>
<script>
var app = new Vue({
  el: '#app',
  data: function () { return {
    message: 'Hello Vue!'
  }}
})
</script>

5 같이 보기

• Vue.js computed
• Vue.js mounted
• (Vue warn): The "data" option should be a function that returns a per-instance value in component definitions.