2023/1/7 Vue学习笔记-3-组件的理解

news2025/6/30 1:22:56

1 对组件的理解

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
模块与组件、模块化与组件化：
1.模块：
（1）理解：向外提供特定功能的js程序，一般就是一个js文件
（2）为什么：js文件很多很复杂
（3）作用：复用js，简化js的编写，提高js运行效率

2.组件：
（1）理解：用来实现局部（特定）功能效果的代码集合（html/css/js/image…）
（2）为什么：一个界面的功能很复杂
（3）作用：复用编码，简化项目编码，提高运行效率

3.模块化：
当应用中的js都以模块来编写，那这个应用就是一个模块化的应用。

4.组件化：
当应用中的功能都是多组件的方式来编写的，那这个应用就是一个组件化的应用。

2 非单文件组件

非单文件组件 : 一个文件中包含有n个组件。
单文件组件 : 一个文件中只包含有1个组件。（主要使用这种方式）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type="text/javascript" src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.1/vue.js"></script>
</head>
<body>
<div id="component">
    <h2>学校名称：{{ schoolName }}</h2>
    <h2>学校地址：{{ schoolAddress }}</h2>
    <hr/>
    <h2>学生名称：{{ studentName }}</h2>
    <h2>学生年龄：{{ studentAge }}</h2>
</div>

<script type="text/javascript">
    new Vue({
        el: '#component',
        data: {
            schoolName: '北京大学',
            schoolAddress: '北京',
            studentName: 'zhaoshuai-lc',
            studentAge: 26
        }
    })
</script>
</body>
</html>

在这里插入图片描述
局部注册：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type="text/javascript" src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.1/vue.js"></script>
</head>
<body>
<div id="component">
    <h2>{{ msg }}</h2>
    <hr/>
    <!--    3 编写组件标签-->
    <school></school>
    <school></school>
    <school></school>
    <hr/>
    <student></student>
    <student></student>
    <student></student>
</div>

<script type="text/javascript">
    // 1 创建一个school组件
    const school = Vue.extend({
        template: `
          <div>
          <h2>学校名称：{{ schoolName }}</h2>
          <h2>学校地址：{{ schoolAddress }}</h2>
          <button @click="showName">点我提示学校名</button>
          </div>
        `,
        // el: '#component', 一定不要写el配置项，组件就是一块砖，哪里需要哪里搬。
        data() { // 组件 data 必须写函数式
            return {
                schoolName: '北京大学',
                schoolAddress: '北京'
            }
        },

        methods: {
            showName() {
                alert(this.schoolName)
            }
        }

    })
    // 1 创建一个student组件
    const student = Vue.extend({
        template: `
          <div>
          <h2>学生名称：{{ studentName }}</h2>
          <h2>学生年龄：{{ studentAge }}</h2>
          </div>
        `,
        data() {
            return {
                studentName: 'zhaoshuai-lc',
                studentAge: 26
            }
        }
    })
    new Vue({
        el: '#component',
        data: {
            msg: 'hello-world'
        },
        // 2 注册组件 (局部注册)
        components: {
            school,
            student
        }
    })
</script>
</body>
</html>

在这里插入图片描述
全局注册：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type="text/javascript" src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.1/vue.js"></script>
</head>
<body>
<div id="component">
    <h2>{{ msg }}</h2>
    <hr/>
    <!--    3 编写组件标签-->
    <school></school>
    <school></school>
    <school></school>
    <hr/>
    <student></student>
    <student></student>
    <student></student>
</div>

