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>
致力于前端技术学习与分享,会及时更新博客。