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

【day 06】vue的组件

news 2026/2/7 17:36:48

组件

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

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

C++_核心编程_多态案例二-制作饮品

#include <iostream> #include <string> using namespace std;/*制作饮品的大致流程为&#xff1a;煮水 - 冲泡 - 倒入杯中 - 加入辅料 利用多态技术实现本案例&#xff0c;提供抽象制作饮品基类&#xff0c;提供子类制作咖啡和茶叶*//*基类*/ class AbstractDr…...

编程新知 2026/2/4 16:15:43

css实现圆环展示百分比，根据值动态展示所占比例

代码如下 <view class""><view class"circle-chart"><view v-if"!!num" class"pie-item" :style"{background: conic-gradient(var(--one-color) 0%,#E9E6F1 ${num}%),}"></view><view v-else …...

编程新知 2026/2/5 4:28:28

HTML 列表、表格、表单

1 列表标签 作用&#xff1a;布局内容排列整齐的区域 列表分类&#xff1a;无序列表、有序列表、定义列表。 例如&#xff1a; 1.1 无序列表 标签&#xff1a;ul 嵌套 li&#xff0c;ul是无序列表&#xff0c;li是列表条目。 注意事项&#xff1a; ul 标签里面只能包裹 li…...

编程新知 2026/1/24 22:33:33

新能源汽车智慧充电桩管理方案：新能源充电桩散热问题及消防安全监管方案

随着新能源汽车的快速普及&#xff0c;充电桩作为核心配套设施&#xff0c;其安全性与可靠性备受关注。然而&#xff0c;在高温、高负荷运行环境下&#xff0c;充电桩的散热问题与消防安全隐患日益凸显&#xff0c;成为制约行业发展的关键瓶颈。 如何通过智慧化管理手段优化散…...

编程新知 2026/1/29 3:00:56

USB Over IP专用硬件的5个特点

USB over IP技术通过将USB协议数据封装在标准TCP/IP网络数据包中&#xff0c;从根本上改变了USB连接。这允许客户端通过局域网或广域网远程访问和控制物理连接到服务器的USB设备&#xff08;如专用硬件设备&#xff09;&#xff0c;从而消除了直接物理连接的需要。USB over IP的…...

编程新知 2026/2/6 13:42:22

Linux中《基础IO》详细介绍

目录 理解"文件"狭义理解广义理解文件操作的归类认知系统角度文件类别 回顾C文件接口打开文件写文件读文件稍作修改&#xff0c;实现简单cat命令 输出信息到显示器&#xff0c;你有哪些方法stdin & stdout & stderr打开文件的方式 系统⽂件I/O⼀种传递标志位…...

编程新知 2026/2/3 4:42:54

鸿蒙HarmonyOS 5军旗小游戏实现指南

1. 项目概述 本军旗小游戏基于鸿蒙HarmonyOS 5开发&#xff0c;采用DevEco Studio实现&#xff0c;包含完整的游戏逻辑和UI界面。 2. 项目结构 /src/main/java/com/example/militarychess/├── MainAbilitySlice.java // 主界面├── GameView.java // 游戏核…...

编程新知 2025/12/8 9:32:22

医疗AI模型可解释性编程研究：基于SHAP、LIME与Anchor

1 医疗树模型与可解释人工智能基础 医疗领域的人工智能应用正迅速从理论研究转向临床实践，在这一过程中，模型可解释性已成为确保AI系统被医疗专业人员接受和信任的关键因素。基于树模型的集成算法（如RandomForest、XGBoost、LightGBM）因其卓越的预测性能和相对良好的解释性…...

编程新知 2026/1/23 11:47:13

渗透实战PortSwigger Labs指南：自定义标签XSS和SVG XSS利用

阻止除自定义标签之外的所有标签 先输入一些标签测试&#xff0c;说是全部标签都被禁了 除了自定义的 自定义<my-tag onmouseoveralert(xss)> <my-tag idx onfocusalert(document.cookie) tabindex1> onfocus 当元素获得焦点时&#xff08;如通过点击或键盘导航&…...

编程新知 2026/2/5 18:48:19

大数据驱动企业决策智能化的路径与实践

&#x1f4dd;个人主页&#x1f339;&#xff1a;慌ZHANG-CSDN博客 &#x1f339;&#x1f339;期待您的关注 &#x1f339;&#x1f339; 一、引言&#xff1a;数据驱动的企业竞争力重构 在这个瞬息万变的商业时代&#xff0c;“快者胜”的竞争逻辑愈发明显。企业如何在复杂环…...

编程新知 2025/10/5 0:43:53