一、const vm=new Vue(options)

1、理解const vm=new Vue(options)

• 这就是构造一个vue实例
• vm为构造出来的一个对象，封装了对应的DOM对象及所有操作，包括数据读写、事件绑定、DOM更新
• vm.__proto__===Vue.prototype
• 因vm的构造函数是Vue，那vm所属的类是Vue
• const vm可省略，直接new Vue也可
• options是new Vue的参数，一般称为选项/构造选项

二、options

1、options的五类属性（不完全写入）

1. 数据

• data：数据
• props：属性
• computed：计算的
• methods：方法（方法和函数的区别：方法面向对象，一般是如obj.sayHi()；函数一般是add()）
• watch：观察

2. DOM

• el：容器
• template：HTML内容
• render：渲染（注意：与template二选一）

3. 资源

• directives：指令
• filters：过滤器
• components：组件

4. 组合

• parent：父
• mixins：混入
• extends：拓展
• provide：提供
• inject：注入

5. 生命周期钩子

• beforeCreate：生之前
• created：生之后
• 挂载、更新、消亡之前和后

6. 以上五大类属性可分为入门属性（9个）+高级属性（9个）+特殊属性（2个），进行深入学习

2、入门属性（9个）

2.1、el-挂载点

new Vue({
  el:'#app',
  render(h){
    return h(Demo)
  }
})

• 可用$mount代替

new Vue({
  render(h){
    return h(Demo)  //非完整版写法，以下开始使用完整版
  }
}).$mount('#app')

2.2、data-内部数据

• 支持对象和函数，优先用函数（为了防止有两个及以上的组件共用data）

new Vue({
  data:{
    n:0
  }
  ...
})

new Vue({
  data:function(){ //缩写data(){}
    return{
      n:0
    }
  }
  ...
})

• 对于data的深入理解在《Vue数据响应式》

2.3、methods-方法

• 事件处理函数或简单函数

new Vue({
  ...
  methods:{
    add(){
      this.n+=1  //若add不写在methods里会报错，说add没有定义
    }
  }
})

• methods第二种用法，用来主动在模板里调用，特点：每渲染一次就调用一次

new Vue({
  data(){
    return{
      ...
      array:[1,2,3,4,5,6,7,8]
    }
  },
  template:`
    <div>
      ...
      <hr>
      {{filter()}}
    </div>
  `,
  methods:{
    ...
    filter(){
      return this.array.filter(i=>i%2===0)  //输出2,4,6,8
    }
  }
})

2.4、components-Vue组件

• 方法1引入：Demo.vue文件就是一个组件（优先使用该方法，模块化）

import Demo from './Demo.vue'
new Vue({
  components:{
    Lanlan:Demo  //给它一个名字，并在后面直接使用；也可直接叫Demo，即Demo:Demo，ES6允许直接{Demo}
  },
  ...
  template:`
    <div>
      ...
      <Lanlan />
    </div>
  `,
  ...
})

• Demo.vue内容

<template>
  //写视图模板，div、button等
</template>
<script>
  export default{
    //写new Vue里除template外的所有
  }
</script>
<style>
  //写CSS样式
</style>

• 方法2引入：创建一个Demo2组件

Vue.component('Demo2',{  //第二个参数的类型和new Vue()可以一样，可以用data、methods等
  template:`
    <div>demo2</div>
  `
})
new Vue({
  ...
  template:`
    <div>
    ...
    <Demo2 />
    </div>
  `,
  ...
})

• 方法3引入：结合方法1和2

Vue.component('Demo3')
new Vue({
  component:{
    Lanlan:{
      template:`
        <div>demo3</div>
      `
    }
  },
  ...
  template:`
    <div>
      ...
      <Lanlan />
    </div>
  `,
  ...
})

2.5、钩子created-实例出现在内存中

2.6、钩子mounted-实例出现在页面中

new Vue({
  ...
  created(){
    console.log('实例出现在内存中')
  },
  mounted(){
    console.log('实例出现在页面中')
  },
  ...
})

• 如何证明？在console.log前加debugger，看在页面中是否显示对应内容

2.7、钩子updated-实例更新了

new Vue({
  ...
  updated(){
    console.log('实例更新了')  //点击按钮时触发
  },
  ...
})

2.8、钩子destroyed-实例从页面和内存中消亡了

• 新建一个Demo.vue，将以上钩子放入script里
• 在main.js的new Vue里新建一个toggle按钮，控制消失和出现

new Vue({
  components:{Demo},
  data:{
    visible:true
  },
  template:`
    <div>
      <button @click="toggle">toggle</button>
      <hr>
      <Demo v-if="visible===true" />
    </div>
  `,
  methods:{
    toggle(){
      this.visible=!this.visible
    }
  },
}).$mount('#app')

...
<script>
  export default{
    ...
    created(){},
    mounted(){},
    destroyed(){
      console.log('实例从页面和内存中消亡了')  //当点击toggle按钮时触发，再次点击时，created()和mounted()生效
    },
  }
</script>
...

• 消亡、出现、再消亡、再出现...两次及以上的出现不会是同一个内存中

2.9、props-外部数据

<template>
  <div>
    {{message}}
  </div>
</template>
<script>
  export default{
    props:['message']
  }
</script>
...

new Vue({
  ...
  template:`
    <div>
      <Demo message="你好props" />  //没有引号代表传的只是字符串
    </div>
  `,
  ...
})

• 若要传内部数据

new Vue({
  ...
  data:{
    n:0
  },
  template:`
    <div>
      <Demo : message="n" />  //注意看，有引号，输出为0
    </div>
  `,
  ...
})

• 还可以传方法

<template>
  <div>
    {{message}}
    <button @click="fn">call fn</button>
  </div>
</template>
<script>
  export default{
    props:['message','fn']
  }
</script>
...

new Vue({
  ...
  data:{
    n:0
  },
  template:`
    <div>
      <Demo : message="n" :fn="add" />  
    </div>
  `,
  methods:{
    add(){
      this.n+=1
    }
  },
  ...
})