Vue2 实例中的 data 属性三种写法与作用
2017-04-19 11:34
411 查看
<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对象,只能返回函数。
相关文章推荐
- 【VueJS】实例中data属性的三种写法及区别
- 实例分析SQL中除法的三种写法
- ruby中类的写法以及属性,实例变量,类方法的用法
- data-属性的作用是什么?
- data-属性的作用是什么?
- data-属性的作用是什么?
- SqlDataReader实例 HasRows属性与 Read()方法
- data-属性的作用是什么?
- 链接rel属性external、nofollow、external nofollow三种写法的区别
- 链接rel属性external、nofollow、external nofollow三种写法的区别
- data-属性的作用是什么?
- DataSnap 2010 TDSServerClass中Lifecycle生命周期三种属性说明
- form 标签中属性enctype="multipart/form-data"的作用
- 【HTML5】'data-'属性的作用是什么?
- data-属性的作用是什么?
- DataSnap—TDSServerClass中Lifecycle生命周期三种属性说明
- 【配置属性】—Entity Framework实例详解(DataAnnotations and Fluent API)
- HTML5的自定义属性data-*详细介绍和JS操作实例
- data-属性的作用是什么?
- data-属性的作用是什么?