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

vue-组件定义注册使用

news 2026/4/3 6:24:00

vue组件使用的步骤

  1. 定义组件
  2. 注册组件
  3. 使用组件

定义组件

Vue.extend(options)
其中options和new Vue(options)出入的options对象几乎一样，但是也有不同。

  • 创建 el不用写—最终所有组件需要经过一个vm的管理，由vm的el决定服务哪个容器。

  • data必须写成函数—因为组件复用，数据存在引用关系。

Vue创建组件案例 Vue.extend()创建

<!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><script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script><script src="https://cdn.bootcdn.net/ajax/libs/dayjs/1.11.7/dayjs.min.js"></script></head><body><!-- 准备好一个容器--><div id="root"><h2>学习Vue组件</h2></div></body><script type="text/javascript">Vue.config.productionTip = false;//创建一个vue实例new Vue({el: "#root",data: {opacity: 1,},});//定义一个vue组件let school = Vue.extend({template: `<div class="demo"><h2>学校名称：{{schoolName}}</h2><h2>学校地址：{{address}}</h2><button @click="showName">点我提示学校名</button>	</div>`,data() {return {schoolName: "希望小学",address: "123456@qq.com",};},methods: {showName() {alert(this.schoolName);},},});</script></html>

注册组件

  • 局部注册：在new Vue时，传入componnets选项
  • 全局注册:在Vue.component(‘组件名’，组件)

局部注册案例

<script>//创建vmnew Vue({el: '#root',data: {msg:'你好啊！'},//第二步：注册组件（局部注册）components: {school: school,student: student// ES6简写形式// school,// student}})
</script>

全局注册案例

    //注册vue组件Vue.component('school',school)

使用组件

    <div id="root"><h2>{msg}</h2><school></school></div>

使用注意点

组件名

  • 一个单词

  • 首字母小写 school

  • 首字母大写 School

  • 多个单词

  • kebab-case命名 my-name

  • CamelCase命名 MyName(需要脚手架支持)

组件标签


（需要使用脚手架，否则导致后续标签无法渲染）

组件定义简写

const school = Vue.extend(options) 可简写为：const school = options

相关文章：

vue-组件定义注册使用

vue组件使用的步骤 定义组件注册组件使用组件 定义组件 Vue.extend(options) 其中options和new Vue(options)出入的options对象几乎一样&#xff0c;但是也有不同。 创建 el不用写—最终所有组件需要经过一个vm的管理&#xff0c;由vm的el决定服务哪个容器。 data必须写成函…...

编程日记 2023/10/9 22:52:30

斑馬打印機打印中文

创建项目 首先說一下&#xff0c;本文章是借鉴了其他大佬的文章&#xff0c;然后我记录一下的文章。 首先创建好一个.net framework的winform项目。 这里面主要用到两个库文件&#xff1a; Fnthex32.dll、LabelPrint.dll。 Fnthex32这个有8位参数和9位参数的&#xff0c;我这…...

编程日记 2023/10/9 22:51:29

（一）Apache log4net™ 手册 - 介绍

0、相关概念 Log4j 几乎每个大型应用程序都包含自己的日志记录或跟踪 API。根据这一规则&#xff0c;E.U. SEMPER &#x1f339;项目决定编写自己的跟踪 API。那是在 1996 年初。经过无数次的增强、几个化身和大量的工作&#xff0c;API 已经发展成为 log4j —— 一个流行的 Ja…...

编程日记 2023/10/9 22:50:28

基于Java的民宿管理系统设计与实现(源码+lw+部署文档+讲解等)（民宿预约、民宿预订、民宿管理、酒店预约通用）

文章目录 前言具体实现截图论文参考详细视频演示代码参考源码获取 前言 &#x1f497;博主介绍&#xff1a;✌全网粉丝10W,CSDN特邀作者、博客专家、CSDN新星计划导师、全栈领域优质创作者&#xff0c;博客之星、掘金/华为云/阿里云/InfoQ等平台优质作者、专注于Java、小程序技…...

编程日记 2023/10/9 22:49:27

039：mapboxGL更换地图上的鼠标样式