<script type="text/javascript">
    // 1 创建一个school组件
    const school = Vue.extend({
        template: `
          <div>
          <h2>学校名称：{{ schoolName }}</h2>
          <h2>学校地址：{{ schoolAddress }}</h2>
          <button @click="showName">点我提示学校名</button>
          </div>
        `,
        // el: '#component', 一定不要写el配置项，组件就是一块砖，哪里需要哪里搬。
        data() { // 组件 data 必须写函数式
            return {
                schoolName: '北京大学',
                schoolAddress: '北京'
            }
        },

        methods: {
            showName() {
                alert(this.schoolName)
            }
        }

    })
    // 1 创建一个student组件
    const student = Vue.extend({
        template: `
          <div>
          <h2>学生名称：{{ studentName }}</h2>
          <h2>学生年龄：{{ studentAge }}</h2>
          </div>
        `,
        data() {
            return {
                studentName: 'zhaoshuai-lc',
                studentAge: 26
            }
        }
    })
    // 2 注册组件 (全局注册)
    Vue.component('school', school)
    Vue.component('student', student)

    new Vue({
        el: '#component',
        data: {
            msg: 'hello-world'
        }
    })
</script>
</body>
</html>

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

一、定义组件（创建组件）
二、注册组件
三、使用组件（写组件标签）

3 组件的几个注意点

1.关于组件名：
一个单词组成：

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

多个单词组成：

第一种写法（kebab-case命名）：my-school
第二种写法（CamelCase命名）：MySchool（需要Vue脚手架支持）

备注：
1）组件名尽可能回避HTML中已有的9元素名称，例如：h2、H2都不行。
2）可以使用name配置项指定组件在开发者工具中呈现的名字。

2.关于组件标签：

第一种写法：<school></school>
第二种写法：<school/>

备注：不适用脚手架时，<school/>会导致后续组件不能渲染。

3.一个简写方式：

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

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type="text/javascript" src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.1/vue.js"></script>
</head>
<body>
<div id="component">
    <h2>{{ msg }}</h2>
    <hr/>
    <!--    3 编写组件标签-->
    <my-school></my-school>
</div>
<script type="text/javascript">
    // 1 创建一个school组件
    const MySchool = Vue.extend({
        template: `
          <div>
          <h2>学校名称：{{ schoolName }}</h2>
          <h2>学校地址：{{ schoolAddress }}</h2>
          </div>
        `,
        data() { // 组件 data 必须写函数式
            return {
                schoolName: '北京大学',
                schoolAddress: '北京'
            }
        }
    })

    new Vue({
        el: '#component',
        data: {
            msg: 'hello-world'
        },
        // 2 注册组件
        components: {
            'my-school': MySchool
        }
    })
</script>
</body>
</html>

4 组件的嵌套

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type="text/javascript" src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.1/vue.js"></script>
</head>
<body>
<div id="component">
    <!--    编写组件标签-->
    <!--    <app></app>-->
</div>
<script type="text/javascript">
    // 创建一个student组件
    const student = Vue.extend({
        template: `
          <div>
          <h2>学生名称：{{ studentName }}</h2>
          <h2>学生地址：{{ studentAddress }}</h2>
          </div>
        `,
        data() { // 组件 data 必须写函数式
            return {
                studentName: '北京大学',
                studentAddress: '北京'
            }
        }
    })

    // 创建一个school组件
    const school = Vue.extend({
        template: `
          <div>
          <h2>学校名称：{{ schoolName }}</h2>
          <h2>学校地址：{{ schoolAddress }}</h2>
          <student></student>
          </div>
        `,
        data() { // 组件 data 必须写函数式
            return {
                schoolName: '北京大学',
                schoolAddress: '北京'
            }
        },
        // 注册组件 （局部）
        components: {
            student
        }
    })

    // 创建app组件
    const app = Vue.extend({
        template: `
          <div>
          <school></school>
          </div>
        `,
        components: {
            school
        }
    })
    new Vue({
        template: `
          <app></app>`,
        el: '#component',
        // 注册组件
        components: {
            app
        }
    })
</script>
</body>
</html>

5 VueComponent构造函数

关于VueComponent：

 1.school组件本质是一个名为VueComponent的构造函数，且不是程序员定义的，是Vue.exend生成的。
 2.<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。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type="text/javascript" src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.1/vue.js"></script>
