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

【day 06】vue的组件

news 2025/11/6 14:35:53

组件

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

单文件组件 只有一个组件 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

JavaSec-RCE

简介 RCE(Remote Code Execution)&#xff0c;可以分为:命令注入(Command Injection)、代码注入(Code Injection) 代码注入 1.漏洞场景&#xff1a;Groovy代码注入 Groovy是一种基于JVM的动态语言&#xff0c;语法简洁&#xff0c;支持闭包、动态类型和Java互操作性&#xff0c…...

编程新知 2025/11/6 8:34:10

应用升级/灾备测试时使用guarantee 闪回点迅速回退

1.场景 应用要升级,当升级失败时,数据库回退到升级前. 要测试系统,测试完成后,数据库要回退到测试前。 相对于RMAN恢复需要很长时间&#xff0c; 数据库闪回只需要几分钟。 2.技术实现 数据库设置 2个db_recovery参数 创建guarantee闪回点&#xff0c;不需要开启数据库闪回。…...

编程新知 2025/7/30 7:20:17

在rocky linux 9.5上在线安装 docker

前面是指南&#xff0c;后面是日志 sudo dnf config-manager --add-repo https://download.docker.com/linux/centos/docker-ce.repo sudo dnf install docker-ce docker-ce-cli containerd.io -y docker version sudo systemctl start docker sudo systemctl status docker …...

编程新知 2025/7/27 10:03:12

【android bluetooth 框架分析 04】【bt-framework 层详解 1】【BluetoothProperties介绍】

1. BluetoothProperties介绍 libsysprop/srcs/android/sysprop/BluetoothProperties.sysprop BluetoothProperties.sysprop 是 Android AOSP 中的一种 系统属性定义文件&#xff08;System Property Definition File&#xff09;&#xff0c;用于声明和管理 Bluetooth 模块相…...

编程新知 2025/10/30 4:02:31

css的定位（position）详解：相对定位 绝对定位 固定定位

在 CSS 中&#xff0c;元素的定位通过 position 属性控制&#xff0c;共有 5 种定位模式&#xff1a;static&#xff08;静态定位&#xff09;、relative&#xff08;相对定位&#xff09;、absolute&#xff08;绝对定位&#xff09;、fixed&#xff08;固定定位&#xff09;和…...

编程新知 2025/10/22 12:48:44

CMake控制VS2022项目文件分组

我们可以通过 CMake 控制源文件的组织结构，使它们在 VS 解决方案资源管理器中以“组”（Filter）的形式进行分类展示。 🎯 目标 通过 CMake 脚本将 .cpp、.h 等源文件分组显示在 Visual Studio 2022 的解决方案资源管理器中。 ✅ 支持的方法汇总（共4种） 方法描述是否推荐…...

编程新知 2025/8/5 10:17:15

GC1808高性能24位立体声音频ADC芯片解析

1. 芯片概述 GC1808是一款24位立体声音频模数转换器&#xff08;ADC&#xff09;&#xff0c;支持8kHz~96kHz采样率&#xff0c;集成Δ-Σ调制器、数字抗混叠滤波器和高通滤波器&#xff0c;适用于高保真音频采集场景。 2. 核心特性 高精度&#xff1a;24位分辨率&#xff0c…...

编程新知 2025/10/29 23:15:58

JVM 内存结构 详解

内存结构 运行时数据区&#xff1a; Java虚拟机在运行Java程序过程中管理的内存区域。 程序计数器&#xff1a; ​ 线程私有&#xff0c;程序控制流的指示器&#xff0c;分支、循环、跳转、异常处理、线程恢复等基础功能都依赖这个计数器完成。 ​ 每个线程都有一个程序计数…...

编程新知 2025/10/25 21:14:56

DingDing机器人群消息推送

文章目录 1 新建机器人2 API文档说明3 代码编写 1 新建机器人 点击群设置 下滑到群管理的机器人&#xff0c;点击进入 添加机器人 选择自定义Webhook服务 点击添加 设置安全设置&#xff0c;详见说明文档 成功后&#xff0c;记录Webhook 2 API文档说明 点击设置说明 查看自…...

编程新知 2025/10/28 13:24:10

Vue ③-生命周期 || 脚手架

生命周期 思考&#xff1a;什么时候可以发送初始化渲染请求&#xff1f;&#xff08;越早越好&#xff09; 什么时候可以开始操作dom&#xff1f;&#xff08;至少dom得渲染出来&#xff09; Vue生命周期&#xff1a; 一个Vue实例从 创建 到 销毁 的整个过程。 生命周期四个…...

编程新知 2025/10/15 0:28:44