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

Vue组件-非单文本组件

news 2025/11/9 16:55:10

非单文本组件(用的少)

在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

【根据当天日期输出明天的日期(需对闰年做判定)。】2022-5-15

缘由根据当天日期输出明天的日期(需对闰年做判定)。日期类型结构体如下&#xff1a; struct data{ int year; int month; int day;};-编程语言-CSDN问答 struct mdata{ int year; int month; int day; }mdata; int 天数(int year, int month) {switch (month){case 1: case 3:…...

编程新知 2025/9/7 11:32:34

2024年赣州旅游投资集团社会招聘笔试真

2024年赣州旅游投资集团社会招聘笔试真 题 ( 满 分 1 0 0 分 时 间 1 2 0 分 钟 ) 一、单选题(每题只有一个正确答案，答错、不答或多答均不得分) 1.纪要的特点不包括()。 A.概括重点 B.指导传达 C. 客观纪实 D.有言必录 【答案】: D 2.1864年，()预言了电磁波的存在，并指出…...

编程新知 2025/10/18 21:05:27

什么是库存周转？如何用进销存系统提高库存周转率？

你可能听说过这样一句话&#xff1a; “利润不是赚出来的&#xff0c;是管出来的。” 尤其是在制造业、批发零售、电商这类“货堆成山”的行业&#xff0c;很多企业看着销售不错&#xff0c;账上却没钱、利润也不见了&#xff0c;一翻库存才发现&#xff1a; 一堆卖不动的旧货…...

编程新知 2025/11/8 4:08:36

Spring数据访问模块设计

前面我们已经完成了IoC和web模块的设计&#xff0c;聪明的码友立马就知道了&#xff0c;该到数据访问模块了&#xff0c;要不就这俩玩个6啊&#xff0c;查库势在必行&#xff0c;至此&#xff0c;它来了。 一、核心设计理念 1、痛点在哪 应用离不开数据&#xff08;数据库、No…...

编程新知 2025/11/7 14:06:19

Maven 概述、安装、配置、仓库、私服详解

目录 1、Maven 概述 1.1 Maven 的定义 1.2 Maven 解决的问题 1.3 Maven 的核心特性与优势 2、Maven 安装 2.1 下载 Maven 2.2 安装配置 Maven 2.3 测试安装 2.4 修改 Maven 本地仓库的默认路径 3、Maven 配置 3.1 配置本地仓库 3.2 配置 JDK 3.3 IDEA 配置本地 Ma…...

编程新知 2025/11/7 19:35:50

如何应对敏捷转型中的团队阻力

应对敏捷转型中的团队阻力需要明确沟通敏捷转型目的、提升团队参与感、提供充分的培训与支持、逐步推进敏捷实践、建立清晰的奖励和反馈机制。其中&#xff0c;明确沟通敏捷转型目的尤为关键&#xff0c;团队成员只有清晰理解转型背后的原因和利益&#xff0c;才能降低对变化的…...

编程新知 2025/11/9 5:39:25

Windows 下端口占用排查与释放全攻略

Windows 下端口占用排查与释放全攻略​ 在开发和运维过程中&#xff0c;经常会遇到端口被占用的问题&#xff08;如 8080、3306 等常用端口&#xff09;。本文将详细介绍如何通过命令行和图形化界面快速定位并释放被占用的端口&#xff0c;帮助你高效解决此类问题。​ 一、准…...

编程新知 2025/10/5 19:22:12

Appium下载安装配置保姆教程（图文详解）

目录 一、Appium软件介绍 1.特点 2.工作原理 3.应用场景 二、环境准备 安装 Node.js 安装 Appium 安装 JDK 安装 Android SDK 安装Python及依赖包 三、安装教程 1.Node.js安装 1.1.下载Node 1.2.安装程序 1.3.配置npm仓储和缓存 1.4. 配置环境 1.5.测试Node.j…...

编程新知 2025/11/9 11:18:51

2025.6.9总结（利与弊）

凡事都有两面性。在大厂上班也不例外。今天找开发定位问题&#xff0c;从一个接口人不断溯源到另一个 接口人。有时候&#xff0c;不知道是谁的责任填。将工作内容分的很细&#xff0c;每个人负责其中的一小块。我清楚的意识到&#xff0c;自己就是个可以随时替换的螺丝钉&…...

编程新知 2025/10/14 3:13:44

shell脚本质数判断

shell脚本质数判断 shell输入一个正整数,判断是否为质数(素数&#xff09;shell求1-100内的质数shell求给定数组输出其中的质数 shell输入一个正整数,判断是否为质数(素数&#xff09; 思路&#xff1a; 1:1 2:1 2 3:1 2 3 4:1 2 3 4 5:1 2 3 4 5-------> 3:2 4:2 3 5:2 3…...

编程新知 2025/10/21 18:57:29