vue 简单实验 自定义组件 独立模块

1.概要

2.代码

2.1

const Counter = {
  data() {
    return {
      counter: 0
    }
  },
  template:`
    <div>
  		Counter: {{ counter }}
	</div>`
}

export default Counter

 2.2

import Counter from './t2.js'

const app = Vue.createApp({
  components: {
    'component-a': Counter
  }
})

app.mount('#counter')

2.3

<html>
</html>
<script src="https://unpkg.com/vue@next" rel="external nofollow" ></script>
<script type="module" src="./t1.js"></script>
<body>
	<div id="counter">
  		<component-a></component-a>
	</div>
</body>

3.实验结果

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

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

相关文章

Docker 的数据管理与镜像

Docker 的数据管理与镜像 一、Docker 的数据管理1.数据卷2.数据卷容器3.端口映射4.容器互联&#xff08;使用centos镜像&#xff09; 二、Docker 镜像的创建1.基于现有镜像创建2.基于本地模板创建3.基于Dockerfile 创建 三、Dockerfile 操作常用的指令&#xff1a;1.FROM 镜像2…

科技资讯|三星再申请智能戒指商标,智能穿戴进入更小型化发展

三星正在积极扩展可穿戴设备生态&#xff0c;近日向英国知识产权局提交了名为“Samsung Curio”的新商标&#xff0c;其分类为“Class 9”&#xff0c;可能会用于未来的智能戒指。 智能戒指&#xff1a; 可穿戴计算机本质上的智能手环、智能项链、智能眼镜和智能戒指&#xff1…

【实操干货】如何开始用Qt Widgets编程?(三)

Qt 是目前最先进、最完整的跨平台C开发工具。它不仅完全实现了一次编写&#xff0c;所有平台无差别运行&#xff0c;更提供了几乎所有开发过程中需要用到的工具。如今&#xff0c;Qt已被运用于超过70个行业、数千家企业&#xff0c;支持数百万设备及应用。 在本文中&#xff0…

三维重建_体素重建_空间雕刻法/体素着色法

目录 1. 三角化和体素重建的区别 2. 空间雕刻法 空间雕刻法的一致性定义 空间雕刻法具体实现 基于八叉树的空间雕刻法具体实现​编辑 空间雕刻法效果展示 3. 体素着色法 体素着色法的缺点&#xff1a;不唯一性​编辑 体素着色法不唯一性解决措施​编辑 体素着色发实验环境与…

基于 SVG 的图形交互方案实践

不知道从什么时候起&#xff0c;人们开始喜欢上数字大屏这种“花里胡哨”的东西&#xff0c;仿佛只要用上“科技蓝”这样神奇的色调&#xff0c;就可以让一家公司焕然一新&#xff0c;瞬间变得科技感满满。不管数字大屏的实际意义&#xff0c;是用来帮助企业监控和决策&#xf…

PyTorch DataLoader 报错 “DataLoader worker exited unexpectedly“ 的解决方案

注意&#xff1a;博主没有重写d2l的源代码文件&#xff0c;而是创建了一个新的python文件&#xff0c;并重写了该方法。 一、代码运行日志 C:\Users\Administrator\anaconda3\envs\limu\python.exe G:/PyCharmProjects/limu-d2l/ch03/softmax_regression.py Traceback (most r…

solidity0.8.0的应用案例12:通用可升级合约UUPS