</head>
<body>
<div id="VueComponent"></div>
<script type="text/javascript">

    // 创建一个school组件
    const school = Vue.extend({
        template: `
          <div>
          <h2>学校名称：{{ schoolName }}</h2>
          <h2>学校地址：{{ schoolAddress }}</h2>
          </div>
        `,
        data() { // 组件 data 必须写函数式
            return {
                schoolName: '北京大学',
                schoolAddress: '北京'
            }
        }
    })

    console.log('@', school)
    /*
    构造函数：
    @ ƒ VueComponent (options) {
            this._init(options);
        }*/

    new Vue({
        template: `
          <school></school>`,
        el: '#VueComponent',
        // 注册组件
        components: {
            school
        }
    })
</script>
</body>
</html>

VM 管理 VC:
在这里插入图片描述

6 Vue实例与组件实例

既然vc和vm中的内容一样，为什么不能把vc和vm直接划上等号？
vc是由VueComponent缔造的，vm是由Vue缔造的。这两个缔造的过程肯定不可能完全一样。

比如说在创建组件实例对象、传入配置项的时候，是不可以写el的，但是在创建vm的时候，配置对象中就可以写el。也就是说vm可以写自己为哪个容器服务，但是vc不能指定服务容器，只能跟着vm走。

再比如说，vc的数据配置项（data）就必须写成函数。
可以说，它们俩身上99%的东西一样，但是有这1%就是不一样。就像是两个双胞胎，长得一模一样，但是不能说他们是同个人。

打开官网——学习——教程——组件基础——基本实例中，也有说到：组件是可复用的Vue实例…因为组件是可复用的Vue实例，所以它们与new Vue接收相同的选项…

7 未完待续。。。

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

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

相关文章

【Linux工具】-vim介绍

【Linux工具】-vim介绍

Vim使用一&#xff0c;Vim的四种模式二&#xff0c;命令模式1,复制&#xff0c;剪切&#xff0c;粘贴2&#xff0c;撤销操作3&#xff0c;光标的移动4&#xff0c;替换&#xff0c;选中&#xff0c;删除5&#xff0c;h j k l键的使用6&#xff0c;多行注释&#xff0c;去多行注…
阅读更多...
2023-01-07：hyper/docker-registry-web是registry的web界面工具之一。请问部署在k3s中，yaml如何写？

2023-01-07：hyper/docker-registry-web是registry的web界面工具之一。请问部署在k3s中，yaml如何写？

2023-01-07&#xff1a;hyper/docker-registry-web是registry的web界面工具之一。请问部署在k3s中&#xff0c;yaml如何写&#xff1f; 答案2023-01-07&#xff1a; yaml如下&#xff1a; apiVersion: apps/v1 kind: Deployment metadata:labels:app: docker-registry-webna…
阅读更多...
实验二十五 VRRP配置

实验二十五 VRRP配置

实验二十五 VRRP配置虚拟路由冗余协议VRRP(Virtual Router R edundancy Protocol)通过把几台路由设备联合组成一 台虚拟的路由设备&#xff0c;将虚拟路由设备的IP 地址作为用户的默认网关实现与外部网络通信。当网关设 备发生故障时&#xff0c;VRRP机制能够选举新的网关设备承…
阅读更多...
HTML与CSS基础（三）—— CSS基础之基础选择器、字体文本相关样式

HTML与CSS基础（三）—— CSS基础之基础选择器、字体文本相关样式

一、基础认知目标&#xff1a;理解 CSS 的作用&#xff0c;了解 CSS 语法规则&#xff0c;知道 CSS 的引入方式及其区别1. CSS的介绍CSS&#xff1a;层叠样式表&#xff08;Cascading style sheets&#xff09; CSS作用&#xff1a;• 给页面中的HTML标签设置样式结构&#xff…
阅读更多...
Chrome浏览器读取蓝牙设备数据

