[07] 组件注册

目录

    • Vue.js 组件
    • 局部注册
    • 全局注册

Vue.js 组件

组件(Component)是 Vue.js 最强大的功能之一。

组件可以扩展 HTML 元素,封装可重用的代码。

组件系统让我们可以用独立可复用的小组件来构建大型应用,几乎任意类型的应用的界面都可以抽象为一个组件树。

局部注册

  • 特点:只能在注册的组件内使用

  • 步骤:

    1. 创建.vue文件(三个组成部分)
    2. 在使用的组件内先导入再注册,最后使用
  • 使用方式:当成html标签使用即可 <组件名></组件名>

  • 使用大驼峰命名法, 如 HmHeader

5.语法

// 导入需要注册的组件
import 组件对象 from '.vue文件路径'
import HmHeader from './components/HmHeader'

export default {     // 局部注册
  components: {
   '组件名': 组件对象,
    HmHeader:HmHeaer,
    HmHeader
  }
}

全局注册

  • 特点:全局注册的组件,在项目的任何组件中都能使用

  • 步骤

    1. 创建.vue组件(三个组成部分)
    2. main.js中进行全局注册
  • 使用方式:当成HTML标签直接使用

<组件名></组件名>

  • 大驼峰命名法, 如 HmHeader

  • 语法

Vue.component('组件名', 组件对象)

Vue.component(tagName, options)
tagName 为组件名,options 为配置选项。注册后,使用以下方式来调用组件:
<tagName></tagName>

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mfbz.cn/a/404709.html

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

提升App推广效果,从优化落地页开始

在App推广过程中&#xff0c;落地页的转化率一直是推广运营者关注的重点。然而&#xff0c;很多运营者发现&#xff0c;即使使用了相同的工具和模板&#xff0c;别人的效果却远远超出自己。那么&#xff0c;问题到底出在哪里呢&#xff1f;今天&#xff0c;我们就来聊聊如何提升…

便携式气象站的安装注意事项

型号推荐&#xff1a;云境天合TH-BQX9】便携式气象站的安装注意事项包括以下几点&#xff1a; 安装前检查&#xff1a;在安装前&#xff0c;应对便携式气象站进行检查&#xff0c;确保设备的包装完好无损&#xff0c;配件齐全&#xff0c;如气象站传感器、支架、采集器和传输模…

链表和顺序表的优劣分析及其时间、空间复杂度分析

链表和顺序表的优劣分析及其时间、空间复杂度分析 一、链表和顺序表的优劣分析二、算法复杂度<font face "楷体" size 5 color blue>//上面算法的执行次数大致为&#xff1a;F&#xff08;N&#xff09; N^22*N10;   N 10,F(10) 1002010 130次   N 1…

提高学习效率和速度的方法

如下是一些策略和方法来帮助提高学习效率和速度&#xff1a; 1. **主动学习**&#xff1a;主动寻找信息并提出问题&#xff0c;而不是被动接受。这样可以提高您的学习动力和效率。 2. **分块学习**&#xff1a;将复杂的知识点分解成小块&#xff0c;逐一理解和掌握。这种方法可…

unity屏幕受伤特效

//使用用途&#xff1a;同于屏幕掉血的后处理特效 //请结合和脚本&#xff1a;BloodScreen 挂载至摄像机使用本特效 //本特效设计之初未考虑兼容移动设备&#xff0c;请注意//使用说明&#xff1a; //掉血获取此脚本&#xff0c;将showBlood设置为true&#xff0c;如果您需要更…

Js的 Promise的 then catch 笔记240222

Js的 Promise的 then catch 笔记240222 基本用法 new Promise(f>{setTimeout(ev>{f("一秒后输出控制台");},1000); }).then(f的参数>{console.log(f的参数); }); // 控制台输出: 一秒后输出控制台上面代码中, f 的标准名叫做 resolve , 所以应该写成 new …

函数栈帧的创建及销毁(超详解)

目录 1.预备知识 1.1内存区的划分 1.2认识相关寄存器和汇编指令 1.2.1寄存器 1.2.2相关汇编指令 2.测试前 2.1测试代码及环境 2.2 main函数也是被其他函数调用的 3.函数栈帧的创建 4.进入函数内部 5.形参与实参 6.call/jump add函数 7.函数栈帧的销毁 7.1保存…

使用python查看官网是否发布新的内容

目录 前言 第一章、python介绍和使用pip install下载包 1.python介绍 2.使用vscode编写python 3.pip install的使用 第二章、查看官网是否发布新的内容 第三章、代码实现 目录结构 代码实现 check_new_news.py files.py news.py main.py file.txt 运行演示 前言 也…

