vue2和vue3在html中引用组件component方式不一样

我的vue版本是:20.17.0

一、在HTML中,引用组件格式区别

vue2引用组件可以是file.vue格式,需要导入:<script src="https://unpkg.com/http-vue-loader"></script>才可以识别vue格式。

vue3引用组件格式是:file.js。

二:vue2引用列子

1、html代码:

<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title>vue2引用组件例子</title><script type="text/javascript" src="./vue2框架包/vue.js" ></script><script type="text/javascript" src="./vue2框架包/http_vue_loader.js" ></script></head><body><div id="app"><h1>Hello Vue</h1><h1>{{msg}}</h1><testvue/></div><script>var v=new Vue({el:"#app",components:{"testvue": httpVueLoader("./testvue.vue")},data:function(){return{msg:"hello"}}})</script></body>
</html>

2、vue 代码:

<template><div>欢迎您!!{{msg}}</div>
</template><script>module. Exports= {data: function(){return{msg:"child component"}}}
</script>

3、页面渲染结果:     

                   ​​​​​​​         

三、vue3引用列子

1、html代码:

<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title>vue3 组件导入</title><script src="https://unpkg.com/vue@3/dist/vue.global.js"></script></head><body><div id="app"><h1>Hell Vue3</h1><h1>{{msg}}</h1><test/></div><script type="module">import test from "./testvue.js"const {createApp,ref,watch} = VuecreateApp({components:{test  //也可以:"test":test},data:function(){return{msg:"hello world"}}}).mount('#app')</script></body>
</html>

2、js代码:

const dd=`
<div>
<h1>wo shi child component</h1>
<h2>{{msg}}</h2>
</div>`export default {data: function () {return {msg: 'child component'}},template: dd
}

3、页面渲染结果:

        ​​​​​​​        ​​​​​​​        

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

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

相关文章

量子容错计算

基本思想 容错量子计算的基本想法是&#xff0c;在合理编码后的量子态上直接量子计算&#xff0c;以至于不完全需要解码操作。假设有一个简单的量子电路&#xff0c;但不幸的是噪声影响着这个电路的每一个元件&#xff0c;包括量子态的制备、量子逻辑门、对输出的测量&#x…

Redis 哨兵 总结

前言 相关系列 《Redis & 目录》《Redis & 哨兵 & 源码》《Redis & 哨兵 & 总结》《Redis & 哨兵 & 问题》 参考文献 《Redis的主从复制和哨兵机制详解》《Redis中的哨兵&#xff08;Sentinel&#xff09;》《【Redis实现系列】Sentinel自动故…

怎样取消默认逐份打印

如果你遇到打印任务不完成&#xff0c;无法打印下一张的情况&#xff0c;可以尝试下面步骤解决问题&#xff1a; 取消勾选 逐份打印 1、检查打印机状态&#xff1a; 确保打印机与电脑处于联机状态&#xff0c;指示灯应常亮&#xff1b; 2、取消“逐份打印”&#xff1a; 打…

音视频如何轻松转换?来看看这四款工具:

在这个数据普及的时代&#xff0c;视频图片文字等形式的记录&#xff0c;变成了我们习以为常&#xff0c;而传统的文字往往具有搞得信息密度和更强的传播力&#xff1b;我是经常需要将视频内容转换成文&#xff0c;深有体会当下时代将视频内容转化为文字的需求越来越旺盛了&…

highcharts的datalabels标签格式化

Highcharts的数据标签格式化 代码如下 plotOptions: {series: {dataLabels: {enabled: true,format: {y:.2f} mm}} },y就是当前数据点的值&#xff0c;.2f代表2位小数&#xff0c;效果如下图

卡尔曼滤波器-Kalmen Filter-1

卡尔曼滤波器是一种最优递归数据处理算法&#xff0c;它更像是一种观测器&#xff0c;而不是一般意义上的滤波器。卡曼滤波器的应用非常广泛&#xff0c;尤其是在导航当中。它的广泛应用是因为我们生活的世界中存在着大量的不确定性&#xff0c;当我们去描述一个系统的时候&…

YOLOV8 |搞懂检测头

代码: yaml结构的最后一层&#xff0c;接了前面三个层的&#xff0c;有3个检测头&#xff1a; # YOLOv8.0n head head:- [-1, 1, nn.Upsample, [None, 2, "nearest"]]- [[-1, 6], 1, Concat, [1]] # cat backbone P4- [-1, 3, C2f, [512]] # 12- [-1, 1, nn.Upsam…

池化层笔记

池化层 文章目录 池化层二维池化层超参数池化层的分类代码实现填充和步幅 多个通道 总结 卷积对位置敏感&#xff0c;可以检测垂直边缘。需要有一定程度的平移不变性&#xff0c;而在平时图片的拍摄&#xff0c;会因为图片的照明&#xff0c;物体位置&#xff0c;比例&#xff…

大数据-191 Elasticsearch - ES 集群模式 配置启动 规划调优

点一下关注吧&#xff01;&#xff01;&#xff01;非常感谢&#xff01;&#xff01;持续更新&#xff01;&#xff01;&#xff01; 目前已经更新到了&#xff1a; Hadoop&#xff08;已更完&#xff09;HDFS&#xff08;已更完&#xff09;MapReduce&#xff08;已更完&am…

mysql 5.7实现组内排序(连续xx天数)

需求&#xff1a;查询出连续登录的用户及其连续登录的天数 我先说一下思路&#xff1a;要实现连续登录的判断&#xff0c;可以找一下他们之间的规律。这里我拿一个用户来说&#xff0c;如果这个用户在1、2、3号都有登录记录&#xff0c;可以对这个用户的数据按照时间排序&…

J3学习打卡

&#x1f368; 本文为&#x1f517;365天深度学习训练营 中的学习记录博客&#x1f356; 原作者&#xff1a;K同学啊 DensNet模型 import matplotlib.pyplot as plt import tensorflow as tf from tensorflow.keras import layers, models, initializersclass DenseLayer(lay…

基于微信小程序的小区管理系统设计与实现(lw+演示+源码+运行)

摘 要 社会发展日新月异&#xff0c;用计算机应用实现数据管理功能已经算是很完善的了&#xff0c;但是随着移动互联网的到来&#xff0c;处理信息不再受制于地理位置的限制&#xff0c;处理信息及时高效&#xff0c;备受人们的喜爱。所以各大互联网厂商都瞄准移动互联网这个潮…

随机变量、取值、样本和统计量之间的关系

1. 随机变量 (Random Variable) 随机变量是用来量化随机现象结果的一种数学工具。随机变量是一个函数&#xff0c;它将实验结果映射到数值。随机变量可以是离散的或连续的。 离散随机变量&#xff1a;取有限或可数无限个值。例如&#xff0c;掷骰子的结果。连续随机变量&…

Matlab实现蚁群算法求解旅行商优化问题(TSP)(理论+例子+程序)

一、蚁群算法 蚁群算法由意大利学者Dorigo M等根据自然界蚂蚁觅食行为提岀。蚂蚁觅食行为表示大量蚂蚁组成的群体构成一个信息正反馈机制&#xff0c;在同一时间内路径越短蚂蚁分泌的信息就越多&#xff0c;蚂蚁选择该路径的概率就更大。 蚁群算法的思想来源于自然界蚂蚁觅食&a…

给哔哩哔哩bilibili电脑版做个手机遥控器

前言 bilibili电脑版可以在电脑屏幕上观看bilibili视频。然而&#xff0c;电脑版的bilibili不能通过手机控制视频翻页和调节音量&#xff0c;这意味着观看视频时需要一直坐在电脑旁边。那么&#xff0c;有没有办法制作一个手机遥控器来控制bilibili电脑版呢&#xff1f; 首先…

JavaEE初阶---网络原理之TCP篇(二)

文章目录 1.断开连接--四次挥手1.1 TCP状态1.2四次挥手的过程1.3time_wait等待1.4三次四次的总结 2.前段时间总结3.滑动窗口---传输效率机制3.1原理分析3.2丢包的处理3.3快速重传 4.流量控制---接收方安全机制4.1流量控制思路4.2剩余空间大小4.3探测包的机制 5.拥塞控制---考虑…

【C语言刷力扣】3216.交换后字典序最小的字符串

题目&#xff1a; 解题思路&#xff1a; 字典序最小的字符串&#xff1a;是指按照字母表顺序排列最前的字符串。即字符串在更靠前的位置出现比原字符串对应字符在字母表更早出现的字符。 枚举数组元素&#xff0c;尽早将较小的同奇偶的相邻字符交换。 char* getSmallestString…

Java:Map和Set练习

目录 查找字母出现的次数 只出现一次的数字 坏键盘打字 查找字母出现的次数 这道题的思路在后面的题目过程中能用到&#xff0c;所以先把这题给写出来 题目要求&#xff1a;给出一个字符串数组&#xff0c;要求输出结果为其中每个字符串及其出现次数。 思路&#xff1a;我…

【宠粉赠书】大模型项目实战:多领域智能应用开发

在当今的人工智能与自然语言处理领域&#xff0c;大型语言模型&#xff08;LLM&#xff09;凭借其强大的生成与理解能力&#xff0c;正在广泛应用于多个实际场景中。《大模型项目实战&#xff1a;多领域智能应用开发》为大家提供了全面的应用技巧和案例&#xff0c;帮助开发者深…

【商汤科技-注册/登录安全分析报告】

前言 由于网站注册入口容易被黑客攻击&#xff0c;存在如下安全问题&#xff1a; 暴力破解密码&#xff0c;造成用户信息泄露短信盗刷的安全问题&#xff0c;影响业务及导致用户投诉带来经济损失&#xff0c;尤其是后付费客户&#xff0c;风险巨大&#xff0c;造成亏损无底洞…