根據千峰教育學習視頻所練習的筆記 | 學習一段時間，我也有寫一點東西的必要了···
1. vue組件介紹
- 組件系統是將一個大型的界面切分成一個一個更小的可控單元
- 組件是復用（同一個頭部可以用在游戲、微信、qq中）的，可維護的
- 組件具有強大的封裝性，易於使用
- 大型應用中，組件與組件之間交互可以解耦操作
2. 創建vue組件
- 全局組件
- 局部組件
2.1. 先來看全局組件
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>組件</title>
<script src="../vue.js"></script>
</head>
<body>
<div id="app">
<!-- 使用自定義組件（標簽）-->
<my-header></my-header>
</div>
<div id="app2">
<my-header></my-header>
</div>
<script>
<!-- 全局組件-->
<!--Vue.component定義組件，參數為組件名字,組件名字相當於我們自定義的標簽-->
Vue.component('my-header',{
template:'<h2>標題</h2>'
});
<!-- template對組件進行模板替換，替換成真實的html結構-->
var vm = new Vue({
el:'#app' <!--通過id來找，具有唯一性-->
});
var vm = new Vue({
el:'#app2'
});
</script>
</body>
</html>
- 寫好了之后我們看看組件能不能把模板渲染到
<div>標簽上：
- 我們再來寫一個
<div>容器，id 為 app2，並為它創建一個實例：
<body>
···
<div id="app2">
<my-header></my-header>
</div>
<script>
······
el:'#app'
});
var vm = new Vue({
el:'#app2'
});
</script>
</body>
其實這個時候，也是可以渲染出組件的：
因為這個vue組件是全局的，可以在 app 里用，也可以在 app2 里用。
2.2. 局部組件
除了創建全局組件之外，我們還能創建局部組件
- 局部組件就是在單獨創建的實例中進行創建，在這里我們要寫配置，就是代碼里的components
<body>
···
<div id="app2">
<my-header></my-header>
</div>
<script>
var vm = new Vue({
el:'#app',
components: {
'my-header':{
template:'<h2>標題</h2>'
}
}
});
</script>
</body>
- 我們看一下效果：可以知道全局組件和局部組件還是有區別的
3. 組件數據的特點
我們能不能讓自己創建的 vue 實例里的 data 下面的屬性在組件中使用呢？試一下！
- 我們先去vue實例下添加data
<script>
var vm = new Vue({
el:'#app',
data:{
//定義成對象 message
message:'hello vue !'
},
components: {
'my-header':{
template:'<h2>標題</h2>'
}
}
});
</script>
- 接着，我們到
<div>容器中渲染 message ，頁面上就出來了：
<div id="app">
{{message}}
<my-header></my-header>
</div>
<div id="app2">
······
</div>
- 那么我們這個{{message}}在實例下定義的數據不能在組件中用？我們到組件模板中去調用試一下：
<div id="app">
<!-- {{message}} -->
<my-header></my-header>
</div>
<div id="app2">
······
</div>
<script>
var vm = new Vue({
······
components: {
'my-header':{
template:'<h2>標題{{message}}</h2>'
}
}
});
</script>
- 大家可以看到，並不能找到 message 。因為數據是不共享的，是為了防止沖突和耦合性。所以說，message只能在容器中使用，在組件中是調用不到的。
- 那么，我想要在組件中用到數據，就要用到組件提供的 data 配置了
<div id="app">
<my-header></my-header>
</div>
<div id="app2">
<my-header></my-header>
</div>
<script>
var vm = new Vue({
el:'#app',
data:{
message:'hello vue !'
},
components: {
'my-header':{
template:'<h2>標題{{message}}</h2>',
//在組件中使用數據(就不能寫成對象了):組件中定義function函數，並用return返回
data:function () {
return{
message:'nice to meet you'
};
}
}
}
});
</script>
- 這會兒我們就看到打印的是data配置里的message，不再是先前的hello vue 了。
4. vue實例與vue組件的關系
- 所有的vue組件其實都是被擴展的vue實例,就是vue組件可以繼承vue實例。
5. 補充：vue組件的模板語法規范
-
根據之前的學習，我們可以知道，在組件中可以寫上 template (模板)。當數據比較少的時候，是沒有什么問題的，我們可以寫作一行。當模板復雜起來之后，一行很長不方便閱讀，我們有更好的方式對待。
-
如圖：我想在message下面加一些列表
template:'<div><h2>{{message}}</h2><ul><li>張一山</li></ul> <ul><li>吳京</li></ul><ul><li>李現</li></ul><ul><li>肖戰</li></ul></div>',
5.可以看到這樣的代碼看起來不太方便，現在我們進行一些處理：
- 加
\
template:'<div>\
<h2>{{message}}</h2>\
<ul>\
<li>張一山</li>\
</ul>\
<ul>\
<li>吳京</li>\
</ul>\
<ul>\
<li>李現</li>\
</ul>\
<ul>\
<li>肖戰</li>\
</ul>\
</div>',
哈哈，這樣寫也不太方便
- 用``
template:`<div>
<h2>{{message}}</h2>
<ul>
<li>張一山</li>
</ul>
<ul>
<li>吳京</li>
</ul>
<ul>
<li>李現</li>
</ul>
<ul>
<li>肖戰</li>
</ul>
</div>`,
- 用
<template>模板標簽：在HTML下面寫一個<template>標簽,再把列表結構放進去。寫好之后，我們可以通過id找到這個模板
<body>
<div id="app">
······
</div>
<template id="temp">
<div>
······
</div>
</template>
<script>
var vm = new Vue({
el:'#app',
components:{
'my-header':{
template:'#temp',
data:function () {
return{
message: 'hello my idol'
};
}
}
}
});
</script>
</body>
- 還可以使用
<scripr type="text/x-template">,但是一定要寫type類型，不然會按js方式解析。
<script type="text/x-template" id="temp">
<div>
······
</div>
</script>
<script>
······
</script>