43·灵魂前端工程师养成-前端框架Vue构造选项入门属性

DriverZeng

发布于 2022-11-08 17:08:18

4380

发布于 2022-11-08 17:08:18

文章被收录于专栏：Linux云计算及前后端开发Linux云计算及前后端开发

了解Vue

入门属性

-曾老湿, 江湖人称曾老大。

-多年互联网运维工作经验，曾负责过大规模集群架构自动化运维管理工作。 -擅长Web集群架构与自动化运维，曾负责国内某大型金融公司运维工作。 -devops项目经理兼DBA。 -开发过一套自动化运维平台（功能如下）： 1)整合了各个公有云API，自主创建云主机。 2)ELK自动化收集日志功能。 3)Saltstack自动化运维统一配置管理工具。 4)Git、Jenkins自动化代码上线及自动化测试平台。 5)堡垒机，连接Linux、Windows平台及日志审计。 6)SQL执行及审批流程。 7)慢查询日志分析web界面。

了解Vue

const vm = new Vue(options){}

这一句话中，我们先看看，options中都包含了哪些东西。

在官网中，我们能看见Vue的options可以有五类属性，而不是五个属性，类。

每一类属性中都会有很多属性：

数据： - data - props - propsData - computed - methods - watch

DOM - el - template - render - renderError

生命周期钩子 - beforeCreate - created - beforeMount - mounted - beforeUpdate - updated - activated - deactivated - beforeDestroy - destroyed - errorCaptured

资源 - directives - filters - components

组合 - parent - mixins - extends - provide - inject

属性分阶段：

红色属性：好学，必学，几句话就能说明白黄色属性：高级属性，费点劲，需要单独课程讲解蓝色属性：不常用，可学，可不学橙色属性：很不常用，用的时候自己看下文档即可粉色属性：比较特殊，重点讲解一下

入门属性

首先，我们先使用一下Vue的完整版

index.html

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width,initial-scale=1.0">
  <link rel="icon" href="<%= BASE_URL %>favicon.ico">
  <title><%= htmlWebpackPlugin.options.title %></title>
</head>

<body>
  <noscript>
    <strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled.
      Please enable it to continue.</strong>
  </noscript>
  <div id="app"></div>
  <script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.11/vue.min.js"></script>
  <!-- built files will be auto injected -->
</body>

</html>

无需引用全局的Vue，使用window.Vue

main.js

const Vue = window.Vue
Vue.config.productionTip = false;

Vue选项介绍:el

el：挂载点 与$mount有替换关系

// 下面三种方法都阔以
import Demo from "./demo.vue"
new Vue({
  el: "#app",
  render(h) {
    return h(Demo);
  },
});

----
import Demo from "./demo.vue";
new Vue({
  render(h) {
    return h(Demo);
  },
}).$mount("#app");

----
import Demo from "./demo.vue"
const vm = new Vue({
  render(h) {
    return h(Demo);
  },
})
vm.$mount("#app");

Vue选项介绍:data

data：内部数据 支持对象和函数，优先使用函数

// data是一个对象
const vm = new Vue({
    data: {
        n: 0,
    },
    template: `
      <div class="red">
        {{n}}
        <button @click="add">+1</button> 
      </div>
  `,
    methods: {
        add() {
            this.n += 1;
        },
    },
}).$mount("#app");

// data也可以是一个函数
const vm = new Vue({
    data: function() {
        return {
            n: 0,
        };
    },
    template: `
      <div class="red">
        {{n}}
        <button @click="add">+1</button> 
      </div>
  `,
    methods: {
        add() {
            this.n += 1;
        },
    },
}).$mount("#app");

// 函数可以缩写
const vm = new Vue({
    data() {
        return {
            n: 0,
        };
    },
    template: `
      <div class="red">
        {{n}}
        <button @click="add">+1</button> 
      </div>
  `,
    methods: {
        add() {
            this.n += 1;
        },
    },
}).$mount("#app");

记住一句话，Vue的data有bug，后面数据响应式的时候，再给大家介绍

Vue选项介绍:methods

methods：方法 时间处理函数或者是普通函数

// 展示array中的偶数
const vm = new Vue({
    data() {
        return {
            n: 0,
            array: [1, 2, 3, 4, 5, 6, 7, 8, 9],
        };
    },
    template: `
      <div class="red">
        {{n}}
        <button @click="add">+1</button> 
        <hr>
        {{array.filter(i=> i%2 ===0)}}
      </div>
  `,
    methods: {
        add() {
            this.n += 1;
        },
    },
}).$mount("#app");

//使用methods代替filter
const vm = new Vue({
    data() {
        return {
            n: 0,
            array: [1, 2, 3, 4, 5, 6, 7, 8, 9],
        };
    },
    template: `
      <div class="red">
        {{n}}
        <button @click="add">+1</button> 
        <hr>
        {{filter(array)}}
      </div>
  `,
    methods: {
        add() {
            this.n += 1;
        },
        filter(array) {
            return array.filter((i) => i % 2 === 0);
        },
    },
}).$mount("#app")