第039个 点击查看专栏目录 本示例的目的是介绍演示如何在vue+mapbox中更换地图上的鼠标的样式。 直接复制下面的 vue+mapbox源代码，操作2分钟即可运行实现效果 文章目录 示例效果配置方式示例源代码（共74行）相关API参考：专栏目标示例效果 配置方式 1）查看基础设置：htt…...

编程日记 2023/10/9 22:47:24

【云原生】K8S对外服务之Ingress

目录 一、Ingress 简介1.1Ingress 组成1.3Ingress-Nginx 工作原理 二、部署 nginx-ingress-controller2.1部署ingress-controller Pod及相关资源2.2ingress 暴露服务的方式2.3 采用方式二&#xff1a;DaemonSetHostNetworknodeSelector 三、采用方式二&#xff1a;DeploymentNo…...

编程日记 2023/10/9 22:46:23

分布式锁如何实现

分布式是现在的比较主流的技术&#xff0c;常常和微服务一起出现。那么对于多个实例之间&#xff0c;如何证分布式系统中多个进程或线程同步访问共享资源呢&#xff1f;我们其实一想到的就是锁&#xff0c;我们在java里边有 synchronized, 在python里有lock&#xff0c;但是这个…...

编程日记 2023/10/9 22:45:22

Mysql存储-EAV模式

Mysql存储-EAV模式 最近又又又搞一点新东西&#xff0c;要整合不同业务进行存储和查询&#xff0c;一波学习过后总结了一下可扩展性MAX的eav模式存储。 在eav这里的数据结构设计尤为关键&#xff0c;需要充分考虑你需要使用的字段、使用场景&#xff0c;当数据结构设计完成后便…...

编程日记 2023/10/9 22:44:21

全局变量报错：\Output\STM32.axf: Error: L6218E: Undefined symbol

全局变量报错&#xff1a; .\Output\STM32.axf: Error: L6218E: Undefined symbol key_num (referred from main.o). 这里只说全局变量哦&#xff0c;这是因为你在调用的.c文件里 把定义写在了函数里面&#xff0c;写函数外面就没事了 改为&#xff1a; .h的声明文件根本不用写…...

编程日记 2023/10/9 22:43:20

算法错题簿（持续更新）

自用算法错题簿&#xff0c;按算法与数据结构分类 python1、二维矩阵&#xff1a;记忆化搜索dp2、图论&#xff1a;DFS3、回溯&#xff1a;129612964、二叉树&#xff1a;贪心算法5、字符串&#xff1a;记忆化搜索6、01字符串反转&#xff1a;结论题7、二进制数&#xff1a;逆向…...

编程日记 2023/10/9 22:42:19

基于Springboot实现疫情网课管理系统项目【项目源码+论文说明】

基于Springboot实现疫情网课管理系统演示 摘要 随着科学技术的飞速发展&#xff0c;各行各业都在努力与现代先进技术接轨&#xff0c;通过科技手段提高自身的优势&#xff1b;对于疫情网课管理系统当然也不能排除在外&#xff0c;随着网络技术的不断成熟&#xff0c;带动了疫情…...

编程日记 2023/10/9 22:41:18

Linux文件与目录的增删改查

一、增 1、mkdir命令 作用&#xff1a; 创建一个新目录。 格式&#xff1a; mkdir [选项] 要创建的目录 常用参数&#xff1a; -p&#xff1a;创建目录结构中指定的每一个目录&#xff0c;如果目录不存在则创建&#xff0c;如果目录已存在也不会被覆盖。 用法示例&a…...

编程日记 2023/10/9 22:39:15

JVM的内存模型

一、JVM的内存模型 1.1、目标 内存模型是用来描述JVM内部的内存结构和内存管理的模型。它定义了JVM在运行Java程序时所需要的各种内存区域&#xff0c;以及每个内存区域的作用和特点。 1.2、结构划分 1.2.1、栈 每个线程在执行Java方法时会创建一个栈帧&#xff08;Stack …...

编程日记 2023/10/9 22:38:14

数据采集项目之业务数据（三）

