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

vue组件

news 文章来源：https://blog.csdn.net/qq_48164590/article/details/129002338 2024/11/29 20:58:54

文章目录

      • 1.vue组件
      • 2.非单文件组件
          • 2.1组件创建
          • 2.2祖册组件
          • 2.3使用组件
      • 3.组件的嵌套
          • 3.1 school组件嵌套student
          • 3.2 app组件嵌套school和hellozujain
          • 3.3 vm里面引入app组件
      • 4.VueCompent
      • 5.单文件组件

1.vue组件

组件是实现应用中功能的局部代码和资源的集合

在这里插入图片描述

2.非单文件组件

2.1组件创建

注意：template要用div大盒子包裹

 // 创建组件const school = Vue.extend({template: `<div><h1>{{schoolname}}</h1><h2>{{adress}}</h2></div>`,data() {return {schoolname: "新理工",adress: "阿克苏",};},});
2.2祖册组件
//   全局注册组件Vue.component("school", school);new Vue({el: "#app",// 引入组件(局部)components: {school: school,},});
2.3使用组件
  <div id="app"><school></school></div>

3.组件的嵌套

在vue中vm的组件有app管理，在app组件内部引入定义的school和student组件

3.1 school组件嵌套student
 // 创建组件const school = Vue.extend({template: `<div><h1>{{schoolname}}</h1><h2>{{adress}}</h2><student></student></div>`,data() {return {schoolname: "新理工",adress: "阿克苏",};},// 祖册组件components: {student,},});
3.2 app组件嵌套school和hellozujain
 //创建app管理vm的组件const app = Vue.extend({// 使用template: `<div><school></school><hello></hello></div>`,// 祖册组件components: {school,hello,},});
