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

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

相关推荐
懒大王95272 小时前
echarts+HTML 绘制3d地图,加载散点+散点点击事件
前端·html·echarts
Yolo@~8 小时前
个人网站:基于html、css、js网页开发界面
javascript·css·html
斯~内克8 小时前
Electron 菜单系统深度解析:从基础到高级实践
前端·javascript·electron
数据知道8 小时前
【YAML】一文掌握 YAML 的详细用法(YAML 备忘速查)
前端·yaml
清风絮柳8 小时前
51. “闲转易”交易平台小程序(基于springboot&vue)
vue.js·spring boot·小程序·毕业设计·校园二手交易平台·二手交易小程序·闲转易交易系统
dr李四维8 小时前
vue生命周期、钩子以及跨域问题简介
前端·javascript·vue.js·websocket·跨域问题·vue生命周期·钩子函数
旭久8 小时前
react+antd中做一个外部按钮新增 表格内部本地新增一条数据并且支持编辑删除(无难度上手)
前端·javascript·react.js
windyrain8 小时前
ant design pro 模版简化工具
前端·react.js·ant design
浪遏8 小时前
我的远程实习(六) | 一个demo讲清Auth.js国外平台登录鉴权👈|nextjs
前端·面试·next.js
GISer_Jing9 小时前
React-Markdown详解
前端·react.js·前端框架