Vue中app執行個體對象的幾種寫法

標籤：def   mes   練習   efault   比較   大致   exp   return   fun   

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執行個體對象的幾種寫法