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

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

相关推荐
祝余呀19 分钟前
HTML初学者第三天
前端·html
就爱瞎逛35 分钟前
TailWind CSS Intellisense 插件在VSCode 上不生效
前端·css·vscode·tailwind
柚子81638 分钟前
sibling-index:我用这个画时钟表盘
前端·css
UI设计和前端开发从业者1 小时前
UI前端大数据处理策略优化:基于云计算的数据存储与计算
前端·ui·云计算
前端小巷子1 小时前
Web开发中的文件上传
前端·javascript·面试
翻滚吧键盘2 小时前
{{ }}和v-on:click
前端·vue.js
上单带刀不带妹2 小时前
手写 Vue 中虚拟 DOM 到真实 DOM 的完整过程
开发语言·前端·javascript·vue.js·前端框架
杨进军3 小时前
React 创建根节点 createRoot
前端·react.js·前端框架
ModyQyW3 小时前
用 AI 驱动 wot-design-uni 开发小程序
前端·uni-app
说码解字3 小时前
Kotlin lazy 委托的底层实现原理
前端