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

Vue组件-非单文本组件

news 2026/4/1 8:38:06

非单文本组件(用的少)

在vue中，组件是有两种编写格式的，第一种格式叫非单文本组件，第二种格式叫单文本组件

非单文本组件：一个文件中含有多个组件，也叫多文本组件，比如demo.html里面包含js,css…

单文本组件（使用较多）：一个文件中只有1个组件，一个文件只有一个组件，是一一对应的,比如demo.vue

注意： 非单文本组件在开发中用的比较少，一般用单文本组件比较多，但是它可以让我们学到很多东西，还是值得学习的

1 编写例子

编写代码，实现一个小例子

看下效果，虽然没有报错，但是总觉得不太好，如果能够给上面的信息单独写一个叫school的组件，给下面的写一个叫student组件，感觉会好很多

下面就通过vue去创建组件

2 创建组件(extend)

在vue中，创建组件的api叫extend(扩展) 注意：没有s，不是extends!

它是一个函数，需要调用，并且调用的时候要传入一个配置对象，在配置对象里面可以配置很多东西。这些东西都是用来控制组件相关内容的，和vm写法几乎一样的

 // 创建组件
const school=Vue.extend({})

这里我直接把vm中的对象属性复制使用，但是报错了

报错提示，这些属性只能在new vue的时候使用

组件定义时不需要指定el配置项，因为最终所以的组件都要被一个vm管理，由vm决定服务于哪个容器

注释掉el，再次查看页面，发现少了一个错误信息，但是还有一个错误，说的是不要把data直接写成一个对象，而是要写成一个函数，函数里面写data想返回的对象

使用组件时，data必须写成函数式！并且要写成普通函数！

这时候查看页面，没有任何报错信息了

对应的，把管理学生的组件也创建出来

这样组件就创建完成了

3 使用组件

创建组件只需要使用extend即可，但是想使用组件需要分为三步

1 创建组件(extend)

第一步已经完成，接下来进行第二步

2 注册组件(components)

因为不同的组件数据在对应的组件里面，那么vm中的data就不需要了

这时候需要用到一个全新的配置项：components

注册组件,里面是一组一组的key,value组合 key就是组件名，在这里面key才是决定性的组件名称，创建组件的时候的名称只是一个中转，如果key和创建时候名称一样，那么可以只写key

