Vue中app实例对象的几种写法 _实例

丈夫志四海，万里犹比邻。这篇文章主要讲述Vue中app实例对象的几种写法相关的知识，希望能为你提供帮助。
1.传统方法（练习小DEMO中用的这种）

< script type="text/ecmascript"> var app=new Vue({ el:"#app", data:{ message:"hello world" } }) < /script>

2.带有返回值的方法（实际项目中大多用的这种，优点下面会讲到）

< script type="text/javascript"> var app=new Vue({ el:‘#app‘, data: function(){ return { message:"hello world" } } }) < /script>

第二种的es6写法：

< script type="text/javascript"> var app=new Vue({ el:‘#app‘, data() { return { message:"hello world" } } }) < /script>

html里面body部分：这里以helloworld 为例

< div id="app"> {{message}} < /div>

区别：
传统的vue.js实例方法即第一种方法，基本不会被复用，作为练习用较多。
第二种第三种实际项目中用的比较多，因为可能在多处调用同一组件，为了不让多处的组件共享同一data对象，只能返回函数。

export default{ data(){ return { ... } } }

【Vue中app实例对象的几种写法】来源：之前看过一篇文章，大致是这么介绍的，今天想起来了更新下，项目中确实后两种用的较多。

Vue中app实例对象的几种写法