.html页面引入vue并使用公共组件
作者：程序员11 时间：2023-06-21 人气：373 QQ交流群\邮箱:1003265987@qq.com
.html页面引入vue并使用公共组件
要展示的内容
问题描述：
整体项目采用传统 .html 文件搭建，vue仅作为渲染数据工具使用，需要使用的地方使用 <script> 标签引入。
现有数个页面，每个页面都包含相同 header 和 footer ，希望可以把 header 和 footer 提取出来，避免太多重复代码。
解决办法
公共部分写在 .js 文件里，本质就是在当前页面中写的公共组件，组件规则遵从vue的组件规则。
template后面可以采用字符串拼接(内容少)，或者是使用 `定义模板字符串。
目录结构：
——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>`
});
温馨提示:
欢迎阅读本文章，觉得有用就多来支持一下，没有能帮到您，还有很多文章，希望有一天能帮到您。
HTML5-热门文章
活跃用户
