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

Vue2学习（组件的使用）

news 文章来源：https://blog.csdn.net/weixin_47401101/article/details/134889586 2024/9/20 18:35:37

Vue中使用组件的三个步骤：

一、定义组件(或者叫创建组件)

使用Vue.extend(options)创建，其中options和new Vue(options)时传入的那个options几乎一样，但也有点区别； 区别如下：

1.el不要写，为什么？ ——— 最终所有的组件都要经过一个vm的管理，由vm中的el决定服务哪个容器。 2.data必须写成函数，为什么？ ———— 避免组件被复用时，数据存在引用关系。

备注：使用template可以配置组件结构。

二、注册组件

1.局部注册：靠new Vue的时候传入components选项；

2.全局注册：靠Vue.component('组件名',组件)；

 三、使用组件(写组件标签)

学习示例：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>数据绑定</title><script type="text/javascript" src="../js/vue.js"></script>
</head>
<body><!-- 准备好一个容器 --><div id="root"><h2>{{msg}}</h2><hr><!-- 第三步：编写组件标签 --><school></school><hr><!-- 第三步：编写组件标签 --><student></student></div>
</body>
<script type="text/javascript">Vue.config.productionTip = false// 第一步：创建学校组件const school = Vue.extend({template:`<div><h2>学校名称：{{schoolName}}</h2><h2>学校地址：{{address}}</h2></div>`,data(){return {schoolName:"太平洋",address:"北京"}}})// 第一步：创建学生组件const student = Vue.extend({template:`<div><h2>学生姓名：{{studentName}}</h2><h2>学生年龄：{{age}}</h2></div>`,data(){return {studentName:"法外狂徒",age:41}}})new Vue({el:"#root",data:{msg:"你好啊！"},components:{// 第二步：注册组件(局部注册)school:school,student:student,}})</script>
</html>

                                  

相关文章：

Vue2学习（组件的使用）

Vue中使用组件的三个步骤&#xff1a; 一、定义组件(或者叫创建组件) 使用Vue.extend(options)创建&#xff0c;其中options和new Vue(options)时传入的那个options几乎一样&#xff0c;但也有点区别&#xff1b; 区别如下&#xff1a; 1.el不要写&#xff0c;为什么&#x…...

编程日记 2023/12/9 5:31:58

基于Spring、SpringMVC、MyBatis开发的游乐场管理系统

文章目录 项目介绍主要功能截图：部分代码展示设计总结项目获取方式🍅 作者主页：超级无敌暴龙战士塔塔开 🍅 简介：Java领域优质创作者🏆、 简历模板、学习资料、面试题库【关注我，都给你】 🍅文末获取源码联系🍅 项目介绍 基于Spring、SpringMVC、MyBatis开发的游…...

编程日记 2023/12/9 5:30:57

数据清洗、特征工程和数据可视化、数据挖掘与建模的应用场景

1.5 数据清洗、特征工程和数据可视化、挖掘建模的应用场景 视频为《Python数据科学应用从入门到精通》张甜 杨维忠 清华大学出版社一书的随书赠送视频讲解1.5节内容。本书已正式出版上市&#xff0c;当当、京东、淘宝等平台热销中&#xff0c;搜索书名即可。内容涵盖数据科学应…...

编程日记 2023/12/9 5:29:55

Qt简介、工程文件分离、创建Qt工程、Qt的帮助文档

QT 简介 core&#xff1a;核心模块&#xff0c;非图形的接口类&#xff0c;为其它模块提供支持 gui&#xff1a;图形用户接口&#xff0c;qt5之前 widgets&#xff1a;图形界面相关的类模块 qt5之后的 database&#xff1a;数据库模块 network&#xff1a;网络模块 QT 特性 开…...

编程日记 2023/12/9 5:28:54

机器学习与低代码开发：创新驱动的双剑合璧

引言 随着科技的日新月异&#xff0c;机器学习和低代码开发已经成为引领技术行业变革的两大重要趋势。机器学习通过模拟人类的学习方式&#xff0c;让计算机具备了自我学习和预测的能力&#xff0c;打破了传统计算机程序的局限性。而低代码开发则以简化软件开发过程为目标&…...

