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

【day 06】vue的组件

news 2026/4/4 7:51:58

组件

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

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

BetterGI原神智能辅助工具完整教程：5大核心功能快速上手

BetterGI原神智能辅助工具完整教程&#xff1a;5大核心功能快速上手 【免费下载链接】better-genshin-impact &#x1f4e6;BetterGI 更好的原神 - 自动拾取 | 自动剧情 | 全自动钓鱼(AI) | 全自动七圣召唤 | 自动伐木 | 自动刷本 | 自动采集/挖矿/锄地 | 一条龙 | 全连音游 -…...

编程新知 2026/4/4 7:23:56

SN75453与非门电路设计：如何正确选择上下拉电阻值（附计算公式）

SN75453与非门电路设计&#xff1a;如何正确选择上下拉电阻值&#xff08;附计算公式&#xff09; 在数字电路设计中&#xff0c;与非门是最基础的逻辑门之一&#xff0c;而SN75453作为一款经典的TTL与非门芯片&#xff0c;广泛应用于各种控制系统中。但很多工程师在实际应用时…...

编程新知 2026/4/4 6:49:46

REX-UniNLU在SpringBoot项目中的集成指南

REX-UniNLU在SpringBoot项目中的集成指南 1. 引言 如果你正在开发一个需要理解中文文本的SpringBoot应用&#xff0c;比如要做智能客服、内容分析或者自动分类&#xff0c;那么REX-UniNLU可能会是个不错的选择。这是一个专门为中文设计的自然语言理解模型&#xff0c;不需要训…...

编程新知 2026/4/4 6:27:42

MTK新工程创建与调试全攻略，人形机器人的发展历程、技术演进与未来图景。

MTK调试&#xff1a;创建新工程指南 准备工作 确保已安装MTK官方开发环境&#xff0c;包括SDK、驱动程序和必要的工具链。下载最新版本的MTK开发包&#xff0c;解压到指定目录。检查系统环境变量是否配置正确&#xff0c;确保编译工具路径已加入PATH。 工程结构初始化 使用MTK提…...

编程新知 2026/4/4 5:43:07

实测cv_resnet18_ocr-detection：电商截图、票据文字识别效果超预期

实测cv_resnet18_ocr-detection&#xff1a;电商截图、票据文字识别效果超预期 1. 开箱即用的OCR文字检测体验 当我第一次打开cv_resnet18_ocr-detection的WebUI界面时&#xff0c;紫蓝渐变的现代化设计立刻吸引了我的注意。这个由科哥开发的OCR文字检测模型&#xff0c;承诺…...

编程新知 2026/4/4 5:19:01

OpenClaw调试技巧：解决SecGPT-14B模型返回结果异常问题

OpenClaw调试技巧&#xff1a;解决SecGPT-14B模型返回结果异常问题 1. 问题背景与现象描述 上周在尝试用OpenClaw对接SecGPT-14B模型时&#xff0c;遇到了一个棘手的问题&#xff1a;模型返回的结果经常出现截断或格式混乱。具体表现为&#xff1a; 当请求生成网络安全报告时…...

编程新知 2026/4/4 5:06:43

单片机与手机远距离通信技术方案全解析

1. 单片机与手机远距离通信的技术方案解析在物联网和智能硬件开发领域&#xff0c;单片机与手机的远程通信是一个基础但至关重要的技术需求。作为一名嵌入式开发工程师&#xff0c;我参与过多个需要远程通信的智能硬件项目&#xff0c;从智能家居设备到工业监测终端&#xff0c…...

编程新知 2026/4/4 3:31:47

ArcGIS Pro 3.0 中文版安装与破解全流程指南

1. ArcGIS Pro 3.0中文版安装前的准备工作 在开始安装ArcGIS Pro 3.0中文版之前&#xff0c;我们需要做好充分的准备工作。首先确保你的电脑满足最低系统要求&#xff1a;Windows 10或11操作系统&#xff08;64位&#xff09;、至少8GB内存&#xff08;16GB以上更佳&#xff09…...

编程新知 2026/4/4 2:53:24

Ubuntu 24.04 装完 AppImage 还是打不开？别急，先检查这个库（libfuse2）

Ubuntu 24.04运行AppImage的深度排错指南&#xff1a;从权限检查到FUSE机制解析 刚在Ubuntu 24.04上双击下载好的AppImage文件&#xff0c;却发现毫无反应&#xff1f;这可能是许多Linux用户升级系统后遇到的第一个"惊喜"。不同于简单的权限问题&#xff0c;这里隐藏…...

编程新知 2026/4/4 2:35:19

Mac 用户专属：解决 Stable Diffusion WebUI 在 macOS 上部署时遇到的 Git 和路径权限疑难杂症

Mac 用户专属&#xff1a;解决 Stable Diffusion WebUI 在 macOS 上部署时的疑难杂症 在 macOS 上部署 Stable Diffusion WebUI 时&#xff0c;许多用户会遇到一系列独特的问题&#xff0c;这些问题往往与 macOS 的文件系统、权限管理以及网络配置有关。本文将深入探讨这些问题…...

编程新知 2026/4/4 2:33:19