Vue学习6

最新推荐文章于 2024-05-11 06:38:03 发布

aneyal

最新推荐文章于 2024-05-11 06:38:03 发布

阅读量183

点赞数 1

分类专栏：前端学习文章标签： javascript 学习前端 vue

本文链接：https://blog.csdn.net/aneyal/article/details/124230457

版权

前端学习专栏收录该内容

47 篇文章 2 订阅

订阅专栏

生命周期

生命周期又名生命周期回调函数、生命周期函数、生命周期钩子。

是Vue在关键时刻帮我们调用的一些特殊名称的函数。

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

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

生命周期过程图解

请添加图片描述

常用的生命周期方法：

mounted(): 发送ajax请求, 启动定时器、绑定自定义事件、订阅消息等异步任务【初始化操作】

beforeDestroy(): 做收尾工作, 如: 清除定时器、解绑自定义事件、取消订阅消息等【收尾工作】

关于销毁Vue实例：

销毁后借助Vue开发者工具看不到任何信息，销毁后自定义事件会失效，但原生DOM事件依然有效

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

组件

组件就是实现应用中局部功能的代码和资源的集合

其作用是复用编码，简化项目编码，提高运行效率

组件化：当应用中的功能都是以多组件的方式来编写的时，这个应用就是个组件化应用

组件有两种实现方式：非单文件组件和单文件组件

非单文件组件

一个文件中包含多个组件

<!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">
    <title>Document</title>
    <script src="../js/vue.js"></script>
</head>
<body>
    <!-- 分为两个组件：school和student -->
    <div class="root">
        <!-- 使用组件 -->
        <school></school>
        <hr>
        <student></student>
    </div>
    <script>
        Vue.config.productionTip=false;
        // 创建组件使用Vue.extend
        // 参数是一个配置对象，几乎和创建vm的配置对象一样
        const school=Vue.extend({
            // 配置对象中没有el配置项，因为最终所有组件都要被一个vm管理，由vm决定服务于哪个容器
            // data要使用函数式
            data:function(){
                return {
                    schoolName:'SCU',
                    Saddress:'SiChuan',
                }
            },
            // template中写组件的结构，要包含在一个div标签中
            template:`
            <div>
                <h2>学校名称:{{schoolName}}</h2>
                <h2>学校地址:{{Saddress}}</h2>
            </div>
            `
        })
        const student=Vue.extend({
            data:function(){
                return {
                    studentName:'lili',
                    Sage:19
                }
            },
            template:`
            <div>
                <h2>学生名称:{{studentName}}</h2>
                <h2>学生年龄:{{Sage}}</h2>
            </div>
            `
        })
       
        // 全局注册组件（所有vm都能使用这个组件了）
        // Vue.component('school',school)
        
        new Vue({
            el:'.root',
            // 注册组件(局部注册)
            // 组件使用components使用
            components:{
                school:school,
                student:student
            }
        })
    </script>
</body>
</html>

三大步骤：定义组件、注册组件、使用组件

定义组件：使用Vue.extend(options)创建，其中options和new Vue（options)时传入的那个options几乎一样，但有以下区别：

不要写el——最终所有的组件都要经过一个vm的管理，由vm中的el决定服务哪个容器

data必须写成函数——避免组件被复用时，数据存在引用关系

注意，使用tempalte可以配置组件结构

注册组件：局部注册：new Vue的时候传入components选项；全局注册：Vue.component(‘组件名’, 组件)

使用组件：模版中使用<组件名></组件名>

注意

组件名由一个单词组成时：
第一种写法（首字母小写）：school
第二种写法（首字母大写）：School

组件名由多个单词组成时：
第一种写法（kebab-case命名）：my-school
第二种写法（CamelCase命名）：MySchool（需要Vue脚手架支持）

并且：组件名尽可能回避HTML中已有的元素名称，例如h2、H2，可以使用name配置项指定组件在开发者工具中呈现的名字

使用组件标签时，可以简写为<组件名/>，但要注意，这需要Vue脚手架，否则可能导致后续组件不能渲染

定义组件时，可以简写为 const 变量名=配置对象

组件的嵌套

顾名思义，就是在一个组件中嵌套了其他组件

使用方法就是在父组件中注册子组件，并且使用时，子组件的组件标签要写在父组件的template中

VueComponent

组件本质是一个名为VueComponent的构造函数，且不是程序员定义的，是Vue.extend生成的

我们只需要写<app/>或<app></app>，Vue解析时会帮我们创建app组件的实例对象，即Vue帮我们执行new VueComponent(options)

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

关于this指向：
组件配置中：data函数、methods中的函数、watch中的函数、computed中的函数它们的this均是【VueComponent实例对象】
new Vue(options)配置中：data函数、methods中的函数、watch中的函数、computed中的函数它们的this均是【Vue实例对象】

VueComponent的实例对象，以后简称vc（也可称之为：组件实例对象）

Vue的实例对象，以后简称为vm

注意：

VueComponent.prototype.__proto__ === Vue.prototype，这使得VC可以访问到vm上的属性和方法

单文件组件

一个文件中只包含一个组件，文件以vue作为后缀

接下来以一个例子说明：

组件文件

School.vue

<template>
  <!-- 组件的结构 -->
  <div class="root">
      <h2>学校名称:{{schoolName}}</h2>
      <h2>学校地址:{{Saddress}}</h2>
  </div>
</template>

<script>
const school=Vue.extend({
    // 组件名
    name:'School',
    data:function(){
        return {
            schoolName:'SCU',
            Saddress:'SiChuan',
        }
    },
    })
// 暴露
export default school
</script>

<style>
/* 组件的样式 */
.root{
    background-color: pink;
}

</style>

Student.vue

<template>
  <!-- 组件的结构 -->
  <div class="root">
      <h2>学生名称:{{studentName}}</h2>
      <h2>学生年龄:{{Sage}}</h2>
  </div>
</template>

<script>
const student=Vue.extend({
    // 组件名
    name:'Student',
    data:function(){
        return {
            studentName:'lili',
            Sage:15,
        }
    },
    })
// 暴露
export default student
</script>

<style>
/* 组件的样式 */
/* 没有可以不写 */
.root{
    background-color: rgb(192, 212, 255);
}

</style>

App.vue（用于汇总组件）

<template>
  <div>
      <School></School>
      <Student></Student>
  </div>
</template>

<script>
//  app.vue负责汇总所有组件
import School from './School.vue'
import Student from './Student.vue'
export default {
    name:'App',
    components:{
        School,
        Student
    },   
}
</script>

<style>

</style>

js文件

import App from './App.vue'

new Vue({
    el:'.root',
    components:{App},
    template:`
    <App></App>
    `
})

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">
    <title>Document</title>
    <script src="../js/vue.js"></script>
</head>
<body>
    <!-- 准备一个容器 -->
    <div class=".root">
    </div>
    <script src="./main.js"></script>
</body>
</html>