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

Vue2学习（组件的使用）

news 2026/3/26 23:34:26

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

先瑞达2025年年报：营收同比增长20.7% 双引擎格局成型迎高质量增长

3月26日晚间&#xff0c;先瑞达医疗&#xff08;6669.HK&#xff09;正式发布截至2025年12月31日的年度业绩报告。报告期内&#xff0c;公司紧扣血管介入治疗领域核心赛道&#xff0c;以技术创新为内核、以全球化布局为抓手、以降本增效为支撑&#xff0c;实现经营业绩的稳健增…...

编程新知 2026/3/26 22:58:49

JAVA重点基础、进阶知识及易错点总结（1）---数据类型、运算符、流程控制

&#x1f680; Java 巩固进阶 第1天 主题&#xff1a;数据类型、运算符与流程控制 —— 避开那些“隐形”的坑&#x1f4c5; 进度概览&#xff1a;重启Java基础。 &#x1f4a1; 核心价值&#xff1a;很多生产环境的Bug&#xff08;如金额精度丢失、空指针崩溃、逻辑穿透&…...

编程新知 2026/3/26 22:40:21

无线通信入门：为什么说DFT是提升OFDM信道估计性能的“降噪神器”？

无线通信中的降噪艺术&#xff1a;DFT如何让OFDM信道估计更精准 想象一下&#xff0c;你正试图在嘈杂的咖啡馆里听清朋友的谈话。背景音乐、周围人的聊天声、杯盘碰撞声都在干扰你获取清晰的信息。无线通信中的信道估计面临类似的挑战——如何在充满噪声的传输环境中&#xff0…...

编程新知 2026/3/26 22:00:04

ComfyUI Inpaint实战：5分钟搞定照片路人甲，AI修图从此不求人

ComfyUI Inpaint实战&#xff1a;5分钟搞定照片路人甲&#xff0c;AI修图从此不求人 每次旅行拍照总有几个"不速之客"闯入镜头&#xff1f;社交媒体晒图前总为背景里的路人发愁&#xff1f;别担心&#xff0c;今天我要分享的ComfyUI Inpaint技术&#xff0c;能让这些…...

编程新知 2026/3/26 21:36:00

Axure RP 10实战：3分钟搞定Tab切换效果（附交互样式设置技巧）

Axure RP 10高级Tab切换效果&#xff1a;从基础实现到专业级交互设计 在当今快节奏的数字化产品设计领域&#xff0c;Tab切换作为最常见的用户界面元素之一&#xff0c;其交互体验的优劣直接影响用户对产品的第一印象。Axure RP 10作为行业领先的原型设计工具&#xff0c;提供了…...

编程新知 2026/3/26 20:41:48

最完整的llm-graph-builder入门指南：从安装到知识图谱可视化

最完整的llm-graph-builder入门指南&#xff1a;从安装到知识图谱可视化 【免费下载链接】llm-graph-builder Neo4j graph construction from unstructured data 项目地址: https://gitcode.com/GitHub_Trending/ll/llm-graph-builder 你还在为非结构化数据转化为结构化…...

编程新知 2026/3/26 20:07:39

计算机毕业设计springboot基于的医院预约挂号系统 智慧医疗服务平台的设计与实现——以在线挂号预约为核心功能 SpringBoot框架下的医疗机构门诊预约管理系统开发

计算机毕业设计springboot基于的医院预约挂号系统w6r0k82u &#xff08;配套有源码 程序 mysql数据库 论文&#xff09; 本套源码可以在文本联xi,先看具体系统功能演示视频领取&#xff0c;可分享源码参考。随着互联网技术的快速发展和普及&#xff0c;医疗领域也逐渐受到其影响…...

编程新知 2026/3/26 19:49:32

AI 辅助开发实战：基于低代码与智能生成的五金店管理系统毕设架构设计

最近在帮学弟学妹们看毕业设计&#xff0c;发现“五金店管理系统”是个高频选题。但很多人做着做着就陷入了“增删改查”的泥潭&#xff0c;前端界面简陋&#xff0c;业务逻辑也写得七零八落&#xff0c;最后答辩时演示效果平平&#xff0c;技术深度更是无从谈起。这让我开始思…...

编程新知 2026/3/26 19:35:25

【MySQL | 第一篇】 深入理解三大日志(undo Redo Bin)

目录 Undo Log日志 Redo Log日志 Redo Log与Bin Log的区别 Bin Log日志 三大日志全流程 Undo Log日志 一、核心定义 Undo Log 是MySQL InnoDB存储引擎特有的事务回滚日志&#xff0c;核心作用是记录事务执行前的数据版本&#xff0c;用于事务回滚、MVCC实现&#xff0c;是…...

编程新知 2026/3/26 18:58:41

程序员视角：五笔输入法98版为何更适合代码编写？

程序员视角&#xff1a;五笔输入法98版为何更适合代码编写&#xff1f; 在程序员的世界里&#xff0c;效率就是生命。从IDE的选择到快捷键的配置&#xff0c;每一个细节都可能影响编码的速度和质量。而作为中文开发者&#xff0c;输入法的选择往往被忽视——直到你发现自己在输…...

编程新知 2026/3/26 18:30:37