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、页面渲染结果:

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

相关推荐
会豪15 分钟前
Electron-Vite (一)快速构建桌面应用
前端
中微子18 分钟前
React 执行阶段与渲染机制详解(基于 React 18+ 官方文档)
前端
唐某人丶19 分钟前
教你如何用 JS 实现 Agent 系统(2)—— 开发 ReAct 版本的“深度搜索”
前端·人工智能·aigc
中微子20 分钟前
深入剖析 useState产生的 setState的完整执行流程
前端
遂心_1 小时前
JavaScript 函数参数传递机制:一道经典面试题解析
前端·javascript
Gracemark1 小时前
高德地图-地图选择经纬度问题【使用输入提示-使用Autocomplete进行联想输入】(复盘)
vue.js
小徐_23331 小时前
uni-app vue3 也能使用 Echarts?Wot Starter 是这样做的!
前端·uni-app·echarts
RoyLin1 小时前
TypeScript设计模式:适配器模式
前端·后端·node.js
遂心_1 小时前
深入理解 React Hook:useEffect 完全指南
前端·javascript·react.js
Moonbit1 小时前
MoonBit 正式加入 WebAssembly Component Model 官方文档 !
前端·后端·编程语言