<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div id="app">
<!--header是公共頭部,這里放個容器,頭部將會被加載到這里-->
<div id="common-header"></div>
<!--下面是其他本頁的其他內容-->
<div>正文內容區域</div>
</div>
</body>
<script src="https://unpkg.com/vue"></script>
<script type="text/javascript">
//這里寫公用頭部
//官網提供了vue.extend構造方法,直接用
var header = Vue.extend({
template: '<div class="wrap"><span>{{a}}</span><p>{{b}}</p></div>',
data: function () {
return {
a: 1,
b: '嘿嘿'
}
}
});
var commonHeader = new header();
</script>
<script type="text/javascript">
//這里將公共部分的頭部加載進來,加載到我們在本頁給的容器中
commonHeader.$mount('#common-header');
//本頁的js
var myApp = new Vue({
el: '#app',
data: {
}
});
/* 一點感覺
* 1.一般來說,我們不會直接瀏覽器引用vue.js開發項目;感覺怪怪的,
* 2.被迫開發一個頁面中直接引用vue.js+jquery的項目,確實很快,30個頁面的項目,兩個人(后端接口已經有),三周過審上線
* */
</script>
</html>
更新如下,可以對比一下
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>vue全局組件</title>
</head>
<body>
<div id="app">
<header>
<my-component></my-component>
</header>
<div class='content'>{{ con }}</div>
</div>
</body>
<script src="https://unpkg.com/vue"></script>
<script type="text/javascript">
//注冊一個全局組件
Vue.component('my-component', {
template: '<p>{{ mes }}</p>',
data: function () {
return {
mes: '嘿嘿'
}
}
});
var myApp = new Vue({
el: '#app',
data: {
con: '內容'
}
})
</script>
</html>