Vue组件原理知识（1）

news2024/11/15 15:58:36

Vue 组件知识整理（1）

文章目录

  • Vue 组件知识整理（1）
    • 一、组件介绍
      • 1.1 传统方式与组件方式编写应用对比
    • 二、组件使用
      • 2.1 非单文件组件的使用
        • **1. 组件的创建**
        • **2. 组件的注册**
        • **3. 组件的使用**
        • **4. Vue中使用组件的三大步骤总结**
        • **5. 组件使用的注意事项**
        • **6. 组件的嵌套**
        • **7. VueComponent**
        • **8. Vue 与 VueComponent 的关系**

一、组件介绍

1.1 传统方式与组件方式编写应用对比

传统方式编写应用
组件方式编写应用

  组件的定义：实现应用中局部功能代码和资源的集合

  • 代码包含：html、css、js 代码。

  • 资源包含：各种图片、视频、音频、字体等资源文件。

二、组件使用

2.1 非单文件组件的使用

  非单文件组件：一个文件中包含有多个组件。（ 一个a.html 文件中包含了多个组件）

  用下图练习使用组件的过程：

练习组件样例

  常规实现代码：

<head>
    <meta charset="UTF-8">
    <title>基本使用</title>
    <script type="text/javascript" src="../js/vue.js"></script>
</head>
<body>
    <div id="root">
        <h2>学校名称：{{ schoolName }}</h2>
        <h2>学校地址：{{ address }}</h2>
        <hr>
        <h2>学生名称：{{ studentName }}</h2>
        <h2>学生年龄：{{ age }}</h2>
    </div>
    <script type="text/javascript">
        Vue.config.productionTip = false
        // 创建 Vue 实例对象 vm
        new Vue({
            el:"#root",
            data:{
                schoolName:"杭州电子科技大学",
                address:"浙江杭州",
                studentName:"张三",
                age:22
            }
        })
    </script> 
</body>

  根据页面结构，我们可以把学校的信息展示当做一个 school 组件，学生的信息当做另一个 student 组件来制作上图效果。

  • 1. 组件的创建

  组件的创建与 Vue 实例对象 vm 的方式:

// 创建 school 组件
const school = Vue.extent({/* 配置对象 */})
// 创建 Vue 实例对象 vm
const vm = new Vue({/* 配置对象 */})

  创建组件传入参数的配置对象和创建 Vue 实例对象 vm 传入参数的配置对象几乎一致。当我们把创建 Vue 实例对象 vm 传入的配置项直接复制到创建 school 组件的传入参数时，控制台会报两个错误：

const school = Vue.extent({
    el:"#root",	// 组件定义时，一定不要写el配置项，因为最终所有的组件都要被一个Vue实例对象vm管理，由vm决定服务于哪个容器。
    data:{
        schoolName:"杭州电子科技大学",
        address:"浙江杭州",
        studentName:"张三",
        age:22
    }
})
组件创建与Vue实例创建的区别

  1. el 配置项只能在 new Vue() 的配置对象中使用。el 是配置当前实例为哪个容器（div）服务的，当我们创建组件时，并不能确定该组件以后会用在什么地方，所以组件的创建不要写 el 配置项。

  2. data配置项应该要写成一个函数，函数中返回数据对象。因为组件是会在多处使用的，通过函数返回组件数据对象的方式做到了不同地方引用的组件数据是相互独立的，操作互不影响。

  正确的创建 school 和 student 组件，将组件中的结构 template 配置项也加入，template 配置项中只能有一个根元素。

const school = Vue.extend({
    template:`
        <div>
            <h2>学校名称：{{ schoolName }}</h2>
            <h2>学校地址：{{ address }}</h2>  
        </div>
    `,
    data() {
        return {
            schoolName: "杭州电子科技大学",
            address: "浙江杭州",
        }
    }
})
const student = Vue.extend({
    template:`
        <div>
            <h2>学生名称：{{ studentName }}</h2>
            <h2>学生年龄：{{ age }}</h2>
        </div>
    `,
    data() {
        return {
            studentName: "张三",
            age: 22
        }
    }
})

  • 2. 组件的注册

局部注册：在一个 Vue 实例对象中注册组件，注册的组件只能提供给当前的 Vue 实例对象使用。

