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

Vue组件-非单文本组件

news 2025/11/9 14:34:11

非单文本组件(用的少)

在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

wordpress后台更新后 前端没变化的解决方法

使用siteground主机的wordpress网站&#xff0c;会出现更新了网站内容和修改了php模板文件、js文件、css文件、图片文件后&#xff0c;网站没有变化的情况。 不熟悉siteground主机的新手&#xff0c;遇到这个问题&#xff0c;就很抓狂&#xff0c;明明是哪都没操作错误&#x…...

编程新知 2025/11/8 21:56:15

(LeetCode 每日一题) 3442. 奇偶频次间的最大差值 I (哈希、字符串)

题目&#xff1a;3442. 奇偶频次间的最大差值 I 思路 &#xff1a;哈希&#xff0c;时间复杂度0(n)。 用哈希表来记录每个字符串中字符的分布情况&#xff0c;哈希表这里用数组即可实现。 C版本&#xff1a; class Solution { public:int maxDifference(string s) {int a[26]…...

编程新知 2025/11/9 2:03:04

（二）TensorRT-LLM | 模型导出（v0.20.0rc3）

0. 概述 上一节 对安装和使用有个基本介绍。根据这个 issue 的描述&#xff0c;后续 TensorRT-LLM 团队可能更专注于更新和维护 pytorch backend。但 tensorrt backend 作为先前一直开发的工作&#xff0c;其中包含了大量可以学习的地方。本文主要看看它导出模型的部分&#x…...

编程新知 2025/11/7 21:03:40

大语言模型如何处理长文本？常用文本分割技术详解

为什么需要文本分割？ 引言：为什么需要文本分割？一、基础文本分割方法1. 按段落分割（Paragraph Splitting）2. 按句子分割（Sentence Splitting）二、高级文本分割策略3. 重叠分割（Sliding Window）4. 递归分割（Recursive Splitting）三、生产级工具推荐5. 使用LangChain的…...

编程新知 2025/10/20 5:24:23

ffmpeg（四）：滤镜命令

FFmpeg 的滤镜命令是用于音视频处理中的强大工具&#xff0c;可以完成剪裁、缩放、加水印、调色、合成、旋转、模糊、叠加字幕等复杂的操作。其核心语法格式一般如下&#xff1a; ffmpeg -i input.mp4 -vf "滤镜参数" output.mp4或者带音频滤镜&#xff1a; ffmpeg…...

编程新知 2025/11/9 11:32:13

零基础在实践中学习网络安全-皮卡丘靶场（第九期-Unsafe Fileupload模块）（yakit方式）

本期内容并不是很难&#xff0c;相信大家会学的很愉快&#xff0c;当然对于有后端基础的朋友来说&#xff0c;本期内容更加容易了解&#xff0c;当然没有基础的也别担心&#xff0c;本期内容会详细解释有关内容 本期用到的软件&#xff1a;yakit&#xff08;因为经过之前好多期…...

编程新知 2025/11/7 20:02:58

HDFS分布式存储 zookeeper

hadoop介绍 狭义上hadoop是指apache的一款开源软件 用java语言实现开源框架&#xff0c;允许使用简单的变成模型跨计算机对大型集群进行分布式处理&#xff08;1.海量的数据存储 2.海量数据的计算&#xff09;Hadoop核心组件 hdfs&#xff08;分布式文件存储系统&#xff09;&a…...

编程新知 2025/11/7 21:04:29

初探Service服务发现机制

1.Service简介 Service是将运行在一组Pod上的应用程序发布为网络服务的抽象方法。 主要功能&#xff1a;服务发现和负载均衡。 Service类型的包括ClusterIP类型、NodePort类型、LoadBalancer类型、ExternalName类型 2.Endpoints简介 Endpoints是一种Kubernetes资源&#xf…...

编程新知 2025/11/7 7:59:32

【C++特殊工具与技术】优化内存分配(一)：C++中的内存分配

目录 一、C 内存的基本概念​ 1.1 内存的物理与逻辑结构​ 1.2 C 程序的内存区域划分​ 二、栈内存分配​ 2.1 栈内存的特点​ 2.2 栈内存分配示例​ 三、堆内存分配​ 3.1 new和delete操作符​ 4.2 内存泄漏与悬空指针问题​ 4.3 new和delete的重载​ 四、智能指针…...

编程新知 2025/11/8 5:25:23

elementUI点击浏览table所选行数据查看文档

项目场景&#xff1a; table按照要求特定的数据变成按钮可以点击 解决方案&#xff1a; <el-table-columnprop"mlname"label"名称"align"center"width"180"><template slot-scope"scope"><el-buttonv-if&qu…...

编程新知 2025/11/9 11:41:11