- <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
- // },
- // 和 2 在官方文档上都有例子,
- // 地址是: https://blog.csdn.net/baidu_31333625/article/details/70238611
- // 简而言之, 在 app = new Vue 对象时, 没什么区别, 因为你 app 对象不会被复用
- // 但是在组件中, 因为可能在多处调用同一组件,
- // 所以为了不让多处的组件共享同一 data 对象, 只能返回函数.
- // 3.data: function() { //1 是 3 的区别: 1 是 3 的语法糖, 和 1 一模一样
- return {
- count: 0
- }
- },
- methods: {
- inc () {this.count++}
- }
- })
- app.$mount('#app')
- </script>
来源: http://www.bubuko.com/infodetail-2765081.html