编程日记 2023/12/9 5:27:53

企业博客SEO：优化SOP，助您提升搜索引擎可见性

企业博客是互联网时代企业与用户沟通的重要渠道之一&#xff0c;引流成本也比较低。然而&#xff0c;依然有企业会处在3种状态&#xff1a; 1. 有博客&#xff0c;但内容更新不积极或搁置 2. 有博客&#xff0c;但内容散乱 3. 根本就没有博客 如果是这几种状态&#xff0c;…...

编程日记 2023/12/9 5:26:53

[HITCON 2017]SSRFme perl语言的 GET open file 造成rce

这里记录学习一下 perl的open缺陷 这里首先本地测试一下 发现这里使用open打开 的时候 如果通过管道符 就会实现命令执行 然后这里注意的是 perl 中的get 调用了 open的参数 所以其实我们可以通过管道符实现命令执行 然后这里如果file可控那么就继续可以实现命令执行 这里就…...

编程日记 2023/12/9 5:25:52

华为配置Smart Link主备备份示例

定义 Smart Link&#xff0c;又叫做备份链路。一个Smart Link由两个接口组成&#xff0c;其中一个接口作为另一个的备份。Smart Link常用于双上行组网&#xff0c;提供可靠高效的备份和快速的切换机制。 Monitor Link是一种接口联动方案&#xff0c;它通过监控设备的上行接口…...

编程日记 2023/12/9 5:24:51

harmonyOS开发技巧（一）——封装hilog日志

1. 创建sharedLibrary共享hsp包commonLib&#xff1a;功能工具类。 import hilog from ohos.hilog;class Logger {private DOMAIN: number 0x0000;private APP_NAME: string Myapplication;public info(tag: string, ...args: string[]) {hilog.info(this.DOMAIN, [${this.A…...

编程日记 2023/12/9 5:23:50

npm、yarn常用命令

1、设置npm路径 #全局安装路径 npm config set prefix "D:\Program Files\nodejs\node_global" #缓存路径 npm config set cache "D:\Program Files\nodejs\node_cache"2、设置镜像 #1,淘宝镜像源 npm config set registry https://registry.npmmirror.…...

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

编译和使用WPS-ghrsst-to-intermediate生成SST

一、下载 V1.0 https://github.com/bbrashers/WPS-ghrsst-to-intermediate/tree/masterV1.5&#xff08;使用过程报错&#xff0c;原因不详&#xff0c;能正常使用的麻烦告知一下方法&#xff09; https://github.com/dmitryale/WPS-ghrsst-to-intermediate二、修改makefile…...

编程日记 2023/12/9 5:21:48

通过静态HTTP实现负载均衡

在当今的互联网环境中&#xff0c;随着用户数量的不断增加和业务需求的不断扩大&#xff0c;单台服务器往往无法承受所有的访问压力。为了确保网站的可用性和性能&#xff0c;负载均衡成为了一种常见的解决方案。本文将探讨如何通过静态HTTP实现负载均衡&#xff0c;以提升网站…...

编程日记 2023/12/9 5:20:47

Python开发运维：Python常见异常类型

目录 一、理论 1.异常 一、理论 1.异常 &#xff08;1&#xff09;概念 异常是程序因为某种原因无法正常工作了&#xff0c;比如缩进错误、缺少软件包、环境 错误、连接超时等都会引发异常。 一个健壮的程序应该把所能预知的异常都应做相应的处理&#xff0c;保障程序长期运…...

编程日记 2023/12/9 5:19:47

HarmonyOS学习 第1节 DevEco Studio配置

俗话说的好&#xff0c;工欲善其事,必先利其器。我们先下载官方的开发工具DevEco Studio. 下载完成后&#xff0c;进行安装。 双击DevEco Studio&#xff0c;点击Next按照指引完成安装 重新启动DevEco&#xff0c;点击 Agree 进入环境配置&#xff0c;安装Node.js和ohpm 点击Ne…...

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

