当前位置： 首页 > news >正文

【day 06】vue的组件

news 文章来源：https://blog.csdn.net/weixin_57858263/article/details/130773911 2025/5/20 17:27:32

组件

组件就是把一个网页分割成独立的小的模块，然后通过把模块进行组合，构建成一个大型的应用
在这里插入图片描述

单文件组件 只有一个组件 html css js 都在这个文件内
非单文件组件 可有多个组件
全局注册
!! 得先注册子组件 再生成 vm实例对象 
创建子组件  
const child = Vue.extend({//除了 el 其他任意配置项都可以用  name: 'child',data() {return {msg: 123}},// 写组件的html内容 template: `<h1>我是child子组件</h1>`})//全局注册子组件  自定义组件名  组件对象  Vue.component('child', child)const vm = new Vue({name: 'app',el: '#app',data() {return {}}})

语法糖的写法 省略 Vue.extend() 在使用 child组件时 内部会自己调用

const child = {name: 'child',data() {return {msg: 123}},// 写组件的html内容 template: `<h1>我是child子组件</h1>`}Vue.component('child', child)
view model  vm new Vue() 产生的  老大哥 管理一切 小弟 子组件实例对象  简称 vc  

<!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><style></style>
</head>
<body><div id="app"><child></child><child></child><child></child></div><script src="https://cdn.jsdelivr.net/npm/vue@2.7.14/dist/vue.js"></script><script>//    得先注册子组件  再生成vm实例对象// 创建子组件const child = Vue.extend({// 除了el其他任意配置项都可以用name:'child',data(){return{msg:123}},//写组件的html内容template:`<h1>我是child子组件</h1>`})//    全局注册子组件  自定义组件名  组件对象Vue.component('child',child)const vm = new Vue({el:"#app",data(){return{bool:true,}},methods: {}})console.log(vm)</script>
</body>
</html>

注意：子组件内 data 只能是函数 不能是对象的写法

全局注册组件 任意的组件内都可以使用此组件
我们期望 组件直供 某一个组件使用 需要使用局部注册
  new Vue({el:"#box",data(){return{}},methods: {},components:{child}})

<!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><style></style>
</head>
<body><div id="app"><child></child></div><div id="box"><p>我现在是在box下</p><child></child></div><script src="https://cdn.jsdelivr.net/npm/vue@2.7.14/dist/vue.js"></script><script>const child = Vue.extend({name:'Child'data(){return{}},methods:{},template:`<h1>我是儿子组件<h1>`})// Vue.component('child',child) 关闭全局注册new Vue({el:"#app",data(){return{bool:true,}},methods: {}})new Vue({el:"#box",data(){return{}},methods: {},components:{child}})</script>
</body>
</html>

最好是配置上name属性 name写的是啥 浏览器工具内 组件的位置就显示啥 最好是 组件名 保持一致 首字母大写

name:'child'
自定义标签名命名
  1. 不能跟已有的标签发生冲突
  2. 子组件命名 使用时 写成
    vue2 非单文件组件为：
    components:{
    childDemo:child
    }
    会被转为 小写识别 就会报错 childdemo
    我们需要更换成 这种写法
模板的规定

vue2内
template内 只能接收一个根元素

template:
`
//这样子写会报错

我是儿子组件


我是儿子组件/

        `需要改成

template:
<div> <h2>我是儿子组件</h2> <h2>我是儿子组件</h2> </div>
vue3内不存在这个问题 可以接收多个根元素

<!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><style></style>
</head>
<body><div id="app"><!-- <child></child> --></div><div id="box"><p>我现在是在box下</p><child-demo></child-demo></div><script src="https://cdn.jsdelivr.net/npm/vue@2.7.14/dist/vue.js"></script><script>const child = Vue.extend({name:'child',data(){return{}},methods:{},template:` <div><h2>我是儿子组件</h2><h2>我是儿子组件</h2>   </div> `})// Vue.component('child',child) 关闭全局注册new Vue({el:"#app",data(){return{bool:true,}},methods: {}})new Vue({el:"#box",data(){return{}},methods: {},components:{childDemo:child}})</script>
</body>
</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><style></style>
</head>
<body><div id="app"><child></child></div><script src="https://cdn.jsdelivr.net/npm/vue@2.7.14/dist/vue.js"></script><script>const  moLeft =  {name:'MoLeft',template:`<h2 style='float:left;background:red;'>我是左边的组件</h2>`}const child = Vue.extend({name:'child',data(){return{}},methods:{},template:` <div><h1>我是儿子组件</h1><mo-left>  </mo-left></div>  `})Vue.component('child',child) Vue.component('moLeft',moLeft) new Vue({el:"#app",data(){return{}},methods: {},components:{childDemo:child}})</script>
</body>
</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><style></style>
</head>
<body><div id="app"><child></child></div><script src="https://cdn.jsdelivr.net/npm/vue@2.7.14/dist/vue.js"></script><script>const  moLeft =  {name:'MoLeft',template:`<h2 style='float:left;background:red;'>我是左边的组件</h2>`}const child = Vue.extend({name:'child',data(){return{}},methods:{},template:` <div><h1>我是儿子组件</h1><mo-left>  </mo-left></div>  `,components:{moLeft}})Vue.component('child',child) // Vue.component('moLeft',moLeft) new Vue({el:"#app",data(){return{}},methods: {},components:{childDemo:child}})</script>
</body>
</html>

分析：
new Vue 产生的是 vm实例对象
Vue.extend() 返回的是 f VueComponent(options) //构造函数
{
this.inint(options)
}

VueComponent 构造函数 组件使用的时候 内部会执行 产出 vc实例对象 （被vm管理的小弟）

vc和vm两个人 配置差不多完全一致
子组件内 this 指向 自己的vc实例对象

单文件组件
<template><div class="father">我是父组件</div>
</template><script>
export default{name:"Father",data(){return{};},
};
// export default{} 默认暴露  引用时 import ??? from '????'// 分别暴露
// export const obj = {};引用时 import {obj} from '?????'
// 等价于暴露出去了
// {
//     obj
// }// 统一暴露
// let obj = {}
// let obj1 = {}
// import {obj,obj1} from '?????'</script>
<style lang="sass" scoped></style>

脚手架

Vue官方提供的标准化开发工具（开发平台）
可以把vue文件及相关的ess编译为可执行的html css js

安装

npm i -g @vue/cli 进行安装

搭建

相关文章：

【day 06】vue的组件

组件 组件就是把一个网页分割成独立的小的模块&#xff0c;然后通过把模块进行组合&#xff0c;构建成一个大型的应用 单文件组件 只有一个组件 html css js 都在这个文件内 非单文件组件 可有多个组件 全局注册 !! 得先注册子组件 再生成 vm实例对象 创建子组件 const …...

编程日记 2023/5/30 22:56:51

第3章 Class and Object

构造函数 Guaranteed initialization with the constructor使用构造函数保证初始化 • If a class has a constructor, the compiler automatically calls that constructor at the point an object is created, before client programmers can get their hands on the o…...

编程日记 2023/5/30 22:51:50

卫星定位北斗芯片AT6558一款高性能BDS/GNSS多模卫星导航接收机SOC单芯片

1 芯片简介 AT6558R是一款高性能BDS/GNSS多模卫星导航接收机SOC单芯片,片上集成射频前端&#xff0c; 数字基带处理器&#xff0c;32位的RISCCPU&#xff0c;电源管理功能。 芯片支持多种卫星导航系统&#xff0c;包括中国的北斗卫星导航系统BDS&#xff0c;美国的GPS,俄罗斯 的…...

编程日记 2023/5/30 22:46:49

提升您的 MQTT 云服务：深入探索 BYOC

引言 您是否希望将物联网基础设施提升到更高的水平&#xff1f;为了应对业务的不断扩展&#xff0c;您需要一个强大且安全的消息平台来支持它。 MQTT 协议凭借其轻量级、发布/订阅模型和可靠性&#xff0c;已经成为构建物联网平台的首选方案。但是&#xff0c;随着业务的增长…...

编程日记 2023/5/30 22:41:48

Zookeeper面试题总结

1、说说 Zookeeper 是什么&#xff1f; 有些软件你想做成集群或者分布式&#xff0c;你可以用 ZooKeeper 帮你来辅助实现。特点&#xff1a;ZooKeeper 的特点&#xff1a;维护、协调、管理、监控 最终一致性&#xff1a;客户端看到的数据最终是一致的。可靠性&#xff1a;服务…...

编程日记 2023/5/30 22:36:47

如何使用HTML、CSS和JavaScript来制作这两种类型的时钟

随着计算机技术的不断发展和普及&#xff0c;人们对于时间的精准度要求也越来越高。时钟作为我们日常生活必不可少的工具之一&#xff0c;也得到了越来越多的关注和研究。而在Web开发中&#xff0c;我们同样可以使用HTML、CSS和JavaScript的组合&#xff0c;制作出各式各样的时…...

编程日记 2023/5/30 22:31:46

Java中操作Xml使用备忘

List item 文章目录 Java中操作Xml使用备忘1. Hutool中XmlUtil的使用简介2. Hutool中XmlUtil快速读取Xml字符串某个节点值 [简单取值时&#xff0c;推荐使用]2-1 Hutool工具包Maven依赖和测试Xml字符串如下2-2 读取Xml中的节点<message>的值 3. Hutool中XmlUtil详细操作示…...

编程日记 2023/5/30 22:26:45

【Java|基础篇】内部类

文章目录 1.什么是内部类?2.实例内部类3.静态内部类4.局部内部类5.匿名内部类6.结语 1.什么是内部类? 内部类就是在一个类中再定义一个类,内部类也是封装的体现.它可以被声明为 public、protected、private 或默认访问控制符。内部类可以访问外部类的所有成员变量和方法&…...

编程日记 2023/5/30 22:21:39

七牛云图床设置

文章目录 七牛云图床设置下面是用picgo配置图床SSL证书申请https网站显示http图片解决方案 原文链接图床设置&#xff0c;免费SSL证书申请&#xff0c;https网站显示http链接的图片 七牛云图床设置 登录七牛云官网并进行个人注册&#xff0c;然后找到对象存储 点击空间管理&a…...

编程日记 2023/5/30 22:16:38

Android 12.0下拉状态栏录屏去掉弹窗直接录屏

1.概述 在12.0的系统rom开发中，在systemui的下拉状态栏中有个录屏的快捷按钮，可以通过点击录屏实现录屏功能，但是在录屏的时候发现需要先弹出 dialog，然后点击开始实现录屏，这有的麻烦，所以需要去掉弹窗直接开始录屏，就需要弹窗的相关代码来实现功能 2.下拉状态栏录屏…...

编程日记 2023/5/30 22:11:37

MySql基础学习（1）

MySql基础学习 一、数据库1.1 什么是数据库1.2 MySql的启动与停止1.3 MySql数据模型 二、SQL2.1 SQL通用语法2.2 SQL分类2.2.1 数据类型2.2.2 DDL使用方法2.2.3 、表操作-修改&删除DDL总结 2.3 DML2.3.1 DML添加数据2.3.2 DML---修改数据2.3.3 DML---删除数据DML总结 2.4 D…...

编程日记 2023/5/30 22:06:36

18- 弹幕系统设计

1、弹幕系统设计 场景分析&#xff1a;客户端针对某一视频创建了弹幕&#xff0c;发送后端进行处理&#xff0c;后端需要对所有正在观看该视频的用户推送该弹幕。 1.1、实现方式 使用短连接进行通信或使用长连接进行通信。 1.1.1、短连接实现方案 所有观看视频的客户端不断…...

编程日记 2023/5/30 22:01:30

字节软测划水四年，内容过于真实......

先简单交代一下吧&#xff0c;潇潇是某不知名211的本硕&#xff0c;18年毕业加入一个小厂&#xff0c;之后跳槽到了字节跳动&#xff0c;一直从事测试开发相关的工作。之前没有实习经历&#xff0c;算是四年半的工作经验吧。 这四年半之间他完成了一次晋升&#xff0c;换了一家…...

编程日记 2023/5/30 21:56:29

Mybatis介绍

1. Mybatis中#和$的区别&#xff1f; #相当于对数据 加上 双引号&#xff0c;$相当于直接显示数据 1. #将传入的数据都当成一个字符串&#xff0c;会对自动传入的数据加一个双引号。如&#xff1a;order by #user_id#&#xff0c;如果传入的值是111,那么解析成sql时的值为orde…...

编程日记 2023/5/30 21:51:28

Docker理论基础

初识Docker 1.什么是Docker 微服务虽然具备各种各样的优势&#xff0c;但服务的拆分通用给部署带来了很大的麻烦。 分布式系统中&#xff0c;依赖的组件非常多&#xff0c;不同组件之间部署时往往会产生一些冲突。 在数百上千台服务中重复部署&#xff0c;环境不一定一致&…...

编程日记 2023/5/30 21:46:27

MySQL数据库之存储引擎

一、存储引擎的概念 1.1 什么是存储引擎 MySQL中的数据用各种不下同的技术存储在文件中&#xff0c;每一种技术都使用不同的存储机制、索引技巧、锁定水平并最终提供不同的功能和能力&#xff0c;这些不同的技术以及配套的功能在MySQL中称为存储引擎。存储引擎是MySQL将数据存…...

编程日记 2023/5/30 21:41:26

中介效应分析全流程汇总

一、中介效应说明 中介效应主要研究自变量对因变量影响的过程中&#xff0c;自变量是否通过中介变量再对因变量产生影响&#xff0c;那什么情况表明中介效应存在呢&#xff1f;如果自变量对因变量影响过程中&#xff0c;中介变量在模型中有着桥梁般的作用&#xff0c;那说明中…...

编程日记 2023/5/30 21:36:25

论文阅读：Multimodal Graph Transformer for Multimodal Question Answering

文章目录 论文链接摘要1 contribution3 Multimodal Graph Transformer3.1 Background on Transformers3.2 Framework overview 框架概述3.3 Multimodal graph construction多模态图的构建Text graphSemantic graphDense region graph Graph-involved quasi-attention 总结 论文…...

编程日记 2023/5/30 21:31:24

关于compile() 函数简单实用示例

compile() 函数是什么 compile() 函数将一个字符串编译为字节代码。 compile将代码编译为代码对象&#xff0c;应用在代码中可以提高效率。 语法 compile(source, filename, mode, flags0, dont_inheritFalse, optimize-1) 参数 source&#xff1a;表示要编译的源代码字符串、…...

编程日记 2023/5/30 21:26:23

Deep Frequency Filtering for Domain Generalization论文阅读笔记

这是CVPR2023的一篇论文&#xff0c;讲的是在频域做domain generalization&#xff0c;找到频域中generalizable的分量enhance它&#xff0c;suppress那些影响generalization的分量 DG是一个研究模型泛化性的领域&#xff0c;尝试通过各自方法使得模型在未见过的测试集上有良好…...

编程日记 2023/5/30 21:21:22

视频里的声音怎么转换成音频？

视频里的声音怎么转换成音频&#xff1f;这样我们就能把视频里的想要的声音在其他音频平台播放或是用于其他视频。其实视频提取音频是一种将视频文件中的音频数据分离出来的技术。该技术可以将视频中的音频转换为不同的格式&#xff0c;让我们可以在无需视频的情况下使用音频文…...

编程日记 2023/5/30 21:16:20

1.1. Java简介与安装

Java简介 Java是一种广泛使用的计算机编程语言&#xff0c;由James Gosling和他的团队在Sun Microsystems公司开发&#xff0c;于1995年首次发布。Java的设计理念是“一次编写&#xff0c;到处运行”&#xff0c;这意味着Java应用程序可以在任何支持Java运行时环境&#xff08…...

编程日记 2023/5/30 21:11:19

Elasticsearch 8.X 性能优化参考 —— 筑梦之路

Elasticsearch 是实现用户无缝搜索体验的关键工具。它通过提供快速、准确和相关的搜索结果&#xff0c;彻底改变了用户与应用程序的互动方式。然而&#xff0c;要确保 Elasticsearch 部署达到最佳性能&#xff0c;就必须关注关键指标&#xff0c;并对诸如索引、缓存、查询、搜索…...

编程日记 2023/5/30 21:06:18

通过强化学习走直线理解基本概念

摘要&#xff1a; 一条线上包含起点和终点共有6个格子&#xff0c;起点在左终点在右。假设智能体已经学到了最优的策略&#xff0c;并且在每一步行动时&#xff0c;以 0.9 0.9 0.9 的概率选择最优策略&#xff08;也就是往右&#xff09;&#xff0c;以 0.1 0.1 0.1 的概率选…...

编程日记 2023/5/30 21:01:17

Java字符流

5 字符流 5.1 为什么出现字符流 由于字节流操作中文不是特别的方便，所以Java就提供字符流字符流=字节流+编码表用字节流复制文本文件时，文本文件也会有中文，但是没有问题，原因是最终底层操作会自动进行字节拼接成中文，如何识别是中文的呢? 汉字在存储的时候， 无论选择哪…...

编程日记 2023/5/30 20:56:16

2023年上半年信息系统项目管理师上午真题及答案解析

1.“新型基础设施”主要包括信息技术设施、融合基础设施和创新基础设施三个方面。其中信息基础设施包括&#xff08; &#xff09;。 ①通信基础设施 ②智能交通基础设施 ③新技术基础设施 ④科教基础设施 ⑤算力基础设施 A.①③⑤ B.①④⑤ C.②③④ D.②…...

编程日记 2023/5/30 20:51:16

LeetCode 739 每日温度

题目&#xff1a; 给定一个整数数组 temperatures &#xff0c;表示每天的温度&#xff0c;返回一个数组 answer &#xff0c;其中 answer[i] 是指对于第 i 天&#xff0c;下一个更高温度出现在几天后。如果气温在这之后都不会升高&#xff0c;请在该位置用 0 来代替。 示例 1…...

编程日记 2023/5/30 20:46:14

介绍几种常见的运维发布策略

随着Devops的发展&#xff0c;为了提高运维发布的成功率&#xff0c;探索出了多种发布策略。本文简单介绍几种常见发布策略, 以及它们适用的场景和优缺点。 第一种&#xff0c;停机发布 这是最早的一种发布策略&#xff0c;停机发布会在发布以前关闭服务&#xff0c;停止用户…...

编程日记 2023/5/30 20:41:13

C++ QT QDBus进阶用法。

以下是使用QDBus的高级用法示例代码&#xff1a; 1. 使用DBus的异步调用机制&#xff1a; #include <QCoreApplication> #include <QDebug> #include <QDBusConnection> #include <QDBusPendingCallWatcher> class MyDBusObject : public QObject …...

编程日记 2023/5/30 20:36:12

2023-5-26 LeetCode每日一题（二进制矩阵中的最短路径）

2023-05-29每日一题 一、题目编号 1091. 二进制矩阵中的最短路径二、题目链接 点击跳转到题目位置 三、题目描述 给你一个 n x n 的二进制矩阵 grid 中&#xff0c;返回矩阵中最短 畅通路径 的长度。如果不存在这样的路径&#xff0c;返回 -1 。 二进制矩阵中的 畅通路径…...

编程日记 2023/5/30 20:31:11