new Vue({
    el:'#root',
    // 组件注册配置项（局部注册）
    components:{
    	xuexiao:school,
        xuesheng:student
    }
})

  组件的注册可以在Vue 实例对象中通过 components 配置项去注册，配置项中用 {使用时的组件名：创建时的组件名, ...} 对象去注册组件。上例中把创建的 school 组件注册名为 xuexiao 的使用时组件名。

  注意📢：一般注册的组件使用名和组件的创建名保持一致，且可以简写:

new Vue({
    el:'#root',
    // 组件注册配置项（局部注册）
    components:{
    	school:school,
        student			// 简写
    }
})

全局注册：在 Vue 的 component 属性上全局注册组件，注册的组件在所有的 Vue 实例对象上都可以使用 。

// Vue.component('使用时的组件名',创建时的组件名)
Vue.component('student',student)

  • 3. 组件的使用

<body>
    <div id="root">
        <!-- 3.使用组件标签 -->
        <school></school>
        <hr>
        <student></student>
    </div>
    <script type="text/javascript">
        Vue.config.productionTip = false
        // 1.创建 school 组件
        const school = Vue.extend({
            template:`
                <div>
                    <h2>学校名称：{{ schoolName }}</h2>
                    <h2>学校地址：{{ address }}</h2>  
                </div>
            `,
            data() {
                return {
                    schoolName: "杭州电子科技大学",
                    address: "浙江杭州",
                }
            }
        })
        // 1.创建 student 组件
        const student = Vue.extend({
            template:`
                <div>
                    <h2>学生名称：{{ studentName }}</h2>
                    <h2>学生年龄：{{ age }}</h2>
                </div>
            `,
            data() {
                return {
                    studentName: "张三",
                    age: 22
                }
            }
        })
        // 创建 Vue 实例对象 vm
        new Vue({
            el:"#root",
            // 2.注册组件
            components:{
                school,
                student
            }
        })
    </script>
</body>

  • 4. Vue中使用组件的三大步骤总结

一、定义组件（创建组件）

  使用 Vue.extend(options)创建，其中 options 和 new Vue(options)时传入的那个 options几乎一样，两点区别如下：

  1. el 配置项不要写。------最终所有的组件都要经过一个vm的管理，由vm中的el决定服务哪个容器。

  2. data 配置项必须写成函数。------ 避免组件被复用时，组件数据存在引用关系。

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

二、如何注册组件

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

  2. 全局注册：靠 Vue.component(‘使用组件名’, 创建组件名) 注册。

三、使用组件标签：

  <school></school>

  • 5. 组件使用的注意事项

组件使用名的命名规范

  1. 组件使用名由一个单词组成的

      可以小写 school 或首字母大写 School ，因为 Vue 开发者工具里都会把组件名转成大写显示。所以很多开发人员习惯将一个单词的组件名写成首字母大写的形式，与开发工具显示对应，同时也与传统 HTML 标签做区分。

  2. 组件使用名由多个单词组成的

      可以全小写 my-school ，中间用 ’ - ’ 连接。但局部注册组件是要写成 components{“my-school”:school} ,此时 Vue 的开发者工具里展示的是MySchool。

      可以每个单词首字母大写MySchool。使用时也是<MySchool></MySchool>，这种情况需要Vue脚手架支持，非脚手架环境里会出错，如下图：

组件创建与Vue实例创建的区别

备注：

  （1）组件使用名尽可能回避 HTML 中已有的元素名称，例如：h2、H2（h2会直接报错，H2会直接无效变成普通的h2标签）

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

组件的使用方式

  （1）开始结束标签形式<school></school>

  （2）自闭合标签形式<school/> 在非脚手架环境下会导致后续组件无法渲染。

创建组件的简写方式

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

  • 6. 组件的嵌套

  组件的使用往往会出现嵌套关系，被嵌套的子组件需要注册到父组件中，使用也是在父组件的template配置项中使用。

  一般开发都会有一个管理的 app 组件，管理其他所有实现功能的子组件，app 组件被唯一的 Vue 实例对象 vm 管理。

  • 7. VueComponent