WordPress 注册/重置密码/更改密码钩子

wordpress在提供邮件提醒的地方都留了hook&#xff0c;方便让开发者自定义。最新在添加第三方登录时遇到虚拟邮箱发信问题&#xff0c;为了防止给指定邮件地址后缀发信&#xff0c;可以利用如下wordpress提供的钩子来实现。 //https://www.wwttl.com/101.html //禁止用户注册时…...

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

LabVIEW开发远程结构健康监测系统

LabVIEW开发远程结构健康监测系统 工程师依赖于振动监测来评估建筑物、桥梁和其他大型结构的完整性。传统的振动监测工具在数据收集上存在限制&#xff0c;无法长时间收集高保真波形。随着内存存储、处理器速度和宽带无线通信技术的进步&#xff0c;出现了对能够长时间收集并实…...

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

多段图问题-动态规划解法

一、多段图问题 问题描述&#xff1a;设图G(V, E)是一个带权有向图&#xff0c;如果把顶点集合V划分成k个互不相交的子集Vi (2≤k≤n, 1≤i≤k)&#xff0c;使得对于E中的任何一条边(u, v)&#xff0c;必有u∈Vi&#xff0c;v∈Vim (1≤i≤k, 1&#xff1c;im≤k)&#xff0c;…...

编程日记 2023/12/9 5:13:41

Android实验：绑定service实验

目录 实验目的实验内容实验要求项目结构代码实现代码解释结果展示 实验目的 充分理解Service的作用&#xff0c;与Activity之间的区别&#xff0c;掌握Service的生命周期以及对应函数&#xff0c;了解Service的主线程性质&#xff1b;掌握主线程的界面刷新的设计原则&#xff…...

编程日记 2023/12/9 5:09:37

K8S集群优化的可执行优化

目录 前期环境优化 1.永久关闭交换分区 2.#加载 ip_vs 模块 3.调整内核参数 4.#使用Systemd管理的Cgroup来进行资源控制与管理 5.开机自启kubelet 6.内核参数优化方案 7.etcd优化 默认etcd空间配额大小为 2G&#xff0c;超过 2G 将不再写入数据。通过给etcd配置 --quo…...

编程日记 2023/12/9 5:08:36

Remix IDE 快速开始Starknet

文章目录 一、Remix 项目二、基于Web的开发环境Remix 在线 IDE三、Starknet Remix 插件如何使用使用 Remix【重要】通过 Starknet by Example 学习一、Remix 项目 Remix 项目网站 在以太坊合约开发领域，Remix 项目享有很高的声誉，为各个级别的开发人员提供功能丰富的工具集…...

编程日记 2023/12/9 5:06:35

SQL中limit与分页的结合

select * from test limit 2,10; 这条语句的含义&#xff1a;从第3条语句开始查询&#xff0c;共显示10条语句。 select * from test limit a,b; a0,第一条记录。 a1,第二条记录。 a2,第三条记录。 这条语句的含义&#xff1a;从第a1条语句开始查询&#xff0c;共显示b条…...

编程日记 2023/12/9 5:04:33

KALI LINUX信息收集

预计更新 第一章 入门 1.1 什么是Kali Linux&#xff1f; 1.2 安装Kali Linux 1.3 Kali Linux桌面环境介绍 1.4 基本命令和工具 第二章 信息收集 1.1 网络扫描 1.2 端口扫描 1.3 漏洞扫描 1.4 社交工程学 第三章 攻击和渗透测试 1.1 密码破解 1.2 暴力破解 1.3 漏洞利用 1.4 …...

编程日记 2023/12/9 5:01:30

联想电脑重装系统Win10步骤和详细教程

联想电脑拥有强大的性能&#xff0c;很多用户办公都喜欢用联想电脑。有使用联想电脑的用户反映系统出现问题了&#xff0c;想重新安装一个正常的系统&#xff0c;但是不知道重新系统的具体步骤。接下来小编详细介绍给联想电脑重新安装Win10系统系统的方法步骤。 推荐下载 系统之…...

编程日记 2023/12/9 5:00:30

