创建vue组件与自定义一个vue组件时的区别

在已有dom元素上创建一个vue组件

<div id="app">

   

</div>

 

var app = new Vue({

  el:'#app',

  data:{

    message:'',

  }

})

 

自定义vue组件：

 

<div id="app">

    <my-example></my-example>

</div>

 

<script>

//全局注册

  Vue.component('my-example',{

    template:'<div>{{message}}</div>',

    data: function(){

      return{

        message:"组件内容"

      }

    }

  })

 

var app = new Vue({

  el:'#app'

})

</script>

 

根据上述例子我们可以知道：

在自定义组件时，data为一个函数，同时数据需要return出去