Vue篇——组件模板抽离的写法

最新推荐文章于 2023-03-30 23:26:26 发布

J-April

最新推荐文章于 2023-03-30 23:26:26 发布

阅读量164

点赞数

分类专栏：前端开发文章标签： vue

本文链接：https://blog.csdn.net/weixin_47016497/article/details/113775612

版权

前端开发专栏收录该内容

12 篇文章 3 订阅

订阅专栏

组件模板抽离的写法

方法一：使用JavaScript标签分离模板

方法二：使用template标签分离模板

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<div id="app">
			<cpn></cpn>
			<tmp></tmp>
		</div>
	</body>
	<script src="https://cdn.bootcss.com/vue/2.5.2/vue.min.js"></script>
	<script src="https://cdn.bootcss.com/vue-router/3.0.1/vue-router.min.js"></script>
	<script src="https://cdn.bootcss.com/vuex/3.0.1/vuex.min.js"></script>
</html>
<!-- JavaScript标签分离 -->
<script type="text/x-template" id="cpn">
	<div>
		<h2>JavaScript标签分离模板</h2>
	</div>
</script>
<!-- template标签分离 -->
<template id="tmp">
	<div>
		<h2>template标签分离模板</h2>
	</div>
</template>

<script>
	Vue.component('cpn', {
		template:'#cpn'
	}),
	Vue.component('tmp', {
		template:'#tmp'
	})
	
	new Vue({
		el: '#app'
	})
</script>

优惠劵

J-April

关注关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
Vue篇——组件模板抽离的写法

组件模板抽离的写法方法一：使用JavaScript标签分离模板方法二：使用template标签分离模板<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title></title> </head> <body> <div id="app"> <cpn></cpn> <tmp&g
复制链接

扫一扫