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.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. 等等

这里面有些常用有些不常用，常用的着重记就好

3.options中的 el 与 data属性用法

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

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

也可以写成：

new Vue({
  render:h => h(demo)
}).$mount('#app')   

data属性：表示当前Vue实例的内部数据

支持对象和函数写法，优先使用函数写法

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

为什么要优先使用函数?

为了防止相同的组件引用同一个内部数据

methods属性

里面是事件处理函数或者是普通函数

new Vue({
  data(){
    return  {n:0}  //  内部数据
  },
  template:`
    <div id="app">
    {{n}}
    <button @click="add">+1</button>
    </div>
  `,
  methods:{     //  方法一定写在里面  否则就会报错说add()没有定义
    add(){
      this.n++
    }
  }
}).$mount('#app')

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

4.compomnets 组件

表示使用Vue组件，使用时注意大小写(建议首字母大写)

1. 组件的第一种使用方法

新建一个.vue文件，然后使用import引入

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

优先使用第一种方式，模块化使用

5.常用的生命周期函数

1. created 当实例出现在内存中执行指定函数
2. mounted -实例出现在页面中
3. updated - 实例更新了
4. destroyed -实例从页面和内存中消亡了

6.props 外部属性

demo.vue

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

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

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

引用组件

import Demo from './demo.vue'
new Vue({
  components:{Demo},
  template:`
    <div>
     <Demo message="欧阳"/>    // 这里props传值
    </div>
  `,
  methods:{
    des(){
      this.visible = !this.visible
    }
  },
  data:{
    visible:true
  }
}).$mount('#app')

message里面传值默认是字符串

<Demo message="欧阳"/>    // 这里props传值

如果要传变量

<Demo ：message="欧阳"/>    // 加上： 则引号里面就是JS代码

也可以传递方法

<div id="app" @click="message">
    点我
  </div>

new Vue({
  components:{Demo},
  template:`
    <div>
     <Demo :message="fn"/>
    </div>
  `,
  methods:{
    des(){
      this.visible = !this.visible
    },
    fn(){
      console.log('调用了fn')
    }
  },
  data:{
    visible:true
  }
}).$mount('#app')