PET（Point-Query Quadtree for Crowd Counting, Localization, and More）

PET&#xff08;Point-Query Quadtree for Crowd Counting, Localization, and More&#xff09; 介绍实验记录训练阶段推断阶段 介绍 论文&#xff1a;Point-Query Quadtree for Crowd Counting, Localization, and More 实验记录 训练阶段 TODO 推断阶段 下面是以一张输…...

编程日记 2023/12/9 4:58:28

NgRx中dynamic reducer的原理和用法？

在 Angular 应用中&#xff0c;使用 NgRx 状态管理库时&#xff0c;动态 reducer 的概念通常是指在运行时动态添加或移除 reducer。这样的需求可能源于一些特殊的场景&#xff0c;比如按需加载模块时&#xff0c;你可能需要添加相应的 reducer。 以下是动态 reducer 的一般原理…...

编程日记 2023/12/9 4:57:27

麒麟V10服务器安装Apache+PHP

安装PHP yum install php yum install php-curl php-gd php-json php-mbstring php-exif php-mysqlnd php-pgsql php-pdo php-xml 配置文件 /etc/php.ini 修改参数 date.timezone Asia/Shanghai max_execution_time 60 memory_limit 1280M post_max_size 200M file_upload…...

编程日记 2023/12/9 4:56:25

DOS 批处理 （一）

DOS 批处理 1. 批处理是什么&#xff1f;2. DOS和MS-DOS3. 各种操作系统shell的区别Shell 介绍图形用户界面&#xff08;GUI&#xff09;shell命令行界面&#xff08;CLI&#xff09;的 shell命令区别 1. 批处理是什么&#xff1f; 批处理(Batch)&#xff0c;也称为批处理脚本…...

编程日记 2023/12/9 4:53:23

P1047 [NOIP2005 普及组] 校门外的树题解

题目 某校大门外长度为 l 的马路上有一排树&#xff0c;每两棵相邻的树之间的间隔都是1 米。我们可以把马路看成一个数轴&#xff0c;马路的一端在数轴 00 的位置&#xff0c;另一端在l 的位置&#xff1b;数轴上的每个整数点&#xff0c;即0,1,2,…,l&#xff0c;都种有一棵树…...

编程日记 2023/12/9 4:51:20

pip的常用命令

安装、卸载、更新包&#xff1a;pip install [package-name]&#xff0c;pip uninstall [package-name]&#xff0c;pip install --upgrade [package-name]。升级pip&#xff1a;pip install --upgrade pip。查看已安装的包&#xff1a;pip list&#xff0c;pip list --outdate…...

编程日记 2023/12/9 4:50:18

力扣面试题 08.12. 八皇后（java回溯解法）

Problem: 面试题 08.12. 八皇后 文章目录 题目描述思路解题方法复杂度Code 题目描述 思路 八皇后问题的性质可以利用回溯来解决&#xff0c;将大问题具体分解成如下待解决问题&#xff1a; 1.以棋盘的每一行为回溯的决策阶段&#xff0c;判断当前棋盘位置能否放置棋子 2.如何判…...

编程日记 2023/12/9 4:48:17

2023年第十二届数学建模国际赛小美赛A题太阳黑子预测求解分析

2023年第十二届数学建模国际赛小美赛 A题 太阳黑子预测 原题再现&#xff1a; 太阳黑子是太阳光球上的一种现象&#xff0c;表现为比周围区域暗的暂时斑点。它们是由抑制对流的磁通量浓度引起的表面温度降低区域。太阳黑子出现在活跃区域内&#xff0c;通常成对出现&#xff…...

编程日记 2023/12/9 4:46:15

jsp 分页查询展示,实现按 上一页或下一页实现用ajax刷新内容

要实现按上一页或下一页使用 Ajax 刷新内容&#xff0c;可以按照以下步骤进行操作&#xff1a; 1. 在前端页面中添加两个按钮&#xff0c;分别为“上一页”和“下一页”。当用户点击按钮时&#xff0c;触发 Ajax 请求。 2. 在后端控制器中接收 Ajax 请求&#xff0c;并根据传…...

