Several ways to do app instance objects in Vue

1. Traditional methods (practice this in small demo)

    <script type= "Text/ecmascript" >            var app=New  Vue ({                el:"#app",                data:{                    message:"Hello World"                }            )        </script>

2. The method with the return value (which is mostly used in the actual project, the advantages are described below)

<script type= "Text/javascript" >                var app=New  Vue ({                el:' #app ',                     function() {                return  {                message:"Hello World"                }        }    }) </script>

The second type of ES6:

<script type= "Text/javascript" >    var app=New  Vue ({        el:' #app ',        Data () {            return  {                message:"Hello World"}}    )</ Script>

The body part of HTML: Here take HelloWorld as an example

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

Difference:

The traditional Vue.js instance method is the first method, which is not reused and is used more as a practice.

The second third practical project uses more, because it is possible to invoke the same component in multiple places, so that only functions can be returned in order not to share the same data object with multiple components.

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

Source: Before read an article, roughly so introduced, today I think up the update, the project is really the latter two use more.

Several ways to do app instance objects in Vue