代理合约中选择器冲突(Selector Clash)的另一个解决办法:通用可升级代理(UUPS,universal upgradeable proxy standard)。代码由OpenZeppelin的UUPSUpgradeable简化而成,不应用于生产。 UUPS 作为透明代理的替代方案,UUPS也能解决"选择器冲突"(Selector Cl…

CSDN编程题-每日一练(2023-08-25)

CSDN编程题-每日一练&#xff08;2023-08-25&#xff09; 一、题目名称&#xff1a;影分身二、题目名称&#xff1a;小鱼的航程(改进版)三、题目名称&#xff1a;排查网络故障 一、题目名称&#xff1a;影分身 时间限制&#xff1a;1000ms内存限制&#xff1a;256M 题目描述&am…

pnpm无法加载文件 (解决方法 )

现在要运行一个TS的项目&#xff0c;我的电脑上没有安装pnpm&#xff0c;导致我的vscode一直报错无法加载。 pnpm安装&#xff1a; npm install -g pnpm pnpm : 无法加载文件 pnpm : 无法加载文件 C:\Users\HP\AppData\Roaming\npm\pnpm.ps1&#xff0c;因为在此系统上禁止运…

adb shell setprop 、开发者选项

App性能调试详解 Android App性能监控工具 更多系统属性参考 一、开启 GPU Render 的profiling bar&#xff1a; Gpu渲染速度 adb shell setprop debug.hwui.profile true adb shell setprop debug.hwui.profile visual_bars adb shell setprop debug.hwui.profile visual…

GO-vscode远程开发和调试

本文内容主要包括&#xff1a; 概述&#xff1a; 主要就是把代码放到服务器上然后远程去开发和调试 工具&#xff1a; vscode 远程端&#xff1a; linux 一.安装远程插件 vscode安装Remote - SSH&#xff0c;Remote Explorer&#xff0c;Remote Development&#xff0c…

pdf编辑文字怎么编辑?这几种简单编辑方法看一看

pdf编辑文字怎么编辑&#xff1f;PDF文件是一种普遍的文档格式&#xff0c;但是在编辑时却比较困难。幸运的是&#xff0c;有许多PDF编辑器可以帮助我们轻松地编辑PDF文件。本文将介绍一些简单的PDF编辑方法&#xff0c;跟着我一起来看看吧&#xff01; 第一种方法&#xff1a;…

无涯教程-Python - 多线程

运行多个线程类似于同时运行多个不同的程序&#xff0c;但具有以下优点- 一个进程中的多个线程与主线程共享相同的数据空间&#xff0c;因此比起单进程&#xff0c;它们可以更轻松地共享信息或彼此通信。有时称为轻量级进程的线程&#xff0c;它们不需要太多的内存开销。 开始…

Socket基本原理

一、简单介绍 Socket&#xff0c;又称套接字&#xff0c;是Linux跨进程通信&#xff08;IPC&#xff0c;Inter Process Communication&#xff09;方式的一种。相比于其他IPC方式&#xff0c;Socket牛逼在于可做到同一台主机内跨进程通信&#xff0c;不同主机间的跨进程通信。…

webscoket在vue中的使用

项目场景&#xff1a; 提示&#xff1a;项目相关背景&#xff1a; 什么是webscoket&#xff1f;: WebSocket是一种计算机通信协议&#xff0c;通过单个TCP连接提供全双工通信信道。实现了web客户端和服务器之间的实时通信&#xff0c;与传统的HTTP连接相比&#xff0c;允许以…

Android JNI系列详解之CMake编译工具的使用

一、CMake工具的介绍 如图所示&#xff0c;CMake工具的主要作用是&#xff0c;将C/C编写的native源文件编译打包生成库文件&#xff08;包含动态库或者静态库文件&#xff09;&#xff0c;集成到Android中使用。 二、CMake编译工具的使用 使用主要是配置两个文件&#xff1a;CM…

HelpLook 免费版与商业版的比较,帮助您快速选择!

HelpLook 是一款零代码、开箱即用的帮助中心及博客网站搭建工具&#xff0c;只需简单几步&#xff0c;即可帮助企业、机构、个人发布在线品牌内容站点。 HelpLook 提供多个版本方案供不同需求的用户选择&#xff0c;今天想着重跟大家分享免费版和商业版&#xff0c;将从三个方面…

7、Spring_AOP

一、Spring AOP 简介 1.概述 对于spring来说&#xff0c;有三大组件&#xff0c;IOC&#xff0c;ID&#xff0c;AOP aop概述&#xff1a;AOP(Aspect Oriented Programming)面向切面编程。 作用&#xff1a;不改变原有代码设计的基础上实现功能增强 例子 传统打印日志 使用…

华为云CodeArts Snap 智能编程助手PyCharm实验手册. 插件安装与使用指南

作为一款自主创新的AI代码辅助编程工具&#xff0c;华为云智能编程助手CodeArts Snap目标打造现代化开发新范式。通过将自然语言转化为规范可阅读、无开源漏洞的安全编程语言&#xff0c;提升开发者编程效率&#xff0c;助力企业快速响应市场需求。华为云CodeArts Snap现进入邀…

vue(element ui安装)

目录 一&#xff0c;element ui安装二&#xff0c;main.js三&#xff0c;使用element ui最后 一&#xff0c;element ui安装 先在盘服中找到你创建的node的位置 如有不懂根据可以看看上一章安装node 然后在终端找到 进入这个位置之后就可以安装了 输入npm i element-ui -S这个…