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實例對象的幾種寫法