<body>
    <div id="root"></div>
    <script type="text/javascript">
        // 创建组件
        const student = Vue.extend({
            template:`
                <div>
                    <h2>学生姓名：{{ name }}</h2>
                    <h2>学生年龄：{{ age }}</h2>
                </div>
            `,
            data(){
                return{
                    name:"张三",
                    age:18
                }
            }
        })
        // 打印组件
        console.log(student);
        // 创建 Vue 实例对象 vm
        new Vue({
            el:"#root",
            template:`<student></student>`,
            components:{
                student
            }
        })
    </script>
</body>
组件的类型

  VueComponent 是组件的构造函数。理论上构造函数的使用是 new VueComponent(options) 的形式。我们在使用组件时<school></school> vue 自动帮我们调用了 school 组件的构造函数 VueComponent()。

  注意📢：所有定义组件都是返回一个全新的 VueComponent() 构造函数，在使用组件的时候都是调用对应的构造函数，只是名称一样而已。如下两个组件做验证：

<body>
    <div id="root"></div>
    <script type="text/javascript">
        Vue.config.productionTip = false
        // 创建student组件
        const student = Vue.extend({
            template:`
                <div>
                    <h2>学生姓名：{{ name }}</h2>
                    <h2>学生年龄：{{ age }}</h2>
                </div>
            `,
            data(){
                return{
                    name:"张三",
                    age:18
                }
            }
        })
        // 创建school组件
        const school = Vue.extend({
            template:`
                <div>
                    <h2>学校名称：{{ name }}</h2>
                    <h2>学校地址：{{ address }}</h2>
                </div>
            `,
            data(){
                return{
                    name:"杭州电子科技大学",
                    address:"浙江杭州"
                }
            }
        })
        // 打印学生组件
        console.log("学生组件:",student);
        // 打印学校组件
        console.log("学校组件:",school);
        // 确认这两个组件是否相等
        console.log("student===school??:",student === school);
        // 创建 Vue 实例对象 vm
        new Vue({
            el:"#root",
            template:`
            <div>
                <student></student>
                <school></school>
            </div>
            `,
            components:{
                student,
                school
            }
        })
    </script>
</body>
VueComponent构造函数

  我们可以在vue 源码中找到这个构造函数：

VueComponent构造函数源码

关于 VueComponent 知识汇总：

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

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

3、每次调用 Vue.extend，返回的都是一个全新的VueComponent。

4、关于 this 指向：

（1）组件配置中：data 函数、methods 中的函数、watch 中的函数、computed 中的函数，他们的 this 均是【VueComponent实例对象】。

（2）new Vue() 配置中：data 函数、methods 中的函数、watch 中的函数、computed 中的函数，他们的 this 均是【Vue 实例对象】

5、VueComponent 的实例对象，可成为组件实例对象（vc）; Vue 的实例对象（vm）。

8. Vue 与 VueComponent 的关系

  所有对象上都有 _proto_ 属性，指向缔造它的构造函数的原型对象。

  所有的构造函数上都有 prototype 属性，指向自己的原型对象。

  Vue 做了个重要的操作：将 VueComponent 构造函数的原型对象的原型对象指向了 Vue 构造函数的原型对象。这样做可以让组件实例对象（vc）可以访问到 Vue 原型上的属性、方法。

Vue 与 VueComponent 的关系

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.coloradmin.cn/o/399873.html

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈，一经查实，立即删除！

相关文章

C++基础了解-20-C++类 对象

C++基础了解-20-C++类 对象

C 类 & 对象 一、C 类 & 对象 C 在 C 语言的基础上增加了面向对象编程&#xff0c;C 支持面向对象程序设计。类是 C 的核心特性&#xff0c;通常被称为用户定义的类型。 类用于指定对象的形式&#xff0c;它包含了数据表示法和用于处理数据的方法。类中的数据和方法…
阅读更多...
Hadoop学习

Hadoop学习

1.分布式与集群 hosts文件&#xff1a; 域名映射文件 2.Linux常用命令 ls -a&#xff1a;查看当前目录下所有文件mkdir -p&#xff1a;如果没有对应的父文件夹&#xff0c;会自动创建rm -rf&#xff1a;-f&#xff1a;强制删除 -r&#xff1a;递归删除cp -r&#xff1a;复制文…
阅读更多...
《统计学习方法》（李航）——学习笔记

