Vue基础学习笔记（四）

别活在过去i

已于 2023-11-28 20:56:08 修改

阅读量156

点赞数 1

分类专栏： Vue2基础文章标签： vue.js 前端 javascript

于 2023-11-20 17:02:22 首次发布

本文链接：https://blog.csdn.net/L170311/article/details/134513270

版权

Vue2基础专栏收录该内容

5 篇文章 0 订阅

订阅专栏

38.Vuecomponent和Vue的内置关系

31.生命函数

声明周期：

        1.又名生命周期回调函数，生命周期钩子

        2.是什么：Vue在关键时刻帮我们调用的一些特殊名称的函数

        3.生命周期函数的名字不可更改，但函数的具体内容是程序员更加需求编写的。

        4.生命周期函数中的this指向是vm或组件实例对象

<body>
    <div id="root">
      <h2 v-if="a">hello</h2>
      <h1 :style="{opacity}">{{str}}</h1>
    </div>
    <script>
      const vm = new Vue({
        el: "#root",
        data: {
          str: "我口袋只有玫瑰一片,此行又山高路远",
          opacity: 1,
          a: false,
        },
        // Vue完成模板的解析并把初始的真实DOM元素放入页面后（挂载完毕）调用mounted
        mounted() {
          alert("mounted函数被调用了");
          setInterval(() => {
            vm.opacity -= 0.01;
            if (vm.opacity <= 0) vm.opacity = 1;
          }, 16);
        },
      });
      // 通过外部的定时器实现（不推荐）
      /*  setInterval(()=>{
            vm.opacity-=0.01
            if(vm.opacity<=0) vm.opacity=1
        },16) */
    </script>
  </body>

32.生命周期

VM的生命周期

将要创建====>调用beforeCreate函数

创建完毕====>调用created函数

将要挂载====>调用beforeMount函数

（重要）挂载完毕====>调用mounted函数

将要更新====>调用beforeUpdate函数

更新完毕====>调用updated函数

（重要）将要销毁====>调用beforeDestroy函数

销毁完毕====>调用destroyed函数

<body>
    <div id="root">
      <h1 :style="{opacity}">{{str}}</h1>
      <button @click="stop">点我停止变换</button>
      <button @click="opacity=1">点我透明度变为1</button>
    </div>
    <script>
      const vm = new Vue({
        el: "#root",
        data: {
          str: "学习Vue,积累前端知识",
          opacity: 1,
        },
        mounted() {
          this.timer = setInterval(() => {
            vm.opacity -= 0.01;
            if (vm.opacity <= 0) vm.opacity = 1;
          }, 16);
        },
        methods: {
          stop() {
            this.$destroy();
          },
        },
        beforeDestroy() {
          console.log("vm即将被销毁");
          clearInterval(this.timer);
        },
      });
    </script>
  </body>

常见的生命周期钩子

1.mounted：发送Ajax请求，启动定时器，绑定自定义事件，订阅消息等[初始化操作]

2.beforeDestroy：清除定时器，解绑自定义事件，取消订阅消息等[收尾工作]

关于销毁Vue实例

1.销毁后借助Vue开发中工具看不到任何消息

2.销毁后自定义事件会失效，但原生DOM事件依然有效

3.一般不会在beforeDestroy操作数据，因为即使操作数据，也不会在触发更新流程了

33.组件的理解

34.非单文件组件

Vue中使用组件的三大步骤：

        1.定义组件（创建组件）

        2.注册组件

        3.使用组件（写组件标签）

一、如何定义一个组件？

        使用Vue.extend(options)创建，其中options和New Vue（option）时传入的那个option几乎一样，但也有点区别：

        1.el不要写，为什么？最终所有组件都要经过一个vm的管理，由VM中的el决定服务哪个容器

        2.data必须写出函数，为什么？——————避免组件被复用时，数据存在引用关系

备注：使用template可以配置组件结构

二、如何注册组件

        1.局部注册：靠new Vue的时候传入components选项

        2.全局注册：靠Vue.component('组件名',组件)

三、编写组件标签

        <组件名></组件名>

