Vue3---基础2(component)

news2024/7/5 0:03:46

主要讲解 component 的创建

以及vue插件的安装

Vue.js Devtools

        为谷歌浏览器的Vue插件,可以在调试工具内查看组件的数据等

      下载

        有两种下载方式

        1. 谷歌应用商店

        

        

        打开Chrome应用商店去下载,这个方法需要魔法

        

        2. 极简插件

        极简插件官网_Chrome插件下载_Chrome浏览器应用商店

        搜索 Vue

        

        这个就为我们需要的插件

        

        推荐下载,下载后解压

        

        把后缀为 crx 的文件拖动到扩展应用内

        

        添加扩展应用,就可以使用该插件了

        

components 文件

        components文件为放置需要复用的组件的文件

      新建组件

                在src内创建 components 文件夹

                在文件夹内新创建 abc.vue 文件

                在 abc 文件内写入需要复用的内容

                

      使用组件

                在要使用的页面内先引用

import person from './components/person.vue'

                在 components 内注册

export default {
    name:'App', // 组件名
    components: {person} // 注册组件
}

                在结构上使用该组件

<template>
    <div class="app">
        <h1>hello,world!</h1>
        <person></person>
    </div>
</template>

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

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

OpenC910 datasheet 2.0 翻译

概述 C910是由THEAD半导体有限公司开发的一款RISC-V兼容的64位高性能处理器。它通过架构和微架构创新&#xff0c;在控制流、计算和频率方面提供行业领先的性能。C910处理器基于RV64GC指令集&#xff0c;并实现了XIE&#xff08;XuanTie指令扩展&#xff09;技术。C910采用先进…

Python自动化测试怎么去学习?熬夜7天整理出这一份3000字学习指南!

一、Python常用领域 Python用于简单脚本编程&#xff0c;如编写2048小游戏或12306的自动抢票软件&#xff1b;Python用于系统编程&#xff0c;如开发系统应用&#xff1b;Python用于开发网络爬虫&#xff1b;网络爬虫的用途是进行数据采集&#xff0c;也就是将互联网中的数据采…

OSPF中配置静态路由负载分担实验简述

OSPF中配置静态路由负载分担 实验简述 在静态路由负载分担中&#xff0c;多个路由器被配置为共享负载的目标&#xff0c;以实现流量的均衡分配。 到达目的地有N条相同度量值的路径&#xff0c;默认值60&#xff0c;N条路由是等价路由&#xff0c;数据报文在N条链路上轮流发送。…

力扣刷题 二叉树遍历的统一迭代法

题干 给定一个二叉树的根节点 root &#xff0c;返回 它的 前中后序 遍历 。 示例 1&#xff1a; 输入&#xff1a;root [1,null,2,3] 输出&#xff1a;[1,3,2]示例 2&#xff1a; 输入&#xff1a;root [] 输出&#xff1a;[]示例 3&#xff1a; 输入&#xff1a;root […

C++设计模式:构建器模式(九)

1、定义与动机 定义&#xff1a;将一个复杂对象的构建与其表示相分离&#xff0c;使得同样的构建过程&#xff08;稳定&#xff09;可以创建不同的表示&#xff08;变化&#xff09; 动机&#xff1a; 在软件系统中&#xff0c;有时候面临着“一个复杂对象”的创建工作&#x…

基于SSM的课程进度管理系统的设计与实现

摘要&#xff1a; 在信息技术飞速发展的当下&#xff0c; 借助互联网平台以及功能性系统的支持&#xff0c;人们获取信息以及信息整合的通道越来越多元化。系统和平台帮助人们实现了信息的共享&#xff0c;同时帮助人们更加直观的看到成果和过程的变动。以课程进度管理为例&…

python使用uiautomator2操作雷电模拟器9找图

接上篇文章python使用uiautomator2操作雷电模拟器9并遇到解决adb 连接emulator-5554 unauthorized问题-CSDN博客 搭建好uiautomator2后&#xff0c;主要就是使用了。 本文就利用uiautomator2的截屏、模拟点击和aircv的找图功能&#xff0c;实现对指定寻找的图片的位置的点击。…

HikariPool-1 - jdbcUrl is required with driverClassName.

文章目录 前言一、问题提示二、如何改进1.原来配置2.应该修改成 总结 前言 这是在配置数据库发生多数据源产生的错误 一、问题提示 二、如何改进 1.原来配置 2.应该修改成 总结 以上就是今天要讲的内容&#xff0c;本文仅仅简单介绍了springboot多数据源报错问题

Leetcode算法训练日记 | day17

