Vue 实例化

const vm = new Vue

把Vue的实例命名为

vm是尤雨溪的习惯，我们应该沿用

vm对象封装了对视图的所有操作，包括数据读写、事件绑定、DOM更新

vm的构造函数是Vue,按照ES6的说法，vm所属的类是Vue

optioins是new Vue的参数，一般称之为选项或构造选项。

28 Vue里面的options - 图1

options里面有什么

数据: data、props、propsData、computed、methods、watch
DOM: el、 template、 render、 renderError
生命周期钩子: beforeCreate、 created、beforeMount、mounted、 beforeUpdate、 updated、activated、deactivated、 beforeDestroy、 destroyed、errorCaptured
资源: directives、 filters、 components
组合:parent、mixins、 extends、 provide、 inject

el(挂载点)

你想挂在到那个节点上

// 网页上有个#app节点
  <div id="app">{{n}}</div>
// 挂载节点
 new Vue({
  el: "#app"
})

data(内部数据)

尽量使用函数。

原因：假如引入的是一个以xxx.vue结尾了。在同一个网页引用2次。

render: h一h(X, [h(Demo), h( Demo)]) 
// new Vue( Demo), Demo._ data = Demo.data( );
// new Vue(Demo)， Demo._ data = Demo.data( );

会出现在同一个数据引用2次，如果其中一次修改了data数据那么机会将xxx.vue里面的data数据修改；如果它是一个函数，那么外部的引用就是调用这个函数，不会修改它。

  data() {
    return {
      n: 0
    }
  }

组件：可以组合的物件

methods

在methods的方法中进行声明，我们声明一个add方法用于加1操作。

var vm = new Vue({
  data: { a: 1 },
  methods: {
    add: function () {
      this.a++
    }
  }
})
vm.plus()
vm.a // 2

调用就是

<div id="app">
    {{ a }}
    <p><button @click="add">add</button></p>
</div>

components（构造器）

用于引用其他的Vue组件的

  components: {
        Frank:{
            template:`
            <div>demo2222</div>
            `
        }
    },

引用

  template: `
  <div>
      <button @click="toggle">toggle</button>
      <hr>
      <Demo  v-if="visible === true"/>
      <Frank/>
  </div>
  `,

四个钩子

created

在实例创建完成后被立即调用。在这一步，实例已完成以下的配置：数据观测 (data observer)，property 和方法的运算，watch/event 事件回调。然而，挂载阶段还没开始，$el property 目前尚不可用。

mounted

实例被挂载后调用，这时 el 被新创建的 vm. $28 Vue里面的options - 图2$ el 也在文档内。

updated

由于数据更改导致的虚拟 DOM 重新渲染和打补丁，在这之后会调用该钩子。

注意 updated 不会保证所有的子组件也都一起被重绘。如果你希望等到整个视图都重绘完毕，可以在 updated 里使用 vm.$nextTick：

destroyed

实例销毁后调用。该钩子被调用后，对应 Vue 实例的所有指令都被解绑，所有的事件监听器被移除，所有的子实例也都被销毁。

props(外部属性)

Demo.vue代码

<template>
  <div class="red">
    这里是Demo的内部
    {{ message }}
  </div>
</template>
<script>
export default {
  props: ["message"],
};
</script>
<style  scoped>
.red {
  color: red;
}
</style>

main.js代码

const Vue = window.Vue
Vue.config.productionTip = false
import Demo from './Demo.vue'
new Vue({
  components: {
    Demo
  },
  data: {
    visible: true
  },
  template: `
  <div>
    //  如果这里的message传的不是字符串，那么就得写如下代码
    //  <Demo :message="n">
    <Demo message="你好 props">
  </div>
  `,
}).$mount('#app')