vue组件同时加载问题
在vue应用程序中，您定义了两个自定义组件<header-bar>和<nav-bar>。但是，您发现在同时加载这两个组件时，只会显示一个组件。
问题根源
问题在于您在<script>标签中错误地将组件声明为自闭合标签：
立即学习“前端免费学习笔记（深入）”；
<script src="../assets/scripts/base.js"></script>
<script src="../assets/scripts/index.js"></script>
<script>
var vm = new vue({
el:".content", // 这里有两个点
data:{}
})
</script>vue组件应声明为非自闭合标签，如下所示：
<script src="../assets/scripts/base.js"></script>
<script src="../assets/scripts/index.js"></script>
<script>
var vm = new vue({
el:".content",
data:{}
})
</script>此外，在您的<div>元素中，您将组件声明为自闭合标签：
<div class="content"> <header-bar/> // 这里有一个自闭合标签 <nav-bar/> // 这里有一个自闭合标签 </div>
正确的写法是：
<div class="content"> <header-bar></header-bar> // 这里是非自闭合标签 <nav-bar></nav-bar> // 这里是非自闭合标签 </div>
修正后代码
应用这些更正后，以下是修改后的代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<script src="https://unpkg.com/vue"></script>
<title>Document</title>
</head>
<body>
<div class="content">
<header-bar></header-bar>
<nav-bar></nav-bar>
</div>
</body>
<script>
Vue.component("header-bar", {
data: function() {
return {
homeHref: 'https://www.cnblogs.com',
logo: 'https://cn.vuejs.org/images/logo.png',
title: 'Vue官网图标',
hotTel: '实例'
}
},
template: `
<header>
<div class="heading">
<a :href="homeHref" class="logo">
<img :src="logo" :alt="title" />
</a>
<div class="hotphone">
<div class="icon"></div>
<div class="text">
<h2>全国免费加盟热线：</h2>
<h1>{{hotTel}}</h1>
</div>
</div>
</div>
</header>
`
});
Vue.component("nav-bar", {
data: function() {
var n = 0;
if (window.navActive) {
n = window.navActive;
}
return {
navList: [{
href: 'https://www.cnblogs.com',
title: '博客园'
}],
navActive: n
}
},
template: `
<nav>
<div class="navbar">
<template v-for="(nav,index) in navList">
<a :href="nav.href" class="navmenu" v-html="nav.title"></a>
</template>
</div>
</nav>
`,
mounted: function() {
$("a.navmenu").eq(this.navActive).addClass("active");
}
});
new Vue({
el: '.content',
})
</script>
</html> 
