VUE定义data的三种方式
Posted gaonac
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了VUE定义data的三种方式相关的知识，希望对你有一定的参考价值。
写法粗糙，只是为了自己工作时方便查看
<script src="https://unpkg.com/vue/dist/vue.js"></script>
<div id="app">
<span>{{count}}</span>
<button @click="inc">+</button>
</div>
<script>
var app = new Vue({
// 1.
// data () {
// return {count: 0}
// },
// 2.
// data: {
// count: 0
// },
// 3.
data: function() {
return {
count: 0
}
},
methods: {
inc () {this.count++}
}
})
app.$mount(‘#app‘)
</script>
<div id="app">
<span>{{count}}</span>
<button @click="inc">+</button>
</div>
<script>
var app = new Vue({
// 1.
// data () {
// return {count: 0}
// },
// 2.
// data: {
// count: 0
// },
// 3.
data: function() {
return {
count: 0
}
},
methods: {
inc () {this.count++}
}
})
app.$mount(‘#app‘)
</script>
以上是关于VUE定义data的三种方式的主要内容，如果未能解决你的问题，请参考以下文章
3Vue 笔记（axiosVue 动画Vue 组件使用 this.$refs 来获取元素和组件Vue 组件中 data 和 props 的区别）