创建Vue实例

const vm = new vue(options) 这就是构造一个vue的实例（前面的const vm可以省略），实例根据你给出的选项得出一个对象，这个选项我们命名为vm,vm对象封装对视图的所有操作，数据的读写、DOM的更新全部都有vm这个对象负责，只需要调用它的API就好。vm叫做vue实例或者vue对象。
vm.__proto__ === Vue.prototype , Vue.__proto__ === Function.prototype

options里面有什么？

文档

英文文档里搜options，中文文档里搜选项，即可得到所有相关文档。

options 的五类属性

数据： data(数据)、props(属性)、propsData、computed(被计算出来的)、methods(方法)、watch(观察)
DOM： el(容器或者是挂载点)、template(html内容)、render(渲染)、renderError
生命周期钩子： beforeCreate(之前切入)、created(之后切入)、beforeMount、mounted(挂载)、beforeUpdate(更新之前)、updated(更新之后)、activated、deactivated、beforeDestroy、destroyed(消亡)、errorCaptured
资源：directives(指令)、filters(过滤器)、components(组件)
组合： parent、minxins(混入)、extends(拓展)、provide(提供)、inject(注入)
其他：先不看

注意：方法（methods）和函数的区别：方法是属于面向对象概念，函数是属于数学概念，在面向对象里面，方法一定是面向对象的。例如obj.sayhi是函数也是方法，但sayhi在经典面向对象时是不能单独出现的，所以一般obj.sayhi是方法，sayhi是函数。（在JS里面既是方法也是函数，是因为JS是融合JS对象和函数的一门编程语言）。

入门属性

el-挂载点

new Vue({
  el: "#frank",
  render: (h) => h(Demo),
});
//等价于
new Vue({
  render: (h) => h(Demo),
}).$mount("frank");

data-内部数据

data: {
    n: 0,
  }
//等价于
data: function() {
    return { 
      n: 0
    }
  },
//等价于
data() {
    return { 
      n: 0
    }
  },

注意： vue的data有bug。

`data` 必须是一个函数

如果 Vue 没有这条规则，点击一个按钮就可能会像如下代码一样影响到其它所有实例
如果data是写在.vue文件中的（也可以叫做vue组件），必须写成函数，避免2个及两个以上的组件调用data的问题，每次调用data的到新的data。
Vue 实例的数据对象。Vue 会递归地把 data 的 property 转换为 getter/setter，从而让 data 的 property 能够响应数据变化。对象必须是纯粹的对象 (含有零个或多个的 key/value 对) ：浏览器 API 创建的原生对象，原型上的 property 会被忽略。大概来说，data 应该只能是数据 - 不推荐观察拥有状态行为的对象。
当一个组件被定义，data 必须声明为返回一个初始数据对象的函数，因为组件可能被用来创建多个实例。如果 data 仍然是一个纯粹的对象，则所有的实例将共享引用同一个数据对象！通过提供 data 函数，每次创建一个新实例后，我们能够调用 data 函数，从而返回初始数据的一个全新副本数据对象。

methods-方法

new Vue({
  data() {
    return {
      n: 0,
      array: [1, 2, 3, 4, 5, 6, 7, 8],
    };
  },
  template: `
  <div class="red">
    {{ n }}
    <button @click="add">+1</button>
    <hr>
    {{filter(array)}}
  </div>
  `,
  methods: {
    add() {
      this.n += 1;
    },
    filter(array) {
      return array.filter((i) => i % 2 === 0);
    },
  },
}).$mount("#frank");

new Vue({
  data() {
    return {
      n: 0,
      array: [1, 2, 3, 4, 5, 6, 7, 8],
    };
  },
  template: `
  <div class="red">
    {{ n }}
    <button @click="add">+1</button>
    <hr>
    {{filter()}}
  </div>
  `,
  methods: {
    add() {
      this.n += 1;
    },
    filter() {
      return this.array.filter((i) => i % 2 === 0);
    },
  },
}).$mount("#frank");

注意：用来主动在模板中调用，调用特点是：每次渲染就会调用一次，每次一有变化，就会重新渲染到页面上。

components-组件

方法一：像demo一样，直接创建一个文件，这个文件就是一个组件（优先使用）

import Demo from "./Demo.vue";
const vm = new Vue({
  components: {Demo},
  ......
  template:`
  <div class="red">
    {{ n }}
    <button @click="add">+1</button>
    <frank/>
    <hr>
    {{filter()}}
  </div>
  `
  ......
  })

方法二：用JS的方式创建组件

Vue.component("Demo2", {
  template: `
  <div>demo2</div>
`,
});

注意：如果是直接new vue 的，我们就把vm叫做实例，如果是用vue component或者是用Vue文件，我们就叫做组件。
方法三：两者结合起来

Vue.component("Demo2", {
  template: `
  <div>demo3333</div>
`,
});
const vm = new Vue({
  components: {
    Frank: {
      data() {
        return { n: 0 };
      },
      template: `
      <div>Frank's n: {{n}}</div>
      `,
    },
  },
 })

注意：文件名建议都小写，组件用大写开头

四个钩子（created，mounted，updated，destroyed）

Demo.vue

<template>  
    <div class="red">
    {{ n }}
    <button @click="add">+1</button>
  </div>
</template>

<script>
export default {
    data() {
    return {
      n: 0,
      array: [1, 2, 3, 4, 5, 6, 7, 8],
    };
  },
  created() {
    console.log("这玩意出现在内存中，没有出现在页面中");
  },
  mounted() {
    console.log("这玩意出现在页面中");
  },
  updated() {
    console.log("更新了");
  },
  destroyed() {
    console.log('已经消亡了')
  },

  methods: {
    add() {
      this.n += 1;
    },
  },
}

</script>

<style scoped>

</style>

props

<Demo message="0"/>与<Demo :message=" '0' "/>意思相同，如果写：必须用" ' ' "

new Vue({
  components: { Demo },
  data: {
    visible: true,
    n: 0,
  },
  template: `
  <div>
     {{n}}
     <Demo :message="n" :fn=" add "/>
  </div>
  `,
  methods: {
    add() {
      this.n += 1;
    },
  },
}).$mount("#frank");

Vue全解-构造选项