Chrome浏览器读取蓝牙设备数据

蓝牙协议已经发展到5.3版本了&#xff0c;应用蓝牙的设备也越来越多&#xff0c;特别是随着传感器和智能硬件时代的到来&#xff0c;现在除了常见的蓝牙耳机还有一大批设备应用蓝牙进行通信&#xff0c;例如手环、手表、温度计、体重秤。蓝牙协议的数据读写我一直很头疼&#x…
阅读更多...
文件写入函数write和fwrite对SRS的DVR性能影响的比较

文件写入函数write和fwrite对SRS的DVR性能影响的比较

概述 在linux环境中&#xff0c;对于文件进行读写操作的时候&#xff0c;我们可以采用libc提供的fread/fwrite系列的一套函数&#xff0c;也可以采用操作系统提供的read/write系列的一套系统api函数。 对于libc提供的文件读写函数&#xff0c;首先它可移植性比较好&#xff0c;…
阅读更多...
C语言实现插入排序和希尔排序（动态图演示过程）

C语言实现插入排序和希尔排序（动态图演示过程）

插入和希尔插入排序时间和空间复杂度分析希尔排序时间和空间复杂度分析本篇文章将插入排序和希尔排序放在一起讲解&#xff0c;是因为后者可以说是前者的排序方式的一种优化&#xff0c;思路上大体一样&#xff0c;插入和希尔在整个排序的大章节中&#xff0c;算是比较简单的&a…
阅读更多...
java食堂库存管理系统源码

java食堂库存管理系统源码

简介 Java基于sprinboot开发的食堂库存管理系统&#xff0c;用于统计食堂库存的&#xff0c;包含采购、入库、出库、折损等功能。 演示视频 https://www.bilibili.com/video/BV1Jf4y1C7vq/?share_sourcecopy_web&vd_sourceed0f04fbb713154db5cc611225d92156 调试 https…
阅读更多...
php宝塔搭建部署实战响应式儿童益智玩具网站模板源码

php宝塔搭建部署实战响应式儿童益智玩具网站模板源码

大家好啊&#xff0c;我是测评君&#xff0c;欢迎来到web测评。 本期给大家带来一套php开发的响应式儿童益智玩具网站模板源码&#xff0c;感兴趣的朋友可以自行下载学习。 技术架构 PHP7.2 nginx mysql5.7 JS CSS HTMLcnetos7以上 宝塔面板 文字搭建教程 下载源码&am…
阅读更多...
java基于ssm空气质量检测系统源码网站空气质量监测源码

java基于ssm空气质量检测系统源码网站空气质量监测源码

简介 Java基于ssm的空气质量检测系统&#xff0c;检测设备检测一定范围内的企业空气指数&#xff0c;如果有污染则地图显示红色标记。 演示视频 https://www.bilibili.com/video/BV1GK4y1W7JB/?share_sourcecopy_web&vd_sourceed0f04fbb713154db5cc611225d92156 技术 …
阅读更多...
67、NeRF-Editing: Geometry Editing of Neural Radiance Fields

67、NeRF-Editing: Geometry Editing of Neural Radiance Fields

简介 允许用户对场景的隐表示进行可控的形状变形&#xff0c;在不重新训练网络的情况下合成编辑过的场景的新视图图像。在提取的显式网格表示(Mesh)和目标场景的隐式神经表示之间建立了对应关系&#xff0c;利用基于网格的变形方法&#xff08;ARAP&#xff09;对场景的网格表…
阅读更多...
CAN 协议及标准规格

CAN 协议及标准规格

文章目录CAN协议对应ISO/OSI 基本参照模型ISO 标准化的 CAN 协议通信速度和最大总线长度的关系根据协议不同选择对应IC其他标准规格CAN协议对应ISO/OSI 基本参照模型 CAN 协议中关于 ISO/OSI 基本参照模型中的传输层、数据链路层及物理层 数据链路层分为 MAC 子层和 LLC 子层…
阅读更多...
Vue3基础知识，看这篇文章就够啦~

