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

Vue组件-非单文本组件

news 2025/9/19 7:18:56

非单文本组件(用的少)

在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

网络编程（Modbus进阶）

思维导图 Modbus RTU&#xff08;先学一点理论&#xff09; 概念 Modbus RTU 是工业自动化领域 最广泛应用的串行通信协议&#xff0c;由 Modicon 公司&#xff08;现施耐德电气&#xff09;于 1979 年推出。它以 高效率、强健性、易实现的特点成为工业控制系统的通信标准。 包…...

编程新知 2025/9/18 23:53:26

智慧医疗能源事业线深度画像分析（上）

引言 医疗行业作为现代社会的关键基础设施，其能源消耗与环境影响正日益受到关注。随着全球"双碳"目标的推进和可持续发展理念的深入，智慧医疗能源事业线应运而生，致力于通过创新技术与管理方案，重构医疗领域的能源使用模式。这一事业线融合了能源管理、可持续发…...

编程新知 2025/9/19 1:12:53

8k长序列建模，蛋白质语言模型Prot42仅利用目标蛋白序列即可生成高亲和力结合剂

蛋白质结合剂&#xff08;如抗体、抑制肽&#xff09;在疾病诊断、成像分析及靶向药物递送等关键场景中发挥着不可替代的作用。传统上&#xff0c;高特异性蛋白质结合剂的开发高度依赖噬菌体展示、定向进化等实验技术&#xff0c;但这类方法普遍面临资源消耗巨大、研发周期冗长…...

编程新知 2025/9/18 12:56:51

Auto-Coder使用GPT-4o完成：在用TabPFN这个模型构建一个预测未来3天涨跌的分类任务

通过akshare库&#xff0c;获取股票数据&#xff0c;并生成TabPFN这个模型 可以识别、处理的格式&#xff0c;写一个完整的预处理示例&#xff0c;并构建一个预测未来 3 天股价涨跌的分类任务 用TabPFN这个模型构建一个预测未来 3 天股价涨跌的分类任务&#xff0c;进行预测并输…...

编程新知 2025/9/12 10:25:58

基于数字孪生的水厂可视化平台建设：架构与实践

分享大纲&#xff1a; 1、数字孪生水厂可视化平台建设背景 2、数字孪生水厂可视化平台建设架构 3、数字孪生水厂可视化平台建设成效 近几年&#xff0c;数字孪生水厂的建设开展的如火如荼。作为提升水厂管理效率、优化资源的调度手段&#xff0c;基于数字孪生的水厂可视化平台的…...

编程新知 2025/8/24 3:48:04

Java-41 深入浅出 Spring - 声明式事务的支持 事务配置 XML模式 XML+注解模式

点一下关注吧&#xff01;&#xff01;&#xff01;非常感谢&#xff01;&#xff01;持续更新&#xff01;&#xff01;&#xff01; &#x1f680; AI篇持续更新中&#xff01;&#xff08;长期更新&#xff09; 目前2025年06月05日更新到&#xff1a; AI炼丹日志-28 - Aud…...

编程新知 2025/9/18 2:15:00

CMake 从 GitHub 下载第三方库并使用

有时我们希望直接使用 GitHub 上的开源库，而不想手动下载、编译和安装。 可以利用 CMake 提供的 FetchContent 模块来实现自动下载、构建和链接第三方库。 FetchContent 命令官方文档✅ 示例代码 我们将以 fmt 这个流行的格式化库为例，演示如何： 使用 FetchContent 从 GitH…...

编程新知 2025/9/2 19:31:47

用docker来安装部署freeswitch记录

今天刚才测试一个callcenter的项目&#xff0c;所以尝试安装freeswitch 1、使用轩辕镜像 - 中国开发者首选的专业 Docker 镜像加速服务平台 编辑下面/etc/docker/daemon.json文件为 {"registry-mirrors": ["https://docker.xuanyuan.me"] }同时可以进入轩…...

编程新知 2025/8/23 22:05:50

使用Spring AI和MCP协议构建图片搜索服务

目录 使用Spring AI和MCP协议构建图片搜索服务 引言 技术栈概览 项目架构设计 架构图 服务端开发 1. 创建Spring Boot项目 2. 实现图片搜索工具 3. 配置传输模式 Stdio模式&#xff08;本地调用&#xff09; SSE模式&#xff08;远程调用&#xff09; 4. 注册工具提…...

编程新知 2025/9/4 1:57:51

快刀集(1): 一刀斩断视频片头广告

一刀流&#xff1a;用一个简单脚本&#xff0c;秒杀视频片头广告&#xff0c;还你清爽观影体验。 1. 引子 作为一个爱生活、爱学习、爱收藏高清资源的老码农&#xff0c;平时写代码之余看看电影、补补片&#xff0c;是再正常不过的事。 电影嘛&#xff0c;要沉浸&#xff0c;…...

编程新知 2025/9/3 5:42:53