.html页面引入vue并使用公共组件

问题描述：整体项目采用传统 .html 文件搭建，vue仅作为渲染数据工具使用，需要使用的地方使用 <script> 标签引入。现有数个页面，每个页面都包含相同 header 和 footer ，希望可以把 header 和 footer 提取出来，避免太多重复代码。解决办法公共部分写在 .js 文件里，本质就是在当前页面中写的公共组件，组件规则遵从vue的组件规则。temp...

肥喵蒙太奇

37636人浏览 · 2019-09-10 14:42:39

肥喵蒙太奇 · 2019-09-10 14:42:39 发布

问题描述：
整体项目采用传统 .html 文件搭建，vue仅作为渲染数据工具使用，需要使用的地方使用 <script> 标签引入。
现有数个页面，每个页面都包含相同 header 和 footer ，希望可以把 header 和 footer 提取出来，避免太多重复代码。

解决办法
公共部分写在 .js 文件里，本质就是在当前页面中写的公共组件，组件规则遵从vue的组件规则。
template后面可以采用字符串拼接(内容少)，或者是使用 `定义模板字符串。

目录结构：

—test
——header.js //公共头部
——index.html //页面
——vue.js
在这里插入图片描述
index.html

<!doctype html>
<html>
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
		<title>test</title>
		<!--引入vue-->
		<script type="text/javascript" src="vue.js"></script>
		<!--引入公共组件-->
		<script type="text/javascript" src="header.js"></script>
	</head>
	<body style="font-size: 30px">
		<div id="vue_app">
			<!--自定义的组件使用-->
			<common-head></common-head>
			<!--页面自有内容-->
			<div style="background: #fba">我是内容</div>
		</div>
		</div>
	<script>
		//vue
		app_all=new Vue({
			el: "#vue_app"
		})
	</script>
	</body>

</html>

header.js

/*Vue.component('common-head',{
	template:'<div>'+
				'<h1>hhhhhhh</h1>' + 
				'<h1>duusdfsjkdfh</h1>' +
			  '</div>'
});*/
Vue.component('common-head',{
	template:`<div style="background: #baf">
				<h1>这是公共组件</h1>
				<h1>公共的头部</h1>
			  </div>`
});

Vue

前往低代码交流专区

更多推荐

vue 表单验证

1、6位小写字母和数字必须包含两个字母rules: [{ required: true, message: "XXX不能为空", trigger: "blur" },{ max: 6, message: "最大长度为6位字符", trigger: "blur" },{pattern: /^(?=(?:[^a-z]*[a-z]){2})[a-z0-9]{6,6}$/, //不连续的两位字母// /^