1. Maxwell框架 开发公司为Zendesk公司开源&#xff0c;用java编写的MySQL变更数据抓取软件。内部是通过监控MySQL的Binlog日志&#xff0c;并将变更数据以JSON格式发送到Kafka等流处理平台。 1.1 MySQL主从复制 主机每次变更数据都会生成对应的Binlog日志&#xff0c;从机可…...

编程日记 2023/10/9 22:37:13

vuedraggable影响点击事件的解决办法

在工作中有很多场景需要针对广告、商品、信息推广等进行一个排序,或者对展示的顺序做出调整,方便放用户第一眼看到自己感兴趣的信息,因此避免不了需要用到排序的插件,这里以vue为例子,采用的插件是vuedraggable,这个插件针对于排序的功能相对完善,官网地址:vuedraggable官网 但…...

编程日记 2023/10/9 22:36:12

Linux 中的 grep 命令

Linux 中的 grep 命令是一个强大的文本搜索工具&#xff0c;它允许用户在文件中查找指定的文本模式&#xff0c;并将匹配的行打印出来。grep 是“Global Regular Expression Print”的缩写&#xff0c;它使用正则表达式来进行文本搜索&#xff0c;因此具有强大的灵活性和功能。…...

编程日记 2023/10/9 22:34:10

阶段五-Day03-Ajax

一、JavaWeb中路径的说明 1. JavaWeb中的路径 在JavaWeb中, 路径分为相对路劲和绝对路径两种: 相对路径: ./ 表示当前目录 ../ 表示当前文件所在目录的上一级目录 绝对路径: 完整的路径名 2. 在JavaWeb中/的不同意义 /斜杠如果被浏览器解析,得到的是 协议本地ip端口号…...

编程日记 2023/10/9 22:33:09

EPOLL单线程版本 基于reactor 的 httpserver文件下载 支持多个客户端同时处理

之前写了一个httpserver的问价下载服务器 如果有多个客户端请求过来只能串行处理必须得等当前的操作完成之后才会处理 另外还存在 文件大的时候 会出错 处理不了 原因就是 sendfile是在一个while循环中处理的 当调用send失败返回-1之后 就 结束了 而一般来讲 se…...

编程日记 2023/10/9 22:32:08

uniapp实现微信小程序隐私协议组件封装

uniapp实现微信小程序隐私协议组件封装。 <template><view class"diygw-modal basic" v-if"showPrivacy" :class"showPrivacy?show:" style"z-index: 1000000"><view class"diygw-dialog diygw-dialog-modal bas…...

编程日记 2023/10/9 22:31:07

【Node.js】NPM 和 package.json

NPM npm 是 Node.js 的包管理工具&#xff0c;基于命令行&#xff0c;用于安装、升级、移除、管理依赖项。 常用命令&#xff1a; npm init&#xff1a;初始化一个新的 npm 项目&#xff0c;创建 package.json 文件。&#xff08;括号里为默认值&#xff09; description&am…...

编程日记 2023/10/9 22:28:04

别再自己造轮子了！用DJI Pilot 2 + 上云API，30分钟搞定无人机数据上云

30分钟极速对接&#xff1a;用DJI Pilot 2与上云API实现无人机数据云端整合 在智慧城市巡检或应急指挥场景中&#xff0c;实时获取无人机航拍画面与飞行数据往往是业务闭环的关键。传统方案需要投入数月时间开发定制化App&#xff0c;而大疆最新推出的上云API方案&#xff0c;让…...

编程新知 2026/4/3 6:03:03

忍者像素绘卷惊艳作品集：16-Bit复古美学+火之意志主题像素艺术展

忍者像素绘卷惊艳作品集&#xff1a;16-Bit复古美学火之意志主题像素艺术展 1. 像素艺术的革命性突破 忍者像素绘卷代表了当前像素艺术生成技术的巅峰之作。这款基于Z-Image-Turbo深度优化的图像生成工作站&#xff0c;成功将传统忍者文化与现代AI技术完美融合&#xff0c;创…...

编程新知 2026/4/3 5:36:35

