【Vue基础】一、从创建一个Vue对象开始

<h2>1. 实例选项的使用</h2>

var my = new Vue({
  el: 'body',
  template: '<div>{{ fruit }}</div>',
  data: {
    fruit: 'apple'
  }
})

el : vue对象装载的位置
template: html代码片段
data: 数据

<h2>2. components的使用</h2>

import Vue from 'vue'
import App from 'App.vue'
new Vue({
  el: 'body',
  components: { App }
})

实例化一个根组件 Vue ， 通过el挂载到body上。
从App.vue中引入App子组件，App是Vue的子组件，Vue又挂载到body上，所以App就被挂载到了body上。

<h2>3. data的正确打开方式</h2>

data使用时要避免引用赋值，如这样：

//不推荐的方法
 data : {
     d : 5,
     b : 8,
     fruit: 'apple'
}

如果一个组件在项目中被多次引用，在一个组件中改变data的值，其余组件也会改变，所以要用function返回数据就可避免这种情况。如这样：

//推荐的方法
 data ()  {
   return {
     d : 5,
     b : 8,
     fruit: 'apple'
    }
}