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

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

相关推荐
天蓝色的鱼鱼12 分钟前
前端开发者的组件设计之痛:为什么我的组件总是难以维护?
前端·react.js
codingandsleeping13 分钟前
使用orval自动拉取swagger文档并生成ts接口
前端·javascript
石金龙1 小时前
[译] Composition in CSS
前端·css
白水清风1 小时前
微前端学习记录(qiankun、wujie、micro-app)
前端·javascript·前端工程化
Ticnix1 小时前
函数封装实现Echarts多表渲染/叠加渲染
前端·echarts
用户22152044278001 小时前
new、原型和原型链浅析
前端·javascript
阿星做前端1 小时前
coze源码解读: space develop 页面
前端·javascript
叫我小窝吧1 小时前
Promise 的使用
前端·javascript
NBtab2 小时前
Vite + Vue3项目版本更新检查与页面自动刷新方案
前端
天天扭码2 小时前
来全面地review一下Flex布局(面试可用)
前端·css·面试