Vue实例及构造选项

1. Vue实例

使用过jQuery的小伙伴 都知道当我们在使用jQuery获取一个元素的时候返回的并不是对象本身，而是一个包含可以操作这个元素的方法和属性的API对象，Vue实例也是如此。

const vm = new Vue(options);    // 这就是一个Vue实例 前面变量声明可以不写 参数options就是构造选项

把Vue的实例命名为vm是尤雨溪的习惯,我们应该沿用。
vm对象封装了对视图的所有操作，包括数据读写、事件绑定、DOM更新。vm的构造函数是Vue，按照ES6的说法，vm所属的类是Vue。
optioins 是 new Vue 的参数，一般称之为选项或构造选项。

2. 构造选项

2.1 options的五类属性

1. 数据：data、props、propsData、computed、methods、watch
2. DOM：el、template、render、renderError
3. 生命周期钩子(函数): beforeCreate、created、beforeMount、mounted、beforeUpdate、updated、activated、deactivated、beforeDestroy、destroyed，errorCaptured
4. 资源:directives、filters、components
5. 组合:parent、mixins、extends、provide、inject
6. 等等
   这里面有些常用有些不常用，常用的着重记就好。

2.2 options中的 el 、 data 、method属性用法

el属性： 表示组件或实例的挂载点

new Vue({
  el:'#app',     //  表示挂载在id为app的元素上
  render:h => h(demo) 
})
// 又或者是
new Vue({
  render:h => h(demo)
}).$mount('#app')   

data属性：表示当前Vue实例的内部数据
可以使用对象和函数写法，优先使用函数写法，是为了防止重复渲染相同的组件引用同一个内部数据。
methods属性：里面是事件处理函数或者是普通函数

new Vue({
  data(){
    return  {n:0}  //  内部数据
  },
  template:`
    <div id="app">
      {{n}}
    <button @click="add">+1</button>
    </div>
  `,
  methods:{
    add(){
      this.n++
    }
  }
}).$mount('#app')

但是当前methods里面的方法都会在dom重新渲染时执行。

2.3 compomnets 组件

表示使用Vue组件，使用时注意大小写(组件名建议首字母大写，文件名建议小写，为防止不分辨大小写的系统造成失误)

1. 组件的第一种使用方法
   新建一个.vue文件，然后使用import引入

import Demo from './demo.vue'
new Vue({
  components:{    //  在这里声明并且取名字
    Akane:Demo
  },
  data(){
    return  {
      n:0,
      array:[1,2,3,4,5,6]
    }
  },
  template:`
    <div id="app">
      <Akane/>    //  在这里当做HTML使用
    <hr>
    {{arrayFilter()}}
    <button @click="add">+1</button>
    </div>
  `,
  methods:{
    add(){
      this.n++
    },
    arrayFilter(){
      return this.array.filter(n => n % 2 ===0)
    }
  }
}).$mount('#app')

2. 组件的第二种使用方法

Vue.component('Demo2',{    //  在全局声明
   template:`
      <div>demo2</div>   
   `
 })
new Vue({
  data(){
    return  {
      n:0,
      array:[1,2,3,4,5,6]
    }
  },
  template:`
    <div id="app">
      <Demo2/>       // 在这里引用
    <hr>
    {{arrayFilter()}}
    <button @click="add">+1</button>
    </div>
  `,
  methods:{
    add(){
      this.n++
    },
    arrayFilter(){
      return this.array.filter(n => n % 2 ===0)
    }
  }
}).$mount('#app')

3. 第三种方式前两种结合起来

const x = {     // 定义成对象
   template:`
      <div>你好</div>   
   `
 }
new Vue({
  components:{
    Akane:x        // 在这里声明
  },
  data(){
    return  {
      n:0,
      array:[1,2,3,4,5,6]
    }
  },
  template:`
    <div id="app">
      <Akane/>         // 在这里使用
    <hr>
    {{arrayFilter()}}
    <button @click="add">+1</button>
    </div>
  `,
  methods:{
    add(){
      this.n++
    },
    arrayFilter(){
      return this.array.filter(n => n % 2 ===0)
    }
  }
}).$mount('#app')

若命名与组件名相同，可以缩写成components: {Demo},

2.4 四个钩子

1. created -当实例出现在内存中执行指定函数
2. mounted -实例出现在页面中
3. updated - 实例更新了
4. destroyed -实例从页面和内存中消亡了
   实例演示。引入一个Demo组件，显示任意内容，然后创建一个按钮，点击之后显示/隐藏该内容，可以在控制台看到改组件内容产生、出现、更新以及消亡。

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

2.5 props 外部属性

Demo.vue

<template>
  <div class="red">
   {{message}}    //   这里使用属性
  </div>
</template>

<script>
  export default {
    props:['message']     //  这里声明props外部属性，方便外部传值
  }
</script>

<style scoped>
  .red{
    color: red;
  }
</style>

引用组件之后添加别的内容。

new Vue({
  // render: (h) => h(Demo),
  components: { Demo },
  data: {
    visible: true,
    n: 0,
  },
  template: `
    <div>
      <Demo :message="n" :fn="add"/>    // 这里props传值
      {{n}}
    </div>
  `,
  methods: {
    add() {
      this.n += 1
    },
  },
}).$mount("#akane")

<Demo message="n" >默认是将字符串n传值给 message ，加上引号之后<Demo :message="n" >就变为将变量 n 的值传给 message，传函数也是一样<Demo :fn="add" >