【已解决】@tableid can‘t more than one

实体里面不能有两个TableId&#xff0c;只留一个就好了

SpringBoot对于SpringMVC的支持

创建项目 版本说明这里使用的 SpringBoot 2.0.0.Release SpringBoot对于SpringMVC的支持 在之前的开发中很多场景下使用的是基于xml配置文件或者是Java配置类的方式来进行SpringMVC的配置。一般来讲&#xff0c;初始的步骤如下所示 1、初始化SpringMVC的DispatcherServlet2、…

[OpenAI]继ChatGPT后发布的Sora模型原理与体验通道

前言 前些天发现了一个巨牛的人工智能学习网站&#xff0c;通俗易懂&#xff0c;风趣幽默&#xff0c;忍不住分享一下给大家&#xff1a;https://www.captainbed.cn/z ChatGPT体验地址 文章目录 前言OpenAI体验通道Spacetime Latent Patches 潜变量时空碎片, 建构视觉语言系统…

kettle计算增长率

kettle计算增长率 问题描述处理方法 问题描述 读取一段时间内的数据记录&#xff0c;计算相邻记录的比率 iddatevalue12024-01-0110012024-01-0211012024-01-0312012024-01-0490 处理方法 1.使用统计中的分析查询节点能在每一行中添加前后行的数据 2.使用计算器节点计算比…

音视频基础概念笔记

RGB 色彩空间更适合图像采集和显示&#xff0c; YUV 空间用于编码和存储则比较好。 无论是 RGB 还是 YUV &#xff0c;他们都是 表达 色彩信息的一种方式。 &#xff08;Human Visual System&#xff09;人类视觉系统 色度感知 包含两个维度&#xff1a;色调&#xff08;Hue&…

ELK入门(四)-logstash

Logstash Logstash 是开源的服务器端数据处理管道&#xff0c;能够同时从多个来源采集数据&#xff0c;转换数据&#xff0c;然后将数据发送到您最喜欢的存储库中。 Logstash 能够动态地采集、转换和传输数据&#xff0c;不受格式或复杂度的影响。利用 Grok 从非结构化数据中…

WebService学习,wsdl文件详解

目录 第一章、起因1.1&#xff09;学习原因1.2&#xff09;提问的过程&#xff08;逐步提出问题&#xff09;1、&#xff1f;wsdl链接的含义&#xff0c;有什么作用&#xff1f;2、什么是wsdl文档&#xff1f;3、如何阅读wsdl文件&#xff1f;4、wsdl文件有什么作用&#xff1f…

Linux编译器---gcc/g++使用详解

目录 前言 gcc/g介绍 gcc/g的编译指令&#xff08;以gcc为例&#xff09; ​编辑 gcc选项 预处理(进行宏替换) 编译&#xff08;生成汇编&#xff09; 汇编&#xff08;生成机器可识别代码&#xff09; 链接&#xff08;生成可执行文件或库文件&#xff09; 函数库 概念 …

Vue单文件学习项目综合案例Demo,黑马vue教程

文章目录 前言一、小黑记事本二、购物车三、小黑记账清单 前言 bilibili视频地址 一、小黑记事本 效果图 主代码 <!DOCTYPE html> <html lang"en"> <head><meta charset"UTF-8"/><meta http-equiv"X-UA-Compatible&…

C# CAD2016 cass10宗地Xdata数据写入

一、 查看cass10写入信息 C# Cad2016二次开发获取XData信息&#xff08;二&#xff09; 一共有81条数据 XData value: QHDM XData value: 121321 XData value: SOUTH XData value: 300000 XData value: 141121JC10720 XData value: 权利人 XData value: 0702 XData value: YB…

卫星地面站监测系统仿真

当今世界&#xff0c;大国竞争日趋激烈&#xff0c;国际关系愈发紧张&#xff0c;信息与通信已经是当下高度信息化社会的“命脉”&#xff0c;信息只有经过有效且广泛地传播&#xff0c;才能成为一种有利用价值的资源&#xff0c;产生经济效益、推动社会发展。通信技术在发展的…

【必备清单】开学运动好物清单,迎接新学期,打造健康体魄!

随着新学期的开始&#xff0c;校园里的氛围渐渐热络起来。作为一名学生&#xff0c;除了学习之外&#xff0c;参与体育运动也是非常重要的。不仅可以锻炼身体&#xff0c;提高身体素质&#xff0c;还能增加社交机会&#xff0c;丰富学校生活。然而&#xff0c;想要成为一名校园…
最新文章