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实例对象的几种写法

最新文章

热门文章