Spring IoC 与 DI 核心详解 —— 基于 XML 配置：Bean 创建、依赖注入与生命周期全解析（Spring系列1）

在 Java 企业级开发中&#xff0c;Spring 框架凭借其强大的 IoC&#xff08;控制反转&#xff09; 与 DI&#xff08;依赖注入&#xff09; 能力&#xff0c;成为了事实上的标准。本文将带你从最原始的 XML 配置开始&#xff0c;逐步过渡到纯注解开发&#xff0c;并深入剖析 Io…...

编程新知 2026/4/3 3:22:43

07_Cursor之语言支持与扩展生态

关键字&#xff1a;语言支持, VS Code扩展, 跨平台, Electron, Python开发, 扩展生态 07_Cursor之语言支持与扩展生态 Cursor知识体系 Cursor知识体系&#xff08;续&#xff09; | -- 生态支持层 | -- 多语言支持 | | -- 通用LLM支持 | | -- 自动语言检测 | | …...

编程新知 2026/4/3 3:08:33

成本控制实战：OpenClaw+Qwen3.5-9B的Token消耗优化指南

成本控制实战&#xff1a;OpenClawQwen3.5-9B的Token消耗优化指南 1. 为什么需要关注Token消耗&#xff1f; 第一次用OpenClaw执行整夜自动化任务时&#xff0c;早上看到账单差点从椅子上跳起来——单次任务消耗了接近18万Token。这让我意识到&#xff0c;如果不加控制&#…...

编程新知 2026/4/3 2:44:12

OpenClaw技能开发模板：5分钟为Kimi-VL-A3B-Thinking创建自定义多模态处理器

OpenClaw技能开发模板&#xff1a;5分钟为Kimi-VL-A3B-Thinking创建自定义多模态处理器 1. 为什么需要自定义技能 上周我在处理一批产品截图和用户反馈时&#xff0c;突然意识到一个痛点&#xff1a;虽然Kimi-VL-A3B-Thinking多模态模型能理解图片内容&#xff0c;但每次都要…...

编程新知 2026/4/3 2:40:06

My SQL 数据库基础实例教程（第二单元学习笔记）

2.1关系数据库设计2.1.1 数据的加工1.现实世界现实世界是指客观存在的事物及他们相互之间的联系。2.信息世界信息世界是人们把现实世界的信息和联系通过“符号”记录下来&#xff0c;然后用规范化的数据库定义语言来描述而构成的一个抽象世界。3.计算机世界计算机世界将信息世界…...

编程新知 2026/4/3 2:23:48

雷军5小时拆车直播爆火！硬核技术成新风口，自媒体可直接做

4月2日晚&#xff0c;雷军5小时直播拆解新一代SU7引发全网热议&#xff0c;单场观看量突破1亿&#xff0c;弹幕满是“硬核”“专业”的好评。这场直播颠覆了技术内容的传播模式&#xff0c;从“参数堆砌”转向“实证拆解”&#xff0c;从“单向宣讲”升级为“双向互动”&#x…...

编程新知 2026/4/3 2:01:20

轻量级抢占式任务调度器：面向Arduino的毫秒级实时调度

1. 项目概述Task Scheduler是一款专为 Atmel AVR&#xff08;ATmega328P/ATmega2560&#xff09;与 ARM Cortex-M3&#xff08;SAM3X8E&#xff09;架构微控制器设计的轻量级、抢占式实时任务调度器&#xff0c;面向 Arduino 生态系统深度优化。其核心目标并非替代完整 RTOS&am…...

编程新知 2026/4/3 1:14:41

基于合法无代码平台滥用的新型钓鱼攻击机理与防御体系研究

摘要 2026 年 3 月卡巴斯基实验室披露针对 Bubble.io 等正规无代码开发平台的恶意滥用钓鱼攻击&#xff0c;攻击者依托平台高信誉域名、SSL 证书与可视化开发能力&#xff0c;快速生成高仿真钓鱼页面&#xff0c;绕过传统邮件网关与终端检测&#xff0c;实现账号凭证、多因素认…...

编程新知 2026/4/3 0:10:09