一、平衡二叉树 1.题目 Leetcode&#xff1a;第 110 题 给定一个二叉树&#xff0c;判断它是否是 平衡二叉树 示例 1&#xff1a; 输入&#xff1a;root [3,9,20,null,null,15,7] 输出&#xff1a;true示例 2&#xff1a; 输入&#xff1a;root [1,2,2,3,3,null,null,4,4]…

旋转链表--快慢指针思想

相似题型&#xff1a;删除链表的第倒数第n个节点&#xff0c;建议先做&#xff0c;有利于理解 class Solution {public ListNode rotateRight(ListNode head, int k) {ListNode prehead;ListNode firsthead;ListNode secondhead;ListNode lenpre;int length1;if(headnull)retu…

Linux——fork复制进程

1)shell: 在计算机科学中&#xff0c;Shell俗称壳&#xff08;用来区别于核&#xff09;&#xff0c;是指“为使用者提供操作界面”的软件&#xff08;command interpreter&#xff0c;命令解析器&#xff09;。它类似于DOS下的COMMAND.COM和后来的cmd.exe。它接收用户命令&…

R数据分析:网状meta分析的理解与实操

meta分析之前有给大家写过&#xff0c;但是meta分析只能比较两个方法。经常是被用来证明在现有研究中显示矛盾结果的干预方法到底有没有效的时候使用&#xff0c;通过证据综合得到某种干预到底有没有用的结论。但是如果我要证明好几种方法到底哪个最优&#xff0c;这个时候meta…

谈谈功率IC巨头—士兰微

大家好&#xff0c;我是砖一。 今天给大家分享一下士兰微电子公司&#xff0c;&#xff0c;有做功率元器件&开关电源和IC的朋友可以了解一下&#xff0c;希望对你有用~ 1 公司介绍 士兰微电子成立于1997年&#xff0c;于2003年上市&#xff0c;总部位于杭州&#xff0c;…

智能面试——录音及播放下载js-audio-recorder — post请求,formdata传参

录音插件 js-audio-recorder bug&#xff1a;本地调试调取不起来麦克风 浏览器配置安全域名 chrome://flags/Insecure origins treated as secure输入域名即可电脑需要连接上耳机 <template><div class"BaseRecorder"><div class"BaseRecorder-r…

seo调优

SEO 网站地图&#xff1a;sitemap.xmlrobots.txtxxx.com/www.xxx.com 解析到服务器&#xff0c;xxx.com 301 到 www.xxx.comhttps百度站点管理标题描述关键词标签语义化内链外链死链链接html结尾友情链接前端架构 注意&#xff1a;已收录链接&#xff0c;禁止改变链接地址 ro…

【C++第三阶段】deque容器评委打分案例

以下内容仅为当前认识&#xff0c;可能有不足之处&#xff0c;欢迎讨论&#xff01; 文章目录 构造函数赋值操作大小操作插入删除数据存取排序评委评分案例描述 deque容器 双端数组&#xff0c;可以对头端插入删除操作。 如下图所示。 头部有插入删除操作&#xff0c;尾部亦然…

国内如何实现GPT升级付款

本来想找国外的朋友代付的&#xff0c;但是他告诉我他的信用卡已经被绑定了他也升级了所以只能自己想办法了。就在一位博主下边发现了这个方法真的可以。只是需要与支付宝验证信息。刚开始不敢付款害怕被骗哈哈&#xff0c;我反诈骗意识绝对杠杠的 该方法就是我们办理一张虚拟…

After Effects 2024 中文激活版 高效工作流程与创新的视觉特效 mac/win

After Effects 2024是Adobe公司推出的一款专业视频特效制作软件&#xff0c;广泛应用于电影、电视、动画等媒体制作领域。它凭借强大的功能和灵活的操作&#xff0c;帮助用户轻松创建电影级影片字幕、片头和过渡效果&#xff0c;以及实现立体效果和动态场景的切换。 同时&#…

Java-接口—知识(基础)

承接上一节&#xff0c;我们讨论了抽象类和抽象方法。 那我们尝试在抽象的道路上走的更远一点&#xff0c;先来总结一下抽象&#xff1b; 抽象类&#xff1a;类中的属性规范了子类必须有什么样的特征&#xff0c;有什么状态。类中的方法规范了子类必须有什么行为&#xff0c;…

【Spring Security】2.实现最简单的身份验证

文章目录 一、找到官网的身份认证&#xff08;authentication&#xff09;示例代码二、实现最简单的身份验证1、创建Spring Boot项目2、创建IndexController3、创建index.html4、启动项目测试Controller 三、{/logout}的作用四、页面样式无法加载的问题 一、找到官网的身份认证…