HTML文档编写实践

最新推荐文章于 2024-09-25 09:01:21 发布

c2syd

最新推荐文章于 2024-09-25 09:01:21 发布

阅读量75

点赞数

文章标签： html vue.js 前端

本文链接：https://blog.csdn.net/c2syd/article/details/127146685

版权

运行效果：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="https://unpkg.com/vue@next"></script>
	</head>
	<body>
		<div id="app">
			<cp></cp>
            <app></app>
		</div>
		<template id="cp">
			<p>
				{{mn}}
				<button @click="fun">反馈</button>
			</p>
		</template>

		<script>
			//全局组件开发  template 可视区域
			const cp = {
				data() {
					return {
						mn: '斗罗大陆'
					}
				},
				methods: {
					fun() {
						alert('影片真好看!!')
					}
				},
				template:'#cp'
			}

		
			const app = {
				data() {
					return {

					}
				},
				template:'<h3>MMMMMMMM</h3>'

			}

			let vm = Vue.createApp({}) //创建vue应用
			//注册组件
			vm.component('cp', cp)
			
			vm.component('app',app)

			vm.mount('#app') //挂载到html结构里
		</script>
	</body>
</html>