《统计学习方法》（李航）——学习笔记

第一章 概论统计学习&#xff0c;又称统计机器学习&#xff08;机器学习&#xff09;&#xff0c;现在提到的 机器学习 往往指的就是 统计机器学习。统计学习研究的对象是数据&#xff0c;其对数据的基本假设是同类数据存在一定的统计规律性&#xff0c;因此可以用概率统计方法…
阅读更多...
KDJB-702三相工控微机继电保护测试仪

KDJB-702三相工控微机继电保护测试仪

一、概述 KDJB-702三相继电保护校验仪搭载标准的4相电压3相电流输出&#xff0c;具有4相电压3相电流输出&#xff0c;可方便地进行各种组合输出进行各种类型保护试验。 二、功能特点 控制数字信号处理器微机 KDJB-702三相继电保护校验仪采用高速、高性能数字控制处理器作为控制…
阅读更多...
前端基础(十六)_数组对象

前端基础(十六)_数组对象

数组对象 1、创建数组 // 字面量创建const arr [1, 2, 3, 4, 5, 6]// 构造函数创建const arr2 new Array(1, 2, 3, 4, 5, 6)const arr3 Array(1, 2, 3, 4, 5, 6)2.push (从数组末尾添加元素) a.数组.push(要添加进数组的数组项) b.作用&#xff1a;将要添加的数组项 添加到…
阅读更多...
MyBatisX插件

MyBatisX插件

引言MyBatisX一款基于 IDEA 的快速开发插件&#xff0c;为效率而生 1.在idea中下载MyBatisX插件安装重启就下载好了1.1MyBatisX中XML文件与mapper相对应好处&#xff1a;两个小鸽子点的话可以相互对应&#xff0c;方便我们在开发大项目的时候快速找到对应xml文件2.MyBatisX自动…
阅读更多...
uniapp项目打包上线流程

uniapp项目打包上线流程

平台&#xff1a;h5小程序app &#xff08;安卓&#xff09;小程序打包上线流程第一步&#xff1a;登录小程序公众平台第二步&#xff1a;hbuilderx打包小程序1.在mainfest.json文件中进行相关配置2.需要将项目中的网络请求改为https协议做为生产环境&#xff08;配置项目的环境…
阅读更多...
spring cloud stream 自定义binder

spring cloud stream 自定义binder

背景xxx,关键字 binder stream &#xff0c;解决多中间件通信及切换问题直接主菜&#xff1a;spring cloud stream 架构中间件 --- binder --- channel --- sink --- &#xff08;处理&#xff09;---source ---channel ---binder ---中间件 springcloudstream已自己集成了kafk…
阅读更多...
12升400V 升压DC-DC高压脱毛仪解决方案SC3671

12升400V 升压DC-DC高压脱毛仪解决方案SC3671