<body>
    <div id="root">
      <h2>{{msg}}</h2>
      <!--第三步:编写组件标签-->
      <school></school>
      <hr />
      <!--第三步:编写组件标签-->
      <student></student>
    </div>
    <div id="root2">
      <hello></hello>
    </div>
    <script>
      //第一步:创建school组件
      const school = Vue.extend({
        //el:'#root',组件定义时，一定不要写el配置下，因为最终所有的组件都要被一个vm管理，由vm决定服务哪个容器
        template:
          '<div><h2>学校名称:{{schoolName}}</h2><h2>学校地址:{{address}}</h2><button @click="showName">点我提示学校名称</button></div>',
        data() {
          return {
            schoolName: "河北大学",
            address: "保定",
          };
        },
        methods: {
          showName() {
            alert(this.schoolName);
          },
        },
      });
      //第一步:创建student组件
      const student = Vue.extend({
        template:
          " <div><h2>学生姓名：{{studentName}}</h2><h2>学生年龄：{{age}}</h2></div>",
        data() {
          return {
            studentName: "罗源鑫",
            age: 18,
          };
        },
      });
      const vm = new Vue({
        el: "#root",
        data: {
          msg: "hello!",
        },
        //第二步:注册组件（局部组件）
        components: {
          school: school,
          student: student,
        },
      });
      //定义全局组件
      const hello = Vue.extend({
        template: "<div><h2>你好啊！{{name}}</h2></div>",
        data() {
          return {
            name: "打工仔",
          };
        },
      });
      // 第二步:全局注册组件
      Vue.component("hello", hello);
      new Vue({
        el: "#root2",
      });
    </script>
  </body>

35.组件的几个注意点

几个注意点：

        1.关于组件名：

        一个单词组成：

        第一种写法（首字母小写）：school

        第二种写法（首字母大写）：School

多个单词组成：

        第一种写法（kebab-case）:'my-school',要用引号包裹注册

        第二种写法（CamelCase）:MySchool(需要Vue脚手架支持)

备注：

        （1）组件名尽可能回避HTML中已有的元素名称

        （2）可以使用name配置项指定组件在开发中工具中呈现的名字

2.关于组件标签

        第一种写法：

        第二种写法：

        备注：不使用脚手架时，会导致后续组件不能渲染

3.一个简写方式：

const school=Vue.extend(options)看简写为：const school=options

<body>
    <div id="root">
      <h2>{{msg}}</h2>
      <my-school></my-school>
    </div>
    <div id="root2">
      <hello></hello>
    </div>
    <script>
      const school = {
        name: "xuexiao",
        template: `
              <div>
              <h2>学校名称：{{schoolName}}</h2>
              <h2>学校地址：{{address}}</h2>
              <button @click="showName">点我提示学校名</button>
              </div>
              `,
        data() {
          return {
            schoolName: "河北大学",
            address: "保定",
          };
        },
        methods: {
          showName() {
            alert(this.schoolName);
          },
        },
      };
      const vm = new Vue({
        el: "#root",
        data: {
          msg: "hello!",
        },
        components: {
          "my-school": school,
        },
      });
    </script>
  </body>

36.组件的嵌套

 <body>
    <div id="root">
      <app></app>
    </div>
    <script>
      const student = {
        template: `
              <div>
              <h2>{{name}}</h2>
              <h2>{{age}}</h2>
              </div>
              `,
        data() {
          return {
            name: "LYX",
            age: "18",
          };
        },
      };
      const school = {
        name: "xuexiao",
        template: `
                <div>
                <h2>学校名称：{{schoolName}}</h2>
                <h2>学校地址：{{address}}</h2>
                <button @click="showName">点我提示学校名</button>
                <student></student>
                </div>
                `,
        data() {
          return {
            schoolName: "河北大学",
            address: "保定",
          };
        },
        methods: {
          showName() {
            alert(this.schoolName);
          },
        },
        components: {
          student,
        },
      };
      const hello = Vue.extend({
        template: `
            <h1>{{msg}}</h1>
        `,
        data() {
          return {
            msg: "积累前端知识,争做前端高手",
          };
        },
      });
      const app = Vue.extend({
        template: `
        <div>
        <hello></hello>
        <school></school>
        </div>
        `,
        components: {
          school: school,
          hello,
        },
      });
      const vm = new Vue({
        el: "#root",
        data: {
          msg: "hello!",
        },
        components: {
          app,
        },
      });
    </script>
  </body> <body>
    <div id="root">
      <app></app>
    </div>
    <script>
      const student = {
        template: `
              <div>
              <h2>{{name}}</h2>
              <h2>{{age}}</h2>
              </div>
              `,
        data() {
          return {
            name: "LYX",
            age: "18",
          };
        },
      };
      const school = {
        name: "xuexiao",
        template: `
                <div>
                <h2>学校名称：{{schoolName}}</h2>
                <h2>学校地址：{{address}}</h2>
                <button @click="showName">点我提示学校名</button>
                <student></student>
                </div>
                `,
        data() {
          return {
            schoolName: "河北大学",
            address: "保定",
          };
        },
        methods: {
          showName() {
            alert(this.schoolName);
          },
        },
        components: {
          student,
        },
      };
      const hello = Vue.extend({
        template: `
            <h1>{{msg}}</h1>
        `,
        data() {
          return {
            msg: "积累前端知识,争做前端高手",
          };
        },
      });
      const app = Vue.extend({
        template: `
        <div>
        <hello></hello>
        <school></school>
        </div>
        `,
        components: {
          school: school,
          hello,
        },
      });
      const vm = new Vue({
        el: "#root",
        data: {
          msg: "hello!",
        },
        components: {
          app,
        },
      });
    </script>
  </body>