编程日记 2023/12/9 4:44:12

基于ssm在线云音乐系统的设计与实现论文

摘 要 随着移动互联网时代的发展&#xff0c;网络的使用越来越普及&#xff0c;用户在获取和存储信息方面也会有激动人心的时刻。音乐也将慢慢融入人们的生活中。影响和改变我们的生活。随着当今各种流行音乐的流行&#xff0c;人们在日常生活中经常会用到的就是在线云音乐系统…...

编程日记 2023/12/9 4:42:11

简谈PostgreSQL的wal_level=logic

一、PostgreSQL的wal_levellogic的简介 wal_levellogic 是 PostgreSQL 中的一个配置选项&#xff0c;用于启用逻辑复制&#xff08;logical replication&#xff09;功能。逻辑复制是一种高级的数据复制技术&#xff0c;它允许您将变更&#xff08;例如插入、更新和删除&#…...

编程日记 2023/12/9 4:41:10

自动化巡检实现方法 （一）------- 思路概述

一、自动化巡检需要会的技能 1、因为巡检要求一天24小时全天在线&#xff0c;因此巡检程序程序一定会放在服务器上跑&#xff0c;所以要对linux操作熟悉哦 2、巡检的代码要在git上管理&#xff0c;所以git的基本操作要熟悉 3、为了更方便不会代码的同学操作&#xff0c;所以整个…...

编程日记 2023/12/9 4:37:06

mysql获取时间异常

1.查看系统时间 时区是上海&#xff0c;本地时间正常 [roottest etc]# timedatectlLocal time: 一 2023-12-04 17:00:35 CSTUniversal time: 一 2023-12-04 09:00:35 UTCRTC time: 一 2023-12-04 09:00:34Time zone: Asia/Shanghai (CST, 0800)NTP enabled: no NTP synchroni…...

编程日记 2023/12/9 4:36:05

维基百科文章爬虫和聚类：高级聚类和可视化

一、说明 维基百科是丰富的信息和知识来源。它可以方便地构建为带有类别和其他文章链接的文章&#xff0c;还形成了相关文档的网络。我的 NLP 项目下载、处理和应用维基百科文章上的机器学习算法。 在我的上一篇文章中&#xff0c;KMeans 聚类应用于一组大约 300 篇维基百科文…...

编程日记 2023/12/9 4:33:02

springboot智慧导诊系统源码：根据患者症状匹配挂号科室

一、系统概述 医院智慧导诊系统是在医疗中使用的引导患者自助就诊挂号&#xff0c;在就诊的过程中有许多患者不知道需要挂什么号&#xff0c;要看什么病&#xff0c;通过智慧导诊系统&#xff0c;可输入自身疾病的症状表现&#xff0c;或选择身体部位&#xff0c;在经由智慧导诊…...

编程日记 2023/12/9 4:32:01

Shell脚本如何使用 for 循环、while 循环、break 跳出循环和 continue 结束本次循环

Shell脚本如何使用 for 循环、while 循环、break 跳出循环和 continue 结束本次循环 下面是一个简单的 Shell 脚本示例&#xff0c;演示了如何使用 for 循环、while 循环、break 跳出循环和 continue 结束本次循环。 #!/bin/bash# For循环 echo "For循环示例&#xff1a;…...

编程日记 2023/12/9 4:29:59

n个人排成一圈，数数123离队

#include<stdio.h> int main() { int i, n100,k0,j0,a[1000]{0};//k&#xff1a;数数123的变量&#xff0c;j记录离开队列人数的变量scanf("%d",&n);for(int ii0; ii<n; ii){ for( i0; i<n; i){// printf("wei%d ",i);if((a[i]0)&&…...

编程日记 2023/12/9 4:27:56

深度学习基础回顾

深度学习基础 浅层网络 VS 深层网络深度学习常用的激活函数Sigmoid 函数ReLU 函数Softplus 函数tanh函数 归纳偏置CNN适用数据归纳偏置 RNN适用数据归纳偏置 浅层网络 VS 深层网络 浅层神经网络参数过多&#xff0c;导致模型的复杂度和计算量很高&#xff0c;难以训练。而深层…...