ipl(intense pulsed light&#xff0c;强脉冲光)脱毛&#xff0c;也叫光子脱毛&#xff0c;是市场上的一种新型脱毛技术和美容方法&#xff0c;其利用强脉冲光特殊的波长和光热效应实现破坏毛囊并达到永久脱毛的效果&#xff0c;具有速度快&#xff0c;效果好&#xff0c;安全性…
阅读更多...
【前端学习】D5：CSS进阶

【前端学习】D5：CSS进阶

文章目录前言系列文章目录1 精灵图Sprites1.1 为什么需要精灵图&#xff1f;1.2 精灵图的使用2 字体图标iconfont2.1 字体图标的产生2.2 字体图标的优点2.3 字体文件格式2.4 字体图标的使用2.5 字体图标的引入2.6 字体图标的追加3 CSS三角3.1 普通三角3.2 案例4 CSS用户界面样式…
阅读更多...
【学习笔记】Docker（二）

【学习笔记】Docker（二）

Docker镜像加载原理 UnionFS(联合文件系统) 一种分层、轻量级并且高性能的文件系统&#xff0c;它支持对文件系统的修改作为一次提交来一层层的叠加&#xff0c;同时可以将不同目录挂载到同一个虚拟文件系统下。Union文件系统是Docker镜像的基础。镜像可以通过分层来进行继承&a…
阅读更多...
音视频开发之IOMX调用端—OMXCodec源码分析

音视频开发之IOMX调用端—OMXCodec源码分析

概述 OMX Codec是stagefrightplayer中负责解码的模块。由于遵循openmax接口规范&#xff0c;因此结构稍微有点负责&#xff0c;这里就依照awesomeplayer中的调用顺序来介绍。 主要分如下几步&#xff1a; 1 mClient->connect2 InitAudioDecoder & InitVideoDecoder3 …
阅读更多...
C++回顾（十三）—— 运算符重载提高

C++回顾（十三）—— 运算符重载提高

13.1 为什么不要重载 && 和 || 运算符 1&#xff09;&&和||是C中非常特殊的操作符2&#xff09;&&和||内置实现了短路规则3&#xff09;操作符重载是靠函数重载来完成的4&#xff09;操作数作为函数参数传递5&#xff09;C的函数参数都会被求值&#…
阅读更多...
xxl-job分布式任务调度平台

xxl-job分布式任务调度平台

分布式任务调度平台XXL-JOB (xuxueli.com) 1 xxl-job概述 XXL-JOB是一个分布式任务调度平台&#xff0c;其核心设计目标是开发迅速、学习简单、轻量级、易扩展。 1.1 xxl-job架构 我把上面的图精简了一下&#xff0c;xxl-job 的调度器和业务执行是独立的。调度器决定任务的调…
阅读更多...
【数据分析师求职面试指南】必备基础知识整理

【数据分析师求职面试指南】必备基础知识整理

数据分析师基础知识统计 数据分析知识基础概念随机变量常用特征正态分布与大数定律、中心极限定律假设检验模型、数据挖掘知识常用概念数据集划分欠拟合过拟合模型分类方法常见模型介绍线性回归模型&#xff1a;逻辑回归模型决策树模型随机森林模型Boosting模型XGBoost模型模型…
阅读更多...
前后端分离项目学习-vue+springboot 博客

前后端分离项目学习-vue+springboot 博客

前后端分离项目 文章总体分为2大部分&#xff0c;Java后端接口和vue前端页面 项目演示&#xff1a;www.markerhub.com:8084/blogs Java后端接口开发 1、前言 从零开始搭建一个项目骨架&#xff0c;最好选择合适&#xff0c;熟悉的技术&#xff0c;并且在未来易拓展&#xf…
阅读更多...
精简：设计模式

精简：设计模式

1.设计模式概述 1.什么是设计模式 设计模式(Design Pattern)是前辈们对代码开发经验的总结&#xff0c;是解决特定问题的一系列套路。 它不是语法规定&#xff0c;而是一套用来提高代码可复用性、可维护性、可读性、稳健性以及安全性的解决方案。 1995年&#xff0c;GoF (Ga…
阅读更多...
flutter工程创建过程中遇到一些问题。

flutter工程创建过程中遇到一些问题。

安装环境版本&#xff1a;JDK7.-JDK 8 Andriod SDK 10 flutter 版本 3.0 1.当创建完后flutter工程后会遇到 run gradle task assemlble Debug 的问题&#xff0c;需要设置远程仓库&#xff0c;共需要修改三个地方build.gradle两处以及flutter 下面的D:\FVM\versions\3.0.0\pac…
阅读更多...
Excel常用可视化图表

Excel常用可视化图表

目录柱状图与条形图折线图饼图漏斗图雷达图瀑布图及甘特图旭日图组合图excel图表&#xff1a;柱状数据条、excel热力图、mini图可视化工具的表现形式&#xff1a;看板、可视化大屏、驾驶舱 柱状图与条形图 条形图是柱状图的转置 类别&#xff1a; 单一柱状图&#xff1a;反映…
阅读更多...
Linux内核移植

Linux内核移植

内核移植半导体厂商会从linux内核官网下载某个版本&#xff0c;将其移植到自己的CPU上&#xff0c;测试成功后就会将其开放给该半导体的厂商的CPU开发者&#xff0c;开发者下载其提供的linux内核&#xff0c;然后将其移植到自己的 产品上。1、NXP官方开发板Linux内核编译测试编…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023