//使用this代替array
const vm = new Vue({
    data() {
        return {
            n: 0,
            array: [1, 2, 3, 4, 5, 6, 7, 8, 9],
        };
    },
    template: `
      <div class="red">
        {{n}}
        <button @click="add">+1</button> 
        <hr>
        {{filter()}}
      </div>
  `,
    methods: {
        add() {
            this.n += 1;
        },
        filter() {
            return this.array.filter((i) => i % 2 === 0);
        },
    },
}).$mount("#app");

Vue选项介绍:components

components：组件 使用Vue组件，注意大小写

方法一：

main.js

import Demo from "./demo.vue";

const vm = new Vue({
    components: {
        zls: Demo,
    },
    data() {
        return {
            n: 0,
            array: [1, 2, 3, 4, 5, 6, 7, 8, 9],
        };
    },
    template: `
      <div class="red">
        {{n}}
        <button @click="add">+1</button> 
        <zls/>
        <hr>
        {{filter()}}
      </div>
  `,
    methods: {
        add() {
            this.n += 1;
        },
        filter() {
            return this.array.filter((i) => i % 2 === 0);
        },
    },
}).$mount("#app");

demo.vue

<template>
  <div class="red">demo</div>
</template>
<script>
export default {
  data() {
    return {
      n: 0
    };
  },
  methods: {
    add() {
      this.n += 1;
    }
  }
};
</script>
<style scoped>
.red {
  color: red;
}
</style>

方法二：

main.js

import Demo from "./demo.vue";

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

const vm = new Vue({
    data() {
        return {
            n: 0,
            array: [1, 2, 3, 4, 5, 6, 7, 8, 9],
        };
    },
    template: `
      <div class="red">
        {{n}}
        <button @click="add">+1</button> 
        <demo2/>
        <hr>
        {{filter()}}
      </div>
  `,
    methods: {
        add() {
            this.n += 1;
        },
        filter() {
            return this.array.filter((i) => i % 2 === 0);
        },
    },
}).$mount("#app");

方法三：

const vm = new Vue({
    components: {
        zls: {
            template: `
        <div>demo3</div>
      `,
        },
    },
    data() {
        return {
            n: 0,
            array: [1, 2, 3, 4, 5, 6, 7, 8, 9],
        };
    },
    template: `
      <div class="red">
        {{n}}
        <button @click="add">+1</button> 
        <zls/>
        <hr>
        {{filter()}}
      </div>
  `,
    methods: {
        add() {
            this.n += 1;
        },
        filter() {
            return this.array.filter((i) => i % 2 === 0);
        },
    },
}).$mount("#app")

注意：组件要用大写开头

Vue选项介绍:钩子

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

我们来尝试触发生命周期

created

const Vue = window.Vue;
Vue.config.productionTip = false;
new Vue({
    data() {
        return {
            n: 0,
        };
    },
    template: `
      <div class="red">
        {{n}}
        <button @click="add">+1</button> 
      </div>
  `,
    created() {
        console.log("created出现在内存中");
    },
    methods: {
        add() {
            this.n += 1;
        },
    },
}).$mount("#app");

怎么才能知道它有没有出现在页面上呢？加一个debugger

const Vue = window.Vue;
Vue.config.productionTip = false;
new Vue({
    data() {
        return {
            n: 0,
        };
    },
    template: `
      <div class="red">
        {{n}}
        <button @click="add">+1</button> 
      </div>
  `,
    created() {
        debugger;
        console.log("created出现在内存中");
    },
    methods: {
        add() {
            this.n += 1;
        },
    },
}).$mount("#app");

mounted

const Vue = window.Vue;
Vue.config.productionTip = false;
new Vue({
    data() {
        return {
            n: 0,
        };
    },
    template: `
      <div class="red">
        {{n}}
        <button @click="add">+1</button> 
      </div>
  `,
    created() {
        console.log("created出现在内存中");
    },
    mounted() {
        console.log("我已经出现在页面中");
    },
    methods: {
        add() {
            this.n += 1;
        },
    },
}).$mount("#app");

证明方法，同样是打一个debugger

const Vue = window.Vue;
Vue.config.productionTip = false;
new Vue({
    data() {
        return {
            n: 0,
        };
    },
    template: `
      <div class="red">
        {{n}}
        <button @click="add">+1</button> 
      </div>
  `,
    created() {
        console.log("created出现在内存中");
    },
    mounted() {
        debugger;
        console.log("我已经出现在页面中");
    },
    methods: {
        add() {
            this.n += 1;
        },
    },
}).$mount("#app");

updated

