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

Vue2学习（组件的使用）

news 2026/5/16 11:02:19

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

图表数据提取神器：WebPlotDigitizer让科研图表重获新生

图表数据提取神器&#xff1a;WebPlotDigitizer让科研图表重获新生 【免费下载链接】WebPlotDigitizer Computer vision assisted tool to extract numerical data from plot images. 项目地址: https://gitcode.com/gh_mirrors/we/WebPlotDigitizer 你是否曾面对论文中…...

编程新知 2026/5/16 10:15:29

VSCode调试STM32实战：解决Cortex-Debug插件配置JLink/OpenOCD时最常见的5个报错

VSCode调试STM32实战&#xff1a;破解Cortex-Debug插件五大经典报错 当你在深夜赶工STM32项目&#xff0c;按下F5期待调试器顺利启动时&#xff0c;终端却弹出鲜红的错误信息——这种挫败感每个嵌入式开发者都深有体会。本文不重复那些基础配置教程&#xff0c;而是直击VSCode…...

编程新知 2026/5/16 10:13:11

工业触控一体机选型与Linux应用开发全解析

1. 项目概述&#xff1a;当工业现场需要一块“聪明”的屏幕最近在跟进一个智慧工厂的MES&#xff08;制造执行系统&#xff09;终端升级项目&#xff0c;客户现场的老式工控机搭配笨重的显示器&#xff0c;不仅布线杂乱&#xff0c;操作响应慢&#xff0c;而且维护起来极其麻烦…...

编程新知 2026/5/16 7:42:46

可编程投币器集成指南：从硬件连接到游戏积分映射

1. 项目概述&#xff1a;从“投币”到“积分”的硬件魔法“Insert Coin”——对于任何一个经历过街机黄金年代的玩家来说&#xff0c;这三个字背后所承载的&#xff0c;远不止是启动游戏的指令&#xff0c;更是一种充满仪式感的期待。如今&#xff0c;我们大多通过模拟器上的一…...

编程新知 2026/5/16 7:33:53

打破偏见！Java做AI不是不行，是2026年最被低估的红利

长久以来&#xff0c;行业里一直有个固有认知&#xff1a;AI是Python的主场&#xff0c;Java做AI笨重、生态弱、落地难。很多Java企业团队看着AI浪潮席卷各行各业&#xff0c;要么束手观望&#xff0c;要么被迫切换Python技术栈重构系统&#xff0c;不仅成本高昂&#xff0c;还…...

编程新知 2026/5/16 6:58:52

RFSoC开发避坑指南：手把手教你理解并配置RF数据转换器的核心结构体（以XRFdc为例）

RFSoC开发实战&#xff1a;深度解析XRFdc结构体配置与避坑策略 第一次打开xrfdc.h头文件时&#xff0c;面对密密麻麻的结构体定义&#xff0c;我的鼠标滚轮不由自主地滑动了三分钟才看完所有内容。作为曾经在RFSoC项目上踩过无数坑的开发者&#xff0c;我完全理解那种面对数十个…...

编程新知 2026/5/16 5:52:54

OpenClaw Studio：基于Web技术的可视化自动化工作流构建平台解析

1. 项目概述&#xff1a;从开源仓库到创意工坊的蜕变 看到 grp06/openclaw-studio 这个项目标题&#xff0c;我的第一反应是&#xff1a;这又是一个在 GitHub 上诞生的、充满潜力的开源工具。 grp06 看起来像是一个团队或个人的标识&#xff0c;而 openclaw-studio 则直…...

编程新知 2026/5/16 5:23:13

3D打印技术如何重塑消费电子供应链：从原型验证到小批量生产

1. 项目概述&#xff1a;当3D打印遇上消费电子最近几年&#xff0c;我身边不少做产品设计、硬件开发的朋友&#xff0c;聊天时总会不约而同地提到一个词&#xff1a;3D打印。以前大家觉得这玩意儿就是个做手办、打样机的“玩具”&#xff0c;但现在风向明显变了。尤其是在消费电…...

编程新知 2026/5/16 4:17:10

从 LLM 到 Agent：Harness Engineering 的角色演变

从 LLM 到 Agent：Harness Engineering 的角色演变 本文字数：约10200字 | 阅读时间：25分钟 | 适合人群：AI算法工程师、产品经理、技术负责人、AI应用开发者 1. 引入与连接：被忽略的AI落地核心桥梁 1.1 开场：一个真实的AI落地场景 2024年中，某互联网公司运维团队负责人李…...

编程新知 2026/5/16 3:58:25

思源宋体CN终极指南：7种字重免费商用中文字体快速上手完整教程

思源宋体CN终极指南&#xff1a;7种字重免费商用中文字体快速上手完整教程 【免费下载链接】source-han-serif-ttf Source Han Serif TTF 项目地址: https://gitcode.com/gh_mirrors/so/source-han-serif-ttf 还在为商业项目中文字体版权问题而烦恼吗&#xff1f;思源宋…...

编程新知 2026/5/16 2:52:46