Vue: 构造选项

Tech
Vue全解

创建 Vue 实例

const vm = new Vue(options);

内存图

把Vue的实例命名为vm是尤雨溪的习惯，我们应该沿用

  • vm对象封装了对视图的所有操作，包括数据读写、事件绑定、DOM更新
  • vm的构造函数是Vue，按照ES6的说法，vm所属的类是Vue
  • options是new Vue的参数，一般称之为选项或构造选项

构造选项(构造函数后面的选项)

图中一共有五个问号，我们一个一个地来了解

图中的 5 个问号

  1. 我们在初始化的时候，到底能写些什么对象进去？

options的参数有哪些？

  1. 这个vm对象有哪些属性？
  2. Vue函数本身有哪些属性？
  3. Vue.prototype有哪些属性？

函数的原型有哪些属性？

  1. Vue.prototype后面还有没有什么prototype?

函数的原型还有没有原型？

可能还需要几篇博客来回答这五个问题，一旦把这五个问题回答清楚了，Vue就全部懂了

options 的五类属性

数据

选项 / 数据 - Vue.js

  • data、props、propsData、computed、methods、watch

DOM

选项 / DOM - Vue.js

  • el、template、render、renderError

生命周期钩子

选项 / 生命周期钩子 - Vue.js

  • beforeCreate、created
  • beforeMount、mounted
  • beforeUpdate、updated
  • activated、deactivated
  • beforeDestroy、destroyed
  • errorCaptured

资源

选项 / 资源 - Vue.js

  • directives、filters、components

组合

选项 / 组合 - Vue.js

  • parent、mixins、extends、provide、inject

其他

选项 / 其它 - Vue.js

先不说

入门属性

el - 挂载点

与$mount有替换关系

new Vue({
  el: "#app",
  render: (h) => h(Demo),
});

等价于

new Vue({
  render: (h) => h(Demo),
}).$mount("#app");

data - 内部数据

支持对象和函数，优先用函数

new Vue({
  data: {
    n: 0,
  },
}).$mount("#app");

new Vue({
  data: function() {
    return {
      n: 0,
    };
  },
}).$mount("#app");

new Vue({
  data() {
    return {
      n: 0,
    };
  },
}).$mount("#app");

data在组件里必须用function

methods - 方法

事件处理函数

main.js

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

或者普通函数

main.js

new Vue({
  data() {
    return {
      array: [1, 2, 3, 4, 5, 6, 7, 8],
    };
  },
  template: `
        <div id="app">
            <!—                {{filter(array)}}—>
            {{filter()}}
        </div>
    `,
  methods: {
    // filter(array) {
    //     return array.filter(i => i % 2 === 0)
    // }
    filter() {
      return this.array.filter((i) => i % 2 === 0);
    },
  },
}).$mount("#base");

components

Vue组件，用大写开头

三种引入方式，推荐第一种

main.js

import Demo from "./Demo.vue";

const vm = new Vue({
  components: { Demo }, // components: {Demo: Demo}
  template: `
        <div id="app">
            <Demo/>
        </div>
    `,
}).$mount("#base");

main.js

const Vue = window.Vue;

Vue.component("Demo2", {
  template: `
        <div>demo2</div> 
    `,
});

const vm = new Vue({
  template: `
        <div id="app">
            <Demo2/>
        </div>
    `,
}).$mount("#base");

main.js

const vm = new Vue({
  components: {
    Demo3: {
      template: `
                <div>demo3</div> 
            `,
    },
  },
  template: `
        <div id="app">
            <Demo3/>
        </div>
    `,
}).$mount("#base");

四个钩子

  • created - 实例出现在内存中
  • mounted - 实例出现在页面中
  • updated - 实例更新了
  • destroyed - 实例从页面和内存中消亡了
  • 来个例子:

Demo.vue

<template>
    <div class="red">
        {{n}}
        <button @click="add">+1</button>
    </div>
</template>
<script>
    export default {
        data() {
            return {
                n: 0
            }
        },
        created() {
            console.log('这玩意出现在内存中,没有出现在页面中')
        },
        mounted() {
            console.log('这玩意出现在页面中')
        },
        updated() {
            console.log('更新啦')
            console.log(this.n)
        },
        destroyed() {
            console.log('已经消亡了')
        },
        methods: {
            add() {
                this.n += 1
            }
        }
    }
</script>
<style></style>

main.js

import Demo from "./Demo.vue";

const Vue = window.Vue;
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("#base");

props - 外部属性

  • message="n"传入字符串
  • :message="n"传入this.n数据
  • :fn="add"传入this.add函数
  • 来个例子: Demo.vue
<template>
    <div class="red”>
        这里是Demo的内部
        <!—        {{this.message}}—>
        {{message}}
        <button @click="fn">call fn</button>
    </div>
</template>
<script>
    export default {
        // 从外部接受一个message，这个message会自动绑到this上
        props: ['message', 'fn']
    }
</script>
<style scoped>
    .red {
        color: red;
        border: 1px solid red;
    }
</style>

main.js

import Demo from "./Demo.vue";

const Vue = window.Vue;
new Vue({
  components: { Demo },
  data: {
    n: 0,
  },
  template: `
        <div>
            <!--            字符串 '你好2'-->
            <Demo message="你好2"></Demo>

            <!--            注意冒号':',说明后面是JS代码-->
            <!--            字符串 '你好2'-->
            <Demo :message="'你好2'"></Demo>
            <Demo :message="'n'"></Demo>

            <!--            还可以传函数-->
            {{n}}
            <Demo :message="n" :fn="add"></Demo>
        </div>
    `,
  methods: {
    add() {
      this.n += 1;
    },
  },
}).$mount("#base");
comments powered by Disqus