前言
vue作為一個(gè)輕量級(jí)前端框架盾似，其核心就是組件化開發(fā)。我們一般常用的是用腳手架vue-cli來進(jìn)行開發(fā)和管理，一個(gè)個(gè)組件即為一個(gè)個(gè)vue頁面零院，這種叫單文件組件溉跃。我們?cè)谝媒M件之時(shí)只需將組件頁面引入，再注冊(cè)即可使用告抄。那么不用腳手架撰茎，如何進(jìn)行組件開發(fā)呢，本文先介紹一下基礎(chǔ)知識(shí)吧打洼。
組件使用流程
1.組件構(gòu)建
1.1 extend構(gòu)建法
調(diào)用Vue.extend()方法龄糊，構(gòu)建一個(gè)名字為myCom的組件
var myCom = Vue.extend({
template: '<div>這是我的組件</div>'
})
其中template定義模板的標(biāo)簽，模板的內(nèi)容需寫在該標(biāo)簽下
1.2 template標(biāo)簽構(gòu)建法
template標(biāo)簽構(gòu)建募疮，需在標(biāo)簽上加id屬性用以后期注冊(cè)
<template id="myCom">
<div>這是template標(biāo)簽構(gòu)建的組件</div>
</template>
1.3 script標(biāo)簽構(gòu)建法
script標(biāo)簽同樣需加id屬性炫惩，同時(shí)還得加type="text/x-template"，加這個(gè)是為了告訴瀏覽器不執(zhí)行編譯里面的代碼
<script type="text/x-template" id="myCom1">
<div>這是script標(biāo)簽構(gòu)建的組件</div>
</script>
2.注冊(cè)組件
（1）全局注冊(cè)：一次注冊(cè)阿浓，可在多個(gè)vue實(shí)例中使用他嚷，需調(diào)用Vue.component()方法，這個(gè)方法需傳2個(gè)參數(shù)搔扁，第一個(gè)參數(shù)為組件名稱爸舒，第二個(gè)參數(shù)為組件構(gòu)造時(shí)定義的變量蟋字。
我們先用全局注冊(cè)注冊(cè)上面例子中創(chuàng)建的myCom組件
Vue.component('my-com',myCom)
還有一種不需構(gòu)建直接注冊(cè)的寫法——注冊(cè)語法糖
Vue.component('my-com',{
'template':'<div>這是我的組件</div>'
})
'my-com'為給組件自定義的名字稿蹲，在使用時(shí)會(huì)用到，后面myCom對(duì)應(yīng)的就是上面構(gòu)建的組件變量鹊奖。
注意命名規(guī)范苛聘，一般組件名字以短橫線分隔或一個(gè)小寫單詞。
例：footer-nav忠聚，footernav
如果是用template及script標(biāo)簽構(gòu)建的組件设哗，第二個(gè)參數(shù)就改為它們標(biāo)簽上的id值
Vue.component('my-com',{
template: '#myCom'
})
（2）局部注冊(cè)：只能在注冊(cè)該組件的實(shí)例中使用
var app = new Vue({
el: '#app',
components: {
'my-com': myCom
}
})
注冊(cè)語法糖
var app = new Vue({
el: '#app',
components: {
'my-com': {
template: '<div>這是我的組件</div>'
}
}
})
template及script構(gòu)建的組件
var app = new Vue({
el: '#app',
components: {
'my-com': {
template: '#myCom'
}
}
})
3.調(diào)用組件
我們只需在需要調(diào)用組件的地方寫上組件名字的標(biāo)簽即可
<div>
/*調(diào)用組件*/
<my-com></my-com>
</div>
4.例子
4.1 全局注冊(cè)
新建一個(gè)html文件，引入vue.js两蟀，并且定義2個(gè)vue實(shí)例app1和app2
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>vue組件</title>
<script src="js/vue.js"></script>
</head>
<body>
<div id="app1">
<my-com></my-com>
</div>
<div id="app2">
<my-com></my-com>
</div>
<script>
/*構(gòu)建組件*/
var myCom = Vue.extend({
template: '<div>這是我的組件</div>'
});
/*全局注冊(cè)組件*/
Vue.component('my-com',myCom);
/*定義vue實(shí)例app1*/
var app1 = new Vue({
el: '#app1'
});
/*定義vue實(shí)例app2*/
var app2 = new Vue({
el: '#app2'
});
</script>
</body>
</html>
打開瀏覽器查看效果
可以看到全局注冊(cè)的組件在實(shí)例app1和實(shí)例app2中都可以被調(diào)用
一次注冊(cè)网梢，多處使用
4.2 局部注冊(cè)
修改上面例子的html代碼，將全局注冊(cè)的組件改為局部注冊(cè)赂毯，注冊(cè)到實(shí)例app1下
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>vue組件</title>
<script src="js/vue.js"></script>
</head>
<body>
<div id="app1">
<my-com></my-com>
</div>
<div id="app2">
<my-com></my-com>
</div>
<script>
var myCom = Vue.extend({
template: '<div>這是我的組件</div>'
});
// Vue.component('my-com',myCom);
/*局部注冊(cè)組件*/
var app1 = new Vue({
el: '#app1',
components:{
'my-com':myCom
}
});
var app2 = new Vue({
el: '#app2'
});
</script>
</body>
</html>
打開瀏覽器查看效果
可以看到只渲染了app1實(shí)例下的組件战虏，app2實(shí)例雖然調(diào)用了該組件，但是因?yàn)檫@個(gè)組件沒有在其內(nèi)部注冊(cè)党涕，也沒有全局注冊(cè)烦感，所以報(bào)錯(cuò)說找不到該組件。
一次注冊(cè)膛堤，一處使用
4.3 template及script標(biāo)簽構(gòu)建組件
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>vue組件</title>
<script src="js/vue.js"></script>
</head>
<body>
<div id="app1">
<my-com></my-com>
<my-com1></my-com1>
</div>
<template id="myCom">
<div>這是template標(biāo)簽構(gòu)建的組件</div>
</template>
<script type="text/x-template" id="myCom1">
<div>這是script標(biāo)簽構(gòu)建的組件</div>
</script>
<script>
Vue.component('my-com1',{
template: '#myCom1'
});
var app1 = new Vue({
el: '#app1',
components:{
'my-com':{
template: '#myCom'
}
}
});
</script>
</body>
</html>
打開瀏覽器查看效果
異步組件
當(dāng)項(xiàng)目比較大型手趣，結(jié)構(gòu)比較復(fù)雜時(shí)，我們一般選用vue-cli腳手架去構(gòu)建項(xiàng)目肥荔。因?yàn)関ue-cli集成了webpack環(huán)境绿渣，使用單文件組件朝群，開發(fā)更簡(jiǎn)單，易上手中符，尤其是在對(duì)組件的處理上潜圃。對(duì)于原生vue.js，我們就得將組件構(gòu)建在同一個(gè)html的script標(biāo)簽下或者h(yuǎn)tml的外部js中舟茶，所有組件集中在一塊谭期，不容易管理，這也是原生vue,js的一點(diǎn)不便之處吧凉。
當(dāng)然隧出，在不使用腳手架的情況下想將一個(gè)個(gè)組件分別獨(dú)立成一個(gè)個(gè)html文件，再去引用注冊(cè)它們阀捅，也是可以實(shí)現(xiàn)的胀瞪，但一般不推薦這樣做。
vue.js可以將異步組件定義為一個(gè)工廠函數(shù)饲鄙。
例子
新建一個(gè)head.html
<div>
這是頭部
</div>
在index.html中異步引入head.html作為組件
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>vue組件</title>
<script src="js/vue.js"></script>
<script src="js/jquery.min.js"></script>
</head>
<body>
<div id="app1">
<head-com></head-com>
</div>
<script>
Vue.component('head-com', function (resolve, reject) {
$.get("./head.html").then(function (res) {
resolve({
template: res
})
});
});
var app1 = new Vue({
el: '#app1'
});
</script>
</body>
</html>
當(dāng)然要注意一點(diǎn)凄诞，使用$.get獲取本地文件是會(huì)跨域的，所以我們要把項(xiàng)目部署到服務(wù)器環(huán)境中忍级。
我這里用的是xampp集成環(huán)境帆谍，將項(xiàng)目文件夾component放置在xampp/htdocs下，然后訪問localhost/component/index.html轴咱，
效果如下
可以看到在index.html中引入的head.html里的內(nèi)容已經(jīng)被添加進(jìn)去