37.Vuecomponent

关于VueComponent

        1.school组件本质是应该名为Vuecomponent的构造函数，且不是程序员定义的，是Vue。extend生成的

        2.我们只需要写或，Vue解析时会帮我们创建school组件的实例对象，即Vue帮我们执行的：new VueComponent(options)

        3.特别注意：每次调用Vue.extend,返回的都是一个全新的Vuecomponent

        4.关于this指向：

        （1）组件配置中：

                data函数，methods中的函数,watch中的函数,computed中的函数，它们的this均是[VueComponent实例对象]

        （2）new Vue(options)配置中：

data函数，methods中的函数,watch中的函数,computed中的函数，它们的this均是[Vue实例对象]

        5.VueComponent的实例对象，以后简称VC（也可以简称为：组件实例对象）

38.Vuecomponent和Vue的内置关系

1.一个重要的内置关系：VueComponent.prototype.__proto===Vue.prototype

2.为什么要有这个关系：让组件实例对象（vc）可以访问到Vue原型上的属性和方法

39.单文件组件

单文件组件要配合vue脚手架使用

main.js文件：

import Vue from 'vue'
import App from '/.app.vue'

Vue.config.productionTip = false

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

#.vue文件,这个是app.vue

<template>
  <div>
    <img src="" alt="logo" />
    <school></school>
    <student></student>
  </div>
</template>

<script>
//引入组件
import school from "./components/school.vue";
import student from "./components/student";
export default {
  name: "app",
  components: {
    school,
    student,
  },
};
</script>

<style></style>

#school.vue文件

<template>
  <!--组件的结构-->
  <div class="demo">
    <h2>学校名称:{{ SchoolName }}</h2>
    <h2>学校地址:{{ address }}</h2>
    <button @click="showName">点我提示学校名</button>
  </div>
</template>
<script>
//组件交互相关的代码(数据，方法等)
export default {
  data() {
    return {
      SchoolName: "河北大学",
      address: "保定",
    };
  },
  methods: {
    showName() {
      alert(this.SchoolName);
    },
  },
};
</script>
<style></style>

#student.vue文件

<template>
  <!--组建的结构-->
  <div class="demo">
    <h2>学生姓名:{{ name }}</h2>
    <h2>学生年龄:{{ age }}</h2>
  </div>
</template>

<script>
//组件交互相关的代码（数据，方法等）
export default {
  data() {
    return {
      name: "LYX",
      age: 18,
    };
  },
};
</script>

<style></style>

在vue脚手架文件夹命令行输入npm run serve,运行编译，得到本地服务器地址和局域网地址

40.render函数

关于不同版本的Vue：

1.vue.js与vue.runtime.xxx.js的区别

(1)vue.js是完整版的Vue，包含：核心功能+模板解析器

（2）vue.runtime.xxx.js是运行版的Vue，只包含：核心功能，没有模板解析器

2.因为vue.runtime.xxx.js没有模板解析器，所以不能使用template配置项，需要使用render函数接收到的createElement函数去指定具体函数

上一篇：Vue基础学习笔记（三）-CSDN博客

下一篇：Vue学习笔记（五）-CSDN博客

持续更新~~~

别活在过去i

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
1
评论
Vue基础学习笔记（四）

data函数，methods中的函数,watch中的函数,computed中的函数，它们的this均是[VueComponent实例对象]2.我们只需要写或，Vue解析时会帮我们创建school组件的实例对象，即Vue帮我们执行的：new VueComponent(options)data函数，methods中的函数,watch中的函数,computed中的函数，它们的this均是[Vue实例对象]（2）vue.runtime.xxx.js是运行版的Vue，只包含：核心功能，没有模板解析器。
复制链接

扫一扫

专栏目录