const Vue = window.Vue;
Vue.config.productionTip = false;
new Vue({
    data() {
        return {
            n: 0,
        };
    },
    template: `
      <div class="red">
        {{n}}
        <button @click="add">+1</button> 
      </div>
  `,
    created() {
        console.log("created出现在内存中");
    },
    mounted() {
        console.log("我已经出现在页面中");
    },
    updated() {
        console.log("更新了");
    },
    methods: {
        add() {
            this.n += 1;
        },
    },
}).$mount("#app");

当点击+1的时候才会触发 updated

destroyed

我们想要让组件消失，我们只能写一个子组件，创建一个demo2

demo2.vue

<template>
  <div class="red">
    {{n}}
    <button @click="add">+1</button>
  </div>
</template>
<script>
export default {
  data() {
    return {
      n: 0
    };
  },
  created() {
    console.log("created出现在内存中");
  },
  mounted() {
    console.log("我已经出现在页面中");
  },
  updated() {
    console.log("更新了");
  },
  methods: {
    add() {
      this.n += 1;
    }
  }
};
</script>
<style lang="stylus" scoped></style>

main.js

const Vue = window.Vue;
Vue.config.productionTip = false;
import Demo from "./demo2.vue";
new Vue({
    components: { Demo },
    data: {
        visible: true,
    },
    template: `
    <div>
      <button @click="yc">隐藏</button>
      <hr>
      <Demo v-if="visible === true" />
    </div>
    `,
    methods: {
        yc() {
            this.visible = !this.visible;
        },
    },
}).$mount("#app");

点击隐藏就没了，再点击就出现了

然后我们来监听一下，destroyed

demo2vue

<template>
  <div class="red">
    {{n}}
    <button @click="add">+1</button>
  </div>
</template>
<script>
export default {
  data() {
    return {
      n: 0
    };
  },
  created() {
    console.log("created出现在内存中");
  },
  mounted() {
    console.log("我已经出现在页面中");
  },
  updated() {
    console.log("更新了");
  },
  destroyed() {
    console.log("消失了");
  },
  methods: {
    add() {
      this.n += 1;
    }
  }
};
</script>
<style lang="stylus" scoped></style>

Vue选项介绍:props

props：外部属性

首先我们简化一个demo2.vue

<template>
  <div class="red">{{message}}</div>
</template>
<script>
export default {
  props: ["message"]
};
</script>

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

然后通过外部，传递一个message给demo2.vue

const Vue = window.Vue;
Vue.config.productionTip = false;
import Demo from "./demo2.vue";
new Vue({
    components: { Demo },
    data: {
        visible: true,
    },
    template: `
    <div>
      <Demo message="你好 props"/>
    </div>
    `,
    methods: {
        yc() {
            this.visible = !this.visible;
        },
    },
}).$mount("#app");

怎么确定这个是外部传进来的呢？

demo2.vue

<template>
  <div class="red">
    这里是demo2的内部
    {{message}}
  </div>
</template>
<script>
export default {
  props: ["message"]
};
</script>

<style scoped>
.red {
  color: red;
  border: 1px solid red;
}
</style>

main.js

const Vue = window.Vue;
Vue.config.productionTip = false;
import Demo from "./demo2.vue";
new Vue({
    components: { Demo },
    data: {
        visible: true,
    },
    template: `
    <div>
      <Demo message="你好 props"/>
    </div>
    `,
    methods: {
        yc() {
            this.visible = !this.visible;
        },
    },
}).$mount("#app");

props传递变量

main.js

const Vue = window.Vue;
Vue.config.productionTip = false;
import Demo from "./demo2.vue";
new Vue({
    components: { Demo },
    data: {
        visible: true,
        n: 0,
    },
    template: `
    <div>
      <Demo :message="n"/>
    </div>
    `,
    methods: {
        yc() {
            this.visible = !this.visible;
        },
    },
}).$mount("#app");

props传方法

main.js

sconst Vue = window.Vue;
Vue.config.productionTip = false;
import Demo from "./demo2.vue";
new Vue({
    components: { Demo },
    data: {
        visible: true,
        n: 0,
    },
    template: `
    <div>
      {{n}}
      <Demo :fn="add"/>
    </div>
    `,
    methods: {
        add() {
            this.n += 1;
        },
        yc() {
            this.visible = !this.visible;
        },
    },
}).$mount("#app");

demo2.js

<template>
  <div class="red">
    这里是demo2的内部
    {{message}}
    <button @click="fn">call fn</button>
  </div>
</template>
<script>
export default {
  props: ["message", "fn"]
};
</script>

<style scoped>
.red {
  color: red;
  border: 1px solid red;
}
</style>

如果把message回传给fn，页面上的0会更新嘛？

main.js

const Vue = window.Vue;
Vue.config.productionTip = false;
import Demo from "./demo2.vue";
new Vue({
    components: { Demo },
    data: {
        visible: true,
        n: 0,
    },
    template: `
    <div>
      {{n}}
      <Demo :message="n" :fn="add"/>
    </div>
    `,
    methods: {
        add() {
            this.n += 1;
        },
        yc() {
            this.visible = !this.visible;
        },
    },
}).$mount("#app");