怪味曹小豆

导航

Vue2 实例中的 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
  //  },        
                             //和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>

 

posted on 2018-09-12 17:16  怪味曹小豆  阅读(307)  评论(0编辑  收藏  举报