组件中需要有自己的元素，所以要配置template模板。最好使用模板字符串的引号 (Tab上面那个键在英文输入法下按两下）这样可以随意换行，一般需要一个根容器(div)把元素进行包裹

到了这里，才是一个有意义的组件了，有自己的模板和数据项，然后就可以被vm使用了

3 使用组件

使用组件，编写组件标签

查看页面，正常显示，说明组件正常使用了

到这样组件的定义，以及注册，使用就完成了，注意：上面用的是局部注册

4 新增其他属性

如果想在组件模板中新增其他属性，直接在对应的组建中添加即可

比如我想在学校组件中新增一个按钮，点击的时候提示学校名称，像vm一样直接编写即可

5 全局组件

全局组件用的并不多，想对来说局部组件用的更多，但是还是有必要学下

上面注册的组件都是局部的，如果我再创建一个vm里面没有任何组件，使用组件标签

直接报错，没有注册的组件

这时候就要用到全局组件了：component，注意不是components!

  // 注册全局组件Vue.component('student',student)

页面正常了

代码如下

<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title>初始vue</title><!-- 引入vue.js --><script type="text/javascript" src="../js/vue.js"></script>
</head>
<body><div id="root"><!-- 第三 步：使用组件，编写组件标签 --><school></school><hr><student></student></div><div id="root2"><student></student></div>
</body> <script type="text/javascript">// 第一步：创建school组件const school=Vue.extend({// 模板配置项 最好使用模板字符串的引号 (Tab上面那个键在英文输入法下按两下）这样可以随意换行// 一般需要一个根容器(div)把元素进行包裹template:`<div><h2>学校名称：{{schoolName}}</h2><h2>学校地址：{{address}}</h2>   <button @click='showInfo'>点我告诉你学校名称</button> </div>`,// 组件定义时不需要指定el配置项，因为最终所以的组件都要被一个vm管理，由vm决定服务于哪个容器// el:'#root',// 使用组件时，data必须写成函数式！并且要写成普通函数！data(){return{schoolName:'清华大学',address:'北京'}},methods: {showInfo(){alert(this.schoolName)}},})// 第一步：创建student组件const student=Vue.extend({// 模板配置项 最好使用模板字符串的引号 (Tab上面那个键在英文输入法下按两下）这样可以随意换行// 一般需要一个根容器(div)把元素进行包裹template:`<div><h2>学生姓名：{{studentName}}</h2><h2>学生年龄：{{age}}</h2></div>`,// 组件定义时不需要指定el配置项，因为最终所以的组件都要被一个vm管理，由vm决定服务于哪个容器// el:'#root',// 使用组件时，data必须写成函数式！并且要写成普通函数！data(){return{studentName:'张三',age:'18'}},})// 注册全局组件Vue.component('student',student)// 创建vmconst vm=  new Vue({el:'#root',//第二步：注册组件（局部注册）,里面是一组一组的key,value组合 key就是组件名，在这里面key才是决定性的组件名称// 创建组件的时候的名称只是一个中转，如果key和创建时候名称一样，那么可以只写keycomponents:{school,student}})const vm2=  new Vue({el:'#root2',})</script></html>

相关文章：

Vue组件-非单文本组件

非单文本组件(用的少) 在vue中&#xff0c;组件是有两种编写格式的&#xff0c;第一种格式叫非单文本组件&#xff0c;第二种格式叫单文本组件 非单文本组件&#xff1a;一个文件中含有多个组件&#xff0c;也叫多文本组件&#xff0c;比如demo.html里面包含js,css… 单文本…...

编程日记 2023/4/28 21:44:24

停车场管理系统的设计与实现_kaic

目 录 1 概 述 1.1研究背景 1.2研究现状 1.3研究内容 2 相关技术简介 2.1 JSP技术 2.2 JAVA技术 2.3 MYSQL数据库 2.4 B/S结构 3 系统需求分析 3.1 系统可行性分析 3.1.1 操作可行性 3.1.2 经济可行性 3.1.3 技术可行性 3.2 系统性能分析 3.3系统流程分析 3.3.1注册流程 3.3.…...

编程日记 2023/4/28 21:39:23

seleniumUI自动化登录失败案例重新尝试WhileTrue

一个用户每次登录失败&#xff0c;失败N次&#xff0c;无法进入下一url时&#xff0c;怎样会重新尝试N次重新登录呢 &#xff1f; 我们可以使用wihile true判断&#xff0c;并使用currenturl判断&#xff0c;下面就介绍以下个人的方法 currenturlEGTconfigFile.driver.curren…...

编程日记 2023/4/28 21:34:22

前端开发之vue动态路由实现方案

前端开发之vue动态路由实现方案 前言2. 实现1、登录页面创建登录函数和watch监听路由2、调用的login方法&#xff08;1&#xff09;登录方法&#xff08;2&#xff09;存储token 3、router.push的时候调用路由守卫&#xff08;1&#xff09;创建路由守卫&#xff0c;建议路由守…...

编程日记 2023/4/28 21:29:20

JAVA接口的基本测试------JAVA入门基础教程

public class Interface {public static void main(String[] args){System.out.println(Flyable.max_speed);System.out.println(Flyable.min_speed);//类与接口是实现关系Bullet b new Bullet();b.attack();b.fly();Flyable f new Bullet();f.fly();} }interface Flyable {p…...

编程日记 2023/5/31 9:31:02

SLAM论文速递：SLAM—— 面向动态环境的多用途SLAM框架—4.25（1）

论文信息 题目&#xff1a; Multi-purpose SLAM framework for Dynamic Environment 面向动态环境的多用途SLAM框架论文地址&#xff1a; 2020 IEEE/SICE International Symposium on System Integration (SII)https://ieeexplore.ieee.org/abstract/document/9026299发表期刊…...

编程日记 2023/4/28 21:19:18

Dubbo 简易环境搭建以及使用（2）

目录 环境搭建 Dubbo的3种使用方式&#xff1a; 1. XML配置的方式&#xff0c;一般用于Spring MVC工程 2. 配置文件的方式 &#xff08;spring boot工程&#xff09; 3. 注解方式 Dubbo 控制台 环境搭建 本篇将介绍Spring boot zookeeper Dubbo 简易环境的搭建以及使用…...

编程日记 2023/4/28 21:14:18

免费无需魔法会语音聊天的ChatGPT

今天发现了一个很好的ChatGPT&#xff0c;可以语音聊天&#xff0c;而且免费无需魔法 角色目前包括夏洛克、雷电影等等&#xff0c;对话的声调完全模拟了原角色&#xff01; 目前只有英文和日语两种对话&#xff0c;我们可以文字输入或者语音输入&#xff0c;中文即可&#xff…...

编程日记 2023/4/28 21:09:11

springboot 参数统一处理

目录 一、普通参数:ParameterRequestWrapper 二、HttpHelper请求处理字符串工具类 三、实体json参数&#xff1a;RequestWrapper 四、过滤器&#xff1a;PostFilter 五、Controller 一、普通参数:ParameterRequestWrapper import javax.servlet.http.HttpServletRequest;…...

编程日记 2023/4/28 21:04:10

成就更强大的自己

每一次低谷&#xff0c;都会酝酿向上的力量。 每一次痛苦过后&#xff0c;都会洗涤掉心理深处的灰尘。 人生的路上&#xff0c;坎坷前行&#xff0c;只有保持积极向上的态度&#xff0c;才能把坎坷化为坦途。 走过一段路后&#xff0c;才发现&#xff0c;当内心强大、修养、爱…...

编程日记 2023/4/28 20:59:08

android 富文本编辑器有哪些

android 富文本编辑器有哪些 有许多优秀的开源富文本编辑器插件可用于Android平台&#xff0c;下面列举几个常用的&#xff1a; RichEditorView&#xff1a;这是一个基于Web技术的富文本编辑器插件&#xff0c;有多种编辑功能与选项。 Android Rich Text Editor&#xff1a;这…...

编程日记 2023/4/28 20:54:02

flex布局属性详解

Flex布局 flex-directionflex-wrapflex-flowjustify-contentalign-itemsalign-content其他orderflexalign-self 含义:Flex是Flexible Box的缩写&#xff0c;意为”弹性布局”&#xff0c;用来为盒状模型提供最大的灵活性。 flex-direction flex-direction属性决定主轴的方向&…...

编程日记 2023/4/28 20:49:01

上传了ipa但iTunes Connect没有构建版本问题

上传了ipa但iTunes Connect没有构建版本问题 转载&#xff1a;上传了ipa但iTunes Connect没有构建版本问题 AU上传ipa出现下图红框提示说明成功上传&#xff0c;如果App Store后台没有出现构建版本&#xff0c;请登录 apple账号对应的邮箱查看反馈&#xff0c;特别留意垃圾邮…...

编程日记 2023/4/28 20:44:00

记录一次armbian系统搭建路由功能的失败过程

根据 使用 Debian 作为路由器 :: 星野玲的博客 https://blog.bling.moe/post/3/ 优化ubuntu dns解析&#xff0c;关掉systemd-resolved - MR__Wang - 博客园 https://www.cnblogs.com/xzlive/p/17139520.html ChatGPT 背景需求,新入手了一款RK3568系列的小主机,带有2*2.5G2*1…...

编程日记 2023/4/28 20:38:57

OpenGL与Metal API的Point Sprite

我们在实际用OpenGL等3D图形渲染API时 点图元 往往用得不多&#xff0c;而在粒子系统中可能也是用一个正方形来绘制一单个粒子。不过在当前大部分3D图形渲染API中都能支持用点图元来绘制一个具有纹理贴图的粒子&#xff0c;从早在OpenGL 1.4开始就能支持了&#xff0c;而在Open…...

编程日记 2023/4/28 20:33:55

从0搭建Vue3组件库(七):使用 gulp 打包组件库并实现按需加载

使用 gulp 打包组件库并实现按需加载 当我们使用 Vite 库模式打包的时候,vite 会将样式文件全部打包到同一个文件中,这样的话我们每次都要全量引入所有样式文件做不到按需引入的效果。所以打包的时候我们可以不让 vite 打包样式文件,样式文件将使用 gulp 进行打包。那么本篇文…...

编程日记 2023/4/28 20:28:54

Python入门教程+项目实战-11.4节: 元组与列表的区别

目录 11.4.1 元组与列表的区别 11.4.2 可变数据类型 11.4.3 元组与列表的区别 11.4.4 知识要点 11.4.5 系统学习python 11.4.1 不可变数据类型 不可变数据类型是指不可以对该数据类型进行修改&#xff0c;即只读的数据类型。迄今为止学过的不可变数据类型有字符串&#x…...

编程日记 2023/4/28 20:23:52

如何做好采购计划和库存管理？

“销售计划不专业且不稳定”“准确性低” “目前只按照过往销量和采购周期做安全库存&#xff0c;但欠货和滞销依然严重” 题主的问题其实蛮有代表性的&#xff0c; 也是传统采购和库存管理常常面临的问题&#xff1a; ① 前后方协作困难 采购/销售/财务工作相互独立&#x…...

编程日记 2023/4/28 20:18:51

客户管理系统的作用有哪些？

阅读本文您将了解&#xff1a;1.客户管理系统的作用&#xff1b;2.客户管理系统软件怎么用&#xff1b;3.客户管理的注意事项。 一、客户管理系统的作用 客户是企业的重要财富&#xff0c;因此客户管理是企业发展过程中至关重要的一部分&#xff0c;那么客户管理怎么做&#…...

编程日记 2023/4/28 20:13:50

Sqlmap手册—史上最全

Sqlmap手册—史上最全 一.介绍 开源的SQL注入漏洞检测的工具&#xff0c;能够检测动态页面中的get/post参数&#xff0c;cookie&#xff0c;http头&#xff0c;还能够查看数据&#xff0c;文件系统访问&#xff0c;甚至能够操作系统命令执行。 检测方式&#xff1a;布尔盲注、…...

编程日记 2023/4/28 20:08:48

Pixel Script Temple 效果进阶：YOLOv11目标识别引导的精准构图像素画

Pixel Script Temple 效果进阶&#xff1a;YOLOv11目标识别引导的精准构图像素画 1. 效果亮点预览 当像素艺术遇上目标检测技术&#xff0c;会碰撞出怎样的火花&#xff1f;最新发布的YOLOv11模型与Pixel Script Temple的结合&#xff0c;让像素画创作进入了精准构图的新阶段…...

编程新知 2026/4/1 7:18:53

战争鼓点响起：AI生成大片感战斗音乐作品

战争鼓点响起&#xff1a;AI生成大片感战斗音乐作品 1. 从文字到战歌&#xff1a;AI音乐生成初体验 想象一下这样的场景&#xff1a;你正在制作一部史诗级的战斗短片&#xff0c;画面中千军万马奔腾&#xff0c;刀光剑影交错&#xff0c;但总觉得缺少点什么。没错&#xff0c…...

编程新知 2026/4/1 7:12:48

音乐自由之路：Unlock-Music技术突破实战指南

音乐自由之路&#xff1a;Unlock-Music技术突破实战指南 【免费下载链接】unlock-music 在浏览器中解锁加密的音乐文件。原仓库&#xff1a; 1. https://github.com/unlock-music/unlock-music &#xff1b;2. https://git.unlock-music.dev/um/web 项目地址: https://gitcod…...

编程新知 2026/4/1 6:25:37

Pixel Language Portal效果展示：多轮对话上下文跨语种一致性保持

Pixel Language Portal效果展示&#xff1a;多轮对话上下文跨语种一致性保持 1. 产品概览 **像素语言跨维传送门(Pixel Language Portal)**是一款突破性的多语言交互工具&#xff0c;基于腾讯Hunyuan-MT-7B核心引擎构建。不同于传统翻译工具的机械感&#xff0c;它将语言转换…...

编程新知 2026/4/1 6:15:25

DriverStore Explorer：突破Windows驱动管理瓶颈，释放系统空间提升80%存储效率

DriverStore Explorer&#xff1a;突破Windows驱动管理瓶颈&#xff0c;释放系统空间提升80%存储效率 【免费下载链接】DriverStoreExplorer Driver Store Explorer [RAPR] 项目地址: https://gitcode.com/gh_mirrors/dr/DriverStoreExplorer 诊断存储异常&#xff1a;设…...

编程新知 2026/4/1 6:05:21

CTFshow Misc挑战：从WinRAR到明文攻击的实战解析

1. 初识CTFshow Misc挑战&#xff1a;压缩包破解的奥秘 第一次接触CTFshow的Misc题目时&#xff0c;我被那个看似普通的压缩包难住了整整两天。那是个名为6.zip的文件&#xff0c;用360解压提示需要密码&#xff0c;这种场景在CTF比赛中实在太常见了。很多新手遇到这种情况会直…...

编程新知 2026/4/1 5:04:47

Tomato Novel Downloader：智能搜索功能的技术突破

Tomato Novel Downloader&#xff1a;智能搜索功能的技术突破 【免费下载链接】Tomato-Novel-Downloader 番茄小说下载器不精简版 项目地址: https://gitcode.com/gh_mirrors/to/Tomato-Novel-Downloader 在数字阅读工具领域&#xff0c;用户体验的每一个细节都可能决定…...

编程新知 2026/4/1 4:23:55

国行iPhone Siri功能意外上线又撤回，背后暗藏玄机

iPhone“Siri”变身“Apple智能与Siri”&#xff0c;意外功能短暂亮相3月31日凌晨&#xff0c;部分国行iPhone用户惊喜发现&#xff0c;手机设置中的“Siri”入口悄然变更为“Apple智能与Siri”&#xff0c;同时还短暂解锁了端侧模型下载及AI功能。不过&#xff0c;这一新鲜体验…...

编程新知 2026/4/1 4:09:45

Phi-4-mini-reasoning案例分享：用逻辑题测试模型对‘必要条件’的理解深度

Phi-4-mini-reasoning案例分享&#xff1a;用逻辑题测试模型对必要条件的理解深度 1. 模型能力定位 Phi-4-mini-reasoning是专为推理任务优化的文本生成模型&#xff0c;其核心优势在于处理需要多步逻辑推导的问题。与通用对话模型不同&#xff0c;它更擅长处理以下类型任务&…...

编程新知 2026/4/1 4:03:42

【Matlab】MATLAB教程：图形句柄；案例：h=plot(x,y)；应用：控制图形属性

MATLAB教程：图形句柄；案例：h=plot(x,y)；应用：控制图形属性 在MATLAB数据可视化、实验报告绘图、工程结果展示等场景中，仅仅通过plot函数绘制基础图形远远不够。实际科研与工程应用中，往往需要精准调整图形的线条样式、颜色、标记点、坐标轴、图例等属性，让图形更清晰、…...

编程新知 2026/4/1 3:20:57