码迷,mamicode.com
首页 > 其他好文 > 详细

Vue2实例中的data属性三种写法与作用

时间:2018-09-17 19:55:38      阅读:237      评论:0      收藏:0      [点我收藏+]

标签:bsp   click   turn   vue.js   fun   tps   script   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>

首先,1是3的语法糖,是新的ES6语法,和3一摸一样。

然后1和2在官方文档上都有例子,区别也解释得很清楚。简而言之,在app = new Vue对象时,没什么区别,因为你app对象不会被复用。但是在组件中,因为可能在多处调用同一组件,所以为了不让多处的组件共享同一data对象,只能返回函数。function有作用域,所以别的组件访问不了。

 技术分享图片技术分享图片

 

Vue2实例中的data属性三种写法与作用

标签:bsp   click   turn   vue.js   fun   tps   script   data属性   技术   

原文地址:https://www.cnblogs.com/yangai/p/9663344.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!