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代码:

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 代码:

html 复制代码
<template>
	<div>欢迎您!!{{msg}}</div>
</template>

<script>
	module. Exports= {

				data: function(){

					return{
						msg:"child component"
					}

				}
			}
</script>

3、页面渲染结果:

​​​​​​​

三、vue3引用列子

1、html代码:

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} = Vue
			 createApp({
			 	components:{
			 		test  //也可以:"test":test
			 	},
			 	data:function(){
			 		return{
			 			msg:"hello world"
			 		}
			 	}

			 }).mount('#app')

		</script>
	</body>
</html>

2、js代码:

javascript 复制代码
const dd=`
<div>
<h1>wo shi child component</h1>
<h2>{{msg}}</h2>
</div>`

export default {
	data: function () {
		return {
			msg: 'child component'
		}

	},
  	template: dd
}

3、页面渲染结果:

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

相关推荐
生椰拿铁You37 分钟前
10 —— Webpack打包模式
前端·webpack·node.js
liangshanbo121543 分钟前
创建可重用React组件的实用指南
前端·javascript·react.js
gma9991 小时前
JSONCPP 数据解析与序列化
开发语言·前端·javascript·c++
sky_feiyu1 小时前
前端HTML
前端·html
随·枫1 小时前
html渲染优先级
前端·html
码蜂窝编程官方1 小时前
【含开题报告+文档+PPT+源码】基于SSM的电影数据挖掘与分析可视化系统设计与实现
java·vue.js·人工智能·后端·spring·数据挖掘·maven
小扳2 小时前
Web 毕设篇-适合小白、初级入门练手的 Spring Boot Web 毕业设计项目:电影院后台管理系统(前后端源码 + 数据库 sql 脚本)
java·前端·数据库·spring boot·mysql·spring·课程设计
田本初2 小时前
从0-1逐步搭建一个前端脚手架工具并发布到npm
前端·npm·node.js
Marshall35722 小时前
Canvas 和 SVG 的高级使用与性能优化
前端·svg·canvas
chusheng18403 小时前
Java基于SpringBoot+Vue的藏区特产销售平台
java·vue.js·spring boot·藏区特产销售平台·特产销售平台