Vue3基础知识，看这篇文章就够啦~

0 前言整理了一下自己在学Vue3的时候的笔记&#xff0c;如果有错误的地方还望指正~1 setup函数1.1 参数 setup(props,context)props&#xff1a;父组件传递过来的属性context&#xff1a;SetupContext&#xff0c;即是setup函数的上下文1.1.1 参数1 props如果想在setup函数中使…
阅读更多...
脑电项目探索和实现(EEG) (上)：研究数据集选取和介绍SEED

脑电项目探索和实现(EEG) (上)：研究数据集选取和介绍SEED

数据集介绍&#xff1a; 使用上海交大的SEED数据集1 SEED数据集包含12名受试者的脑电图和眼动数据以及另外3名受试者的脑电图数据。数据是在他们观看电影片段时收集的。电影片段是精心挑选的&#xff0c;以诱导不同类型的情绪&#xff0c;积极的&#xff0c;消极的&#xff0…
阅读更多...
BI技巧丨子类Top及其他

BI技巧丨子类Top及其他

BOSS&#xff1a;白茶&#xff0c;能不能在展示产品销量的时候&#xff0c;前三的展示&#xff0c;其他的都归为“其他”啊&#xff1f; 白茶&#xff1a;可以啊&#xff01;安排&#xff01; 在实际项目中&#xff0c;一张Dashboard看板的设计&#xff0c;既要考虑逻辑的准确无…
阅读更多...
Spring中@Conditional注解详解

Spring中@Conditional注解详解

文章目录Conditional是Spring4新提供的注解&#xff0c;它的作用是按照一定的条件进行判断&#xff0c;满足条件给容器注册bean。首先创建Dog类然后创建MyCondition类定义两个Bean测试方法AnnotationConfigApplicationContext测试ConditionalOnBean和ConditionalOnMissingBean注…
阅读更多...
51单片机学习笔记_8 IICAT24C02 芯片的应用

51单片机学习笔记_8 IICAT24C02 芯片的应用

I2C EEPROM I2C I2C&#xff08;Inter&#xff0d;Integrated Circuit&#xff09;总线是由 PHILIPS 公司开发的两线式 串行总线&#xff0c;用于连接微控制器及其外围设备。 I2C 结构 I2C 只有两根双向信号线&#xff0c;一根是 SDA 数据线&#xff0c;一根是 SCL 时钟线。…
阅读更多...
2-选择题练手

2-选择题练手

1.HASH函数冲突处理方式不包括以下哪一项 A.开放定址法 B.链地址法 C.插入排序法 D.公共溢出区发 答&#xff1a;C 析&#xff1a; HASH函数冲突处理方式有&#xff1a; 开放定址法&#xff1a;&#xff08;线性探测再散列&#xff0c;二次探测再散列&#xff0c;伪随机…
阅读更多...
Netty进阶——粘包与半包（固定分隔符方式解决粘包问题）

Netty进阶——粘包与半包（固定分隔符方式解决粘包问题）

目录一、固定分隔符方式解决粘包问题&#xff08;代码示例&#xff09;1.1、固定分隔符解决粘包问题的服务端代码示例1.2、固定分隔符方式解决粘包问题的客户端代码示例1.3、分别启动服务端&#xff0c;客户端&#xff0c;查看服务端结果输出一、固定分隔符方式解决粘包问题&am…
阅读更多...
vitepress（四）：引入vue组件

vitepress（四）：引入vue组件

这节课的内容需要有前置的良好的Vue基础&#xff0c;如果你仅仅想搭建一个存放md文件的网站的话&#xff0c;可以不必学习后面的内容&#xff0c;当然如果你想个性化自己的站点&#xff0c;那么推荐你学习一下引用的方式和注意点&#xff0c;开始你的个性化之旅 编写VUE组件 …
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023