1、Vue 实例

const vm = new Vue(options)
其中 vm 对象封装了对视图的所有操作，包括数据读写、事件绑定、DOM 更新
vm 的构造函数是 Vue，按照 ES6 的说法，vm 所属的类是 Vue
options 是 new Vue 的参数，一般称之为选项或者构造选项

2、options 里面有什么

五类属性

数据：
- data：数据
- props：属性
- propsData：属性值
- computed：被计算的
- methods：方法
- watch：监听、观察
DOM：
- el：容器
- template：包括占位符的HTML
- render：渲染（与 template 二选一）
- renderError
生命周期钩子：
- beforeCreate
- created
- beforeMount
- mounted
- beforeUpdate
- updated
- activated
- deactivated
- beforeDestroy
- destroyed
- errorCaptured
资源：
- directives：指令
- filters（尽量不要使用）：过滤
- components：组件
组合：
- parent
- mixins：混入
- extends：扩展
- provide：提供
- inject：注入

3、入门属性

el - 挂载点
- 与 $mount 有替换关系

//使用 el
new Vue({
  el: "#app",
  render(h) {
    return h(Demo);
  },
}); 

//使用 $mount
new Vue({
  render(h) {
    return h(Demo);
  },
}).$mount("#app");

data - 内部数据
- 支持对象和函数，优先使用函数

//注意引入完整版 Vue
<script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.11/vue.min.js"></script>

//data 为对象
new Vue({
  data: {
    n: 0,
  },
  template: `
    <div class="red">
      {{n}}
      <button @click="add">+</button>  
    </div>
  `,
  methods: {
    add() {
      this.n += 1;
    },
  },
}).$mount("#app");

//data 为函数
new Vue({
  data() {
    return { n: 0 };
  },
  template: `
    <div class="red">
      {{n}}
      <button @click="add">+</button>  
    </div>
  `,
  methods: {
    add() {
      this.n += 1;
    },
  },
}).$mount("#app");

methods - 方法
- 事件处理函数或者是普通函数
components - 组件
- 什么是组件：可以组合的物件，可以说是实例中的示例
注意：
- 文件名用小写，如 './demo.vue'
- 组件名用大写，如import Button from './demo.vue'

import Demo from "./Demo.vue";
new Vue({
    components: {
      Demo: Demo,
    },
    template:`
      <Demo>
    `
})

//方法一的 ES6 语法
import Demo from "./Demo.vue";
new Vue({
    components: {Demo},
    template:`
      <Demo>
    `
})


//方法二
Vue.component('wbh',{
    template:`
        <div>Demo2</div>
    `
})
new Vue({
    template:`
      <wbh>
    `
})

//方法三
new Vue({
    components: {
      wbh:{
        data(){
            return {n:0}
        },
        template:`
          <div>wbh's n:{{n}}</div>
        `
      },
    },
    template:`
      <wbh>
    `
})
//方法一（优先使用，模块化）
import Demo from "./Demo.vue";
new Vue({
    components: {
      Demo: Demo,
    },
    template:`
      <Demo>
    `
})

//方法一的 ES6 语法
import Demo from "./Demo.vue";
new Vue({
    components: {Demo},
    template:`
      <Demo>
    `
})


//方法二
Vue.component('wbh',{
    template:`
        <div>Demo2</div>
    `
})
new Vue({
    template:`
      <wbh>
    `
})

//方法三
new Vue({
    components: {
      wbh:{
        data(){
            return {n:0}
        },
        template:`
          <div>wbh's n:{{n}}</div>
        `
      },
    },
    template:`
      <wbh>
    `
})

四个钩子
- created - 实例出现在内存中
- mounted - 实例出现在页面中
- updated - 实例更新了
- destroyed - 实例消亡了
props - 外部属性

<Demo2  message = "add">    //调用的是字符串 'add'
<Demo2 :message = "add">    //调用的是 add 方法

关于 Vue 构造选项

1、Vue 实例

2、options 里面有什么

3、入门属性