Vue构造选项

Vue实例

new Vue (options)就是构造一个Vue的实例

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

本文将研究第一个问号 即构造选项options

options里面有什么

Vue2文档

截屏2022-08-20 09.34.47.png

第一类属性：数据

data 数据
props 属性
computed 计算属性 //被计算出来的
methods 方法，用来定义方法的
watch 观察 //当data变化时做某些事情就用watch
propsData //很少用,单元测试会用

第二类属性：DOM

el 挂载点 //你要用你的模版替换页面上的哪一块，你的挂载点
template //你的HTML内容。着重讲语法v-if、v-for
render 渲染 //⚠️注意template和render只能二选一！
//template是给完整版用的，render是给非完整版用的。一起用必然有一个会失效！

生命周期钩子

生命周期：在vue的创建，挂载，使用，销毁过程中，会有许多事件，这些事件就被统称为生命周期函数，也叫作生命周期钩子。

beforeCreate 创建之前
created 创建之后
beforeMount
mounted 挂载之后
beforeUpdate
updated 更新之后
activated
deactivated
beforeDestroy
destroyed 失败之后
errorCaptured

lifecycle.png

第四类属性：资源

directives 指令
filters 过滤器 //尽量不去用，用methods代替
components 组件
//如果要在一个文件引用另一个Vue的文件就用组建。Demo.vue就叫组件,英文名叫components。

第五类属性：组合

parent
mixins 混入
extends 扩展
provide 提供
inject 注入

入门属性

el —挂载点 与$mount有替代关系

new Vue({
    el: '#app',//挂载在app这个元素上
    render: h => h(Demo)
})

等价于

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

data —外部数据 支持对象和函数 优先使用函数

假设如果有两个组件共用内部数据data，当其中一个改变时另一个也会变，因为它们引用的是同一个data。函数会阻止两个组件共用data的问题。

methods — 事件处理函数或者普通函数

事件处理函数: 写到一个@click或keypress或者任何事件作为它的处理函数

//HTML里有个button
<button @click="add">+1</button><!--写在页面里的视图-->
------------
methods: {
   add() {
       this.n += 1
   }
}

methods代替 filter

const vm = new Vue({
    data() {
        return {
            array: [1, 2, 3, 4, 5, 6, 7, 8]
        }
    },
    template: `
      <div>
      {{ filter(array) }}<!--求数组的偶数-->
      </div>
    `,
    methods: {
        filter(array) {
            return array.filter(i => i % 2 === 0)
        }
    }
})

或者：

const vm = new Vue({
    data() {
        return {
            array: [1, 2, 3, 4, 5, 6, 7, 8]
        }
    },
    template: `
      <div>
      {{ filter() }}<!--求数组的偶数-->
      </div>
    `,
    methods: {
        filter() {
            return this.array.filter(i => i % 2 === 0)
        }
    }
})

components —组件

方法一：

import Demo from './Demo.vue'
//引入组件

const vm = new Vue({
    components:{
        Origami : Demo // 取一个名字 后面是组件
    },

    template: `
      <div>
      <Origami/> //在模版中加入这个组件
      </div>
    `,
}

方法二：

Vue.component('Demo2', {
    template:`
    <div>demo2</div>   
    `
})
const vm = new Vue({
    template: `
      <div>
      <Demo2/> //在模版中加入这个组件
      </div>
    `,
}

四个钩子

1.created 实例出现在内存中
2.mounted 实例出现在页面中
3.updated 实例更新了
4.destroyed 实例消亡了

const vm = new Vue({
  data() {
    return {
      n: 0
    }
  },
    template:`
<div class="red">
  {{ n }}
  <button @click="add">+1</button><!--写在页面里的视图-->
</div>
    `
  created() {
    console.log('出现在内存中，没有出现在页面中')
  },
  mounted() {
    console.log('我已出现在页面中')
  },
  updated() {
    console.log('更新了')
    console.log(this.n)
  },

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

destroyed需要格外注意：

要在外部引入一个组件：

import Demo2 from './Demo2.vue'

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

写出实例消失在页面的办法

在被引入的组件中补充destroyed

  destroyed() {
console.log('从页面中消失了')
  },

props --外部属性