编程日记 2023/12/9 4:25:54

【Vue】修改组件样式并动态添加样式

文章目录 目标修改样式动态添加/删除样式样式不生效 注意&#xff1a;类似效果el-step也可以实现&#xff0c;可以不用手动实现。这里只是练习。 目标 使用组件库中的组件&#xff0c;修改它的样式并动态添加/删除样式。 修改样式 组件中的一些类可能添加样式无法生效。如Ele…...

编程日记 2023/12/9 4:24:52

GO设计模式——12、外观模式（结构型）

目录 外观模式&#xff08;Facade Pattern&#xff09; 外观模式的核心角色&#xff1a; 优缺点 使用场景 代码实现 外观模式&#xff08;Facade Pattern&#xff09; 外观模式&#xff08;Facade Pattern&#xff09;又叫作门面模式&#xff0c;是一种通过为多个复杂的子…...

编程日记 2023/12/9 4:20:49

一.初始typescript

什么是ts 首先我们要确认typescript是一个语言&#xff0c;是等同于JavaScript层级得&#xff0c;并不是一些人认为得是JavaScript得类型规范工具或者插件。 ts与js的差异 从type script这个名字就可以看出&#xff0c;ts其实是JavaScript的一个类型化超集&#xff0c;它增…...

编程日记 2023/12/9 4:17:47

mp3的播放

1.这段vue代码会播放声音&#xff0c;但是会有audio标签 <template><div><audio id"myAudio" controls><source src"./test.mp3" type"audio/mp3" />Your browser does not support the audio tag.</audio></…...

编程日记 2023/12/9 4:16:46

mixamo根动画导入UE5问题：滑铲

最近想做一个跑酷游戏&#xff0c;从mixamo下载滑铲动作后&#xff0c;出了很多动画的问题。花了两周时间&#xff0c;终于是把所有的问题基本上都解决了。 常见问题&#xff1a; 1.【动画序列】人物不移动。 2.【动画序列】人物移动朝向错误。 3.【蒙太奇】人物移动后会被拉回…...

编程日记 2023/12/9 4:14:44

容器资源视图隔离 —— 筑梦之路

先做个记录&#xff0c;抽空再整理 K8s 部署 Lxcfs 准入控制器&#xff0c;实现容器中资源单独可见 - 「Johny」PlayGround Kubernetes 中利用 LXCFS 控制容器资源可见性 - 码农教程 容器资源可视化隔离的实现方法_51CTO博客_容器隔离技术 Lxcfs在容器集群中的使用-腾讯云开…...

编程日记 2023/12/9 4:12:43

浅析嵌入式GUI框架-LVGL

LVGL (Light and Versatile Graphics Library) 是最流行的免费开源嵌入式图形库&#xff0c;可为任何 MCU、MPU 和显示类型创建漂亮的 UI 嵌入式GUI框架对比 Features/框架LVGLFlutter-elinuxArkUI(鸿蒙OS)AWTKQTMIniGUIemWinuC/GUI柿饼UI跨平台是是鸿蒙OS平台是是是是是是设备…...

编程日记 2023/12/9 4:11:42

Unity 关于SetParent方法的使用情况

在设置子物体的父物体时&#xff0c;我们使用SetParent再常见不过了。 但是通常我们只是使用其中一个语法&#xff1a; public void SetParent(Transform parent);使用改方法子对象会保持原来位置&#xff0c;跟使用以下方法效果一样&#xff1a; public Transform tran; ga…...

编程日记 2023/12/9 4:09:40

Linux系统上RabbitMQ安装教程

一、安装前环境准备 Linux&#xff1a;CentOS 7.9 RabbitMQ Erlang 1、系统内须有C等基本工具 yum install build-essential openssl openssl-devel unixODBC unixODBC-devel make gcc gcc-c kernel-devel m4 ncurses-devel tk tc xz socat2、下载安装包 1&#xff09;首先&a…...

编程日记 2023/12/9 4:07:38