3.3 vm里面引入app组件
 new Vue({el: "#app",template: ` <app></app>`,// 引入组件components: {app,},});

在vm里面通过引入app组件，
其中app组件是整个页面里引入组件的管理者。

4.VueCompent

1.在组件配置中，data函数，methods函数等，他们的this均是vuecompent实例对象。
2.在new data的配置中，，data函数，methods函数等，他们的this均是vue的实例对象。
3.每次调用组件返回的都是一个新的VueCompent实例对象。

在这里插入图片描述

5.单文件组件

school组件

<template><div><h1 class="demo">{{schoolname}}</h1><h2>{{adress}}</h2></div>
</template><script>export default {name:'School',data() {return {schoolname: "新理工",adress: "阿克苏",};},}//   默认暴露//   export default school
</script><style lang="scss">.demo{background-color: green;}
</style>

App组件

<template> <div><School></School><Student></Student></div>
</template><script>
import School from './School.vue'
import Student from './Student.vue'
export default {components: { School },name:'App',comments:{School,Student}
}
</script><style></style>

main.js

import App from './App.Vue'new Vue({el:"#app",template:`<App></App>`,comments:{App}
})

index.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></head><body><div id="app"></div><script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script><script src="./main.js"></script></body>
</html>

相关文章：

vue组件

文章目录1.vue组件2.非单文件组件2.1组件创建2.2祖册组件2.3使用组件3.组件的嵌套3.1 school组件嵌套student3.2 app组件嵌套school和hellozujain3.3 vm里面引入app组件4.VueCompent5.单文件组件1.vue组件 组件是实现应用中功能的局部代码和资源的集合 2.非单文件组件 2.1组件…...

编程日记 2023/5/27 15:10:52

让mybatis-plus支持null字段全量更新

文章目录背景方案一使用方案二方案二原理介绍背景 如果仅仅只是标题所列的目标&#xff0c;那么mybatis-plus 中可以通过设置 mybatis-plus.global-config.db-config.field-strategyignored 来忽略null判断&#xff0c;达到实体字段为null时也可以更新数据为null 但是一旦使用…...

编程日记 2023/5/30 11:16:15

MASA Stack 1.0 发布会讲稿——生态篇

2022年运营回顾 贡献者 首先感谢贡献者们为MASA Stack社区所作的积极贡献&#xff0c;这些贡献者给我们提出了很多宝贵的建议&#xff0c;更是积极的提交PR帮助我们一起让产品更健壮&#xff0c;更完善&#xff0c;还在各种场合推广我们的解决方案&#xff0c;非常给力&#x…...

编程日记 2023/5/27 15:12:34

华为OD机试 - 火星文计算2（JS）| 真题+思路++考点+代码

火星文计算2 题目 已知火星人使用的运算符号为#;$ 其与地球人的等价公式如下 x#y4*x3*y2 x$y2*xy3 x y是无符号整数 地球人公式按照c语言规则进行计算 火星人公式中#符优先级高于$ 相同的运算符按从左到右的顺序运算 输入 火星人字符串表达式结尾不带回车换行 输入的字符串…...

编程日记 2023/5/13 23:01:07

从春节后央行的首批罚单，看金融反欺诈反洗钱的复杂性

目录 个人信息保护的问题 征信管理的问题 反洗钱与反欺诈的问题 金融欺诈愈加复杂多变 金融机构如何增强反欺诈反洗钱 春节后&#xff0c;央行公示首批罚单。其中&#xff0c;厦门银行被中国人民银行福州中心支行给予警告&#xff0c;并没收违法所得767.17元&#xff0c;处…...

编程日记 2023/5/30 11:17:39

【Hello Linux】Linux工具介绍 （yum vim）

作者&#xff1a;小萌新 专栏&#xff1a;Linux 作者简介&#xff1a;大二学生 希望能和大家一起进步&#xff01; 本篇博客简介&#xff1a;介绍Linux的常用工具 yum和vim Linux工具介绍Linux中的软件管理工具 -- yum在windows下安装软件的方式在Linux下安装软件的方式认识yum…...

编程日记 2023/5/24 22:07:25

多种充电模式_手持无线充气泵方案

一、手持无线充气泵手持无线充气泵是一个通过锂电池供电达到无需插电就能使用的便携式充气泵&#xff0c;它的适用场景大部分是为身处户外没有办法接通电源的人而设计的&#xff0c;方便人们的出行也可解燃眉之急。不仅如此&#xff0c;为预防手持无线充气泵的锂电池电量用完而…...

编程日记 2023/5/17 11:16:33

【网络基础】DNS是什么

本文不会直接引入复杂枯燥概念&#xff0c;用形象例子通俗讲解&#xff0c;旨在入门理解。 DNS作用 DNS是用来做域名解析的。 相当于把网址翻译成实际ip地址&#xff0c;供其他设备访问。 一个例子 有一个网站的服务器IP地址为1.1.1.1&#xff0c;用电脑访问该网站的话只需…...

编程日记 2023/5/12 20:35:46

二叉树的性质与推导及常见习题整理

目录 一、性质推导 二、常见的二叉树性质习题 1. 某二叉树共有 399 个结点&#xff0c;其中有 199 个度为 2 的结点&#xff0c;则该二叉树中的叶子结点数为&#xff08;&#xff09;。 2.在具有 2n 个结点的完全二叉树中&#xff0c;叶子结点个数为&#xff08;&#xff…...

编程日记 2023/5/13 23:02:31

亚马逊卖家测评补单的重要性和缺点

对于亚马逊、沃尔玛、ebay、wish、newegg、速卖通、阿里国际站、shopee、lazada、temu、乐天、toktok、joom、ozon等卖家来说&#xff0c;测评补单是一个比较常见的话题&#xff0c;因为测评可以给自己产品留下优质的评价&#xff0c;让国外真实买家更加明确&#xff0c;便捷的…...

编程日记 2023/5/17 23:17:47

Java类和对象超详细整理，适合新手入门

目录 一、驼峰命名法 二、Java注释 三、转义符 四、Java程序它的基本结构是什么&#xff1f; 五、Java中的类 六、创建类 七、定义main方法 八、执行代码输出语句 九、Java中的对象 十、创建对象 十一、类与对象的关系 一、驼峰命名法 包名&#xff1a;多单词组成所…...

编程日记 2023/5/28 1:21:56

MySQL：连explain的type类型都没搞清楚，怎敢说精通SQL优化？

我们在使用SQL语句查询表数据时&#xff0c;提前用explain进行语句分析是一个非常好的习惯。通过explain输出sql的详细执行信息&#xff0c;就可以针对性的进行sql优化。 今天我们来分析一下&#xff0c;在explain中11种不同type代表的含义以及其应用场景。 1&#xff0c;sys…...

编程日记 2023/5/27 15:13:12

6.11 极分解

文章目录计算方法代码实现计算方法 一个复数可以写成极坐标形式:zreiθzre^{i\theta}zreiθ.这种分解&#xff0c;左边代表长度&#xff0c;右边代表角度。由此为灵感来源&#xff0c;前人对矩阵也有类似的分解。就是猜想一个线性变换对矩阵的作用&#xff0c;是不是可以分解为…...

编程日记 2023/5/17 11:17:42

Spring、SpringMVC、Shiro、Maven

一、SpringSpring是一个为了解决企业应用程序开发复杂性而创建的开源框架&#xff0c;其核心是IOC–控制反转、AOP–面向切面编程。框架的主要优势之一就是其分层架构&#xff08;WEB层&#xff08;springMvc&#xff09;、业务层&#xff08;Ioc&#xff09;、持久层&#xff…...

编程日记 2023/5/12 9:45:42

element-plus 使用笔记

npm install element-plus --save自动导入 npm install -D unplugin-vue-components unplugin-auto-import// vite.config.jsimport AutoImport from unplugin-auto-import/vite import Components from unplugin-vue-components/vite import { ElementPlusResolver } from …...

编程日记 2023/5/27 15:15:17

《蓝桥杯每日一题》 前缀和·Acwing 3956. 截断数组

1.题目https://www.acwing.com/problem/content/3959/给定一个长度为 n 的数组a1,a2,…,an。现在&#xff0c;要将该数组从中间截断&#xff0c;得到三个非空子数组。要求&#xff0c;三个子数组内各元素之和都相等。请问&#xff0c;共有多少种不同的截断方法&#xff1f;输入…...

编程日记 2023/5/12 5:36:16

促进关键软件高层次人才培养：平凯星辰与华东师范大学签订联合博士培养合作协议

2022 年年初&#xff0c;平凯星辰入选首批工信部教育部支持联合培养国家关键软件高层次人才计划。该计划旨在探索关键软件产教融合育人模式&#xff0c;超常规加快培养一批急需高层次人才&#xff0c;以及探索关键软件联合技术攻关新模式。2022 年年底&#xff0c;在该计划下 平…...

编程日记 2023/5/13 23:04:28

Java程序员的日常——经验贴

关于文件的解压和压缩 如果你的系统不支持tar -z命令 前往讨论 如果是古老的Unix系统&#xff0c;可能并不认识tar -z命令&#xff0c;因此如果你想要压缩或者解压tar.gz的文件&#xff0c;就需要使用gzip或者gunzip以及tar命令了。 关于tar.gz可以这么理解&#xff0c;tar结…...

编程日记 2023/5/25 16:53:54

电商API社区，商品数据，关键词搜索等

1. 需要做的事情 l 商品详情页实现 1、商品查询服务事项 2、商品详情展示 3、添加缓存 2. 实现商品详情页功能 2.1. 功能分析 1、Taotao-portal接收页面请求&#xff0c;接收到商品id。 2、调用taotao-rest提供的商品详情的服务&#xff0c;把商品id作为参数传递给服务。接…...

编程日记 2023/5/30 11:18:54

LEADTOOLS 22.0.6 UPDATE-Crack

OCR SDK 库 许多 OCR 增强功能 LEAD 行业领先的人工智能 OCR SDK 在以下方面获得了显着的识别优化&#xff1a;斜体、大写和小写字母、文本行组装和单词构建、列检测、基线检测和文本行分割。 LEADTOOLS为.NET 6、. NET Framework、Xamarin、UWP、C#、VB、C/C、Java、Objective…...

编程日记 2023/5/27 15:15:42

什么是OJ？ 东方博宜题库部分题解

什么是OJ ？ Online Judge 比如这样的：Home - 一本通OJ Q:这个在线裁判系统使用什么样的编译器和编译选项? A:系统运行于Debian/Ubuntu Linux. 使用GNU GCC/G++ 作为C/C++编译器, C: gcc Main.c -o Main -fno-asm -O2 -Wall -lm --static -std=c99 -DONLINE_JUDGE C++: g++ …...

编程日记 2023/5/23 7:56:59

企业工程项目管理系统源码的各模块及其功能点清单

工程项目各模块及其功能点清单 一、系统管理 1、数据字典&#xff1a;实现对数据字典标签的增删改查操作 2、编码管理&#xff1a;实现对系统编码的增删改查操作 3、用户管理&#xff1a;管理和查看用户角色 4、菜单管理&#xff1a;实现对系统菜单的增删改查操…...

编程日记 2023/5/12 9:46:49

【电商开发手册】订单-下单

下单需求 所谓下单&#xff0c;本质上就是买卖双方通过确认一系列信息并且签订电子合同的过程 在电商平台的下单过程中&#xff0c;也需要确定买卖双方的一系列信息&#xff1a; 买方&#xff1a;用户确认收货地址、支付方式、配送方式等等 卖方&#xff1a;卖方需要进行供…...

编程日记 2023/5/23 7:58:18

数据结构 - 优先级队列（堆）

文章目录前言1.介绍优先级队列2. 认识堆3. 实现优先级队列3.1 了解优先级队列的构造方法&#xff1a;3.2 使用优先级队列解决问题&#xff1a;总结前言 本篇PriorityQueue优先级队列的介绍其底层是堆&#xff0c;关于堆的认识&#xff0c;使用优先级队列能解决的一些问题&…...

编程日记 2023/5/14 8:11:31

PDF内容提取器：ByteScout PDF Extractor SDK Crack

ByteScout PDF Extractor SDK – 用于 PDF 到 JSON、PDF 到 Excel、CSV、XML、从 .NET 和 ASP.NET 从 PDF 中提取文本的 PDF 提取器库 ByteScout PDF Extractor SDK – 用于 PDF 到 JSON、PDF 到 Excel、CSV、XML、从 .NET 和 ASP.NET 从 PDF 中提取文本的 PDF 提取器库​ ​ ​…...

编程日记 2023/5/23 7:59:40

字母板上的路径[提取公共代码，提高复用率]

提取公共代码前言一、字母版上的路径二、贪心1、idea2、go3、代码不断拆分复用的过程总结参考文献前言 写代码&#xff0c;在提高效率的同时&#xff0c;要方便人看&#xff0c;这个人包括自己。大函数要拆分成一些小函数&#xff0c;让每个函数的宏观目的和步骤都显得清晰&am…...

编程日记 2023/5/15 21:52:39

c# winform错误大全

c# winform 错误大全为了实现安装包安装完成后&#xff0c;启动程序。System.BadImageFormatException: 未能加载文件或程序集“file:///C:\xxxxxxxxx\xxxxxxx.exe”或它的某一个依赖项。生成此程序集的运行时比当前加载的运行时新&#xff0c;无法加载此程The version of the …...

编程日记 2023/5/30 11:20:21

AI_News周刊：第一期

2023.02.06—2023.02.12 关于ChatGPT的前言&#xff1a; 在去年年末&#xff0c;OpenAI的ChatGPT在技术圈已经火了一次&#xff0c;随着上周它的二次出圈&#xff0c;ChatGPT算得上是人工智能领域的一颗明星&#xff0c;它在聊天机器人领域有着不可忽视的影响力。其准确、快速…...

编程日记 2023/5/12 5:39:27

搭建mysql主从复制

前言&#xff1a; &#x1f44f; 作者简介&#xff1a;我是笑霸final&#xff0c;一名热爱技术的在校学生。 &#x1f4dd; 个人主页&#xff1a;个人主页1 || 笑霸final的主页2 &#x1f4d5; 系列专栏&#xff1a;数据库 &#x1f4e7; 如果文章知识点有错误的地方&#xff0…...

编程日记 2023/5/17 23:19:04

内存溢出、内存泄露的概述及常见情形

内存溢出&#xff08;OutofMemoryError&#xff09; 简述 java doc 中对 Out Of Memory Error 的解释是&#xff0c;没有空闲内存&#xff0c;并且垃圾收集器也无法提供更多内存。 JVM 提供的内存管理机制和自动垃圾回收极大的解放了用户对于内存的管理&#xff0c;由于 GC&…...

编程日记 2023/5/27 15:19:40

一元云购网站建设模块/南宁网络推广培训机构

有数据显示&#xff0c;现在的职场人&#xff0c;跳槽越来越频繁&#xff0c;95后平均7个月就离职。 对于面试官来说&#xff0c;一个跳槽过于频繁的人总是存在潜在风险&#xff0c;比如抗压力差、稳定性不好、心不定这山望着那山高、职业规划不清晰等等。 我一直强调一个观点…...

编程日记 2024/11/29 20:03:39

海外网站太慢/广告优化师发展前景

美颜相机---AI 发型管家效果的算法解析 ####前言 本文为去年写的Gitchat文章&#xff0c;由于Gitchat有时间版权限制&#xff0c;一年时间&#xff0c;所以今天才能发布到CSDN博客上来。 本文为大家介绍美颜相机中 AI 发型管家效果的算法解析&#xff0c;当然&#xff0c;本…...

编程日记 2024/11/29 13:55:48

做柜子好的设计网站/关键词挖掘工具站

本文是一篇从合天网安实验室进行实验操作的笔记&#xff0c;一次非常简单地从JS中获取到flag的操作。实验地址&#xff1a;实验:简单的JS(合天网安实验室)​www.hetianlab.com1. 进入题目页(10.1.1.219:20123)看到一段话&#xff0c;还有一句很明显的提示语句“The evil url is…...

编程日记 2024/11/29 13:27:54

旅游网站的制作/美食软文300字

Part 1消息队列 介绍消息队列技术的背景&#xff0c;包括使用场景和消息队列的功能特点&#xff0c;并设计了一个简单的消息队列。 1.1 系统间通信技术介绍1.2 为何要用消息队列1.3 消息队列的功能特点1.4 设计一个简单的消息队列 Part 2消息协议 介绍消息队列中常用的消息协议…...

编程日记 2024/11/29 12:41:27

那个视频网站可以做桌面背景/腾讯域名注册官网

google 单元测试相关 http://code.google.com/p/googlemock/wiki/CookBook http://code.google.com/p/googletest/wiki/AdvancedGuide#Teaching_Google_Test_How_to_Print_Your_Values 进展&#xff1a; Delegating Calls to a Parent Class...

编程日记 2024/11/29 12:33:24

如何查到网站是谁做的/网络营销的策划方案

https://www.if-not-true-then-false.com/2015/fedora-nvidia-guide/ https://javacodes.cn/322.html https://negativo17.org/nvidia-driver/转载于:https://www.cnblogs.com/MimiSnowing/p/7237471.html...

编程日记 2024/11/29 9:54:37