Vue的兩大特性(組件篇)
1.指令 -- 用來操作dom
2.組件 --組件是html css js等的一個聚合體
3.為什么要使用組件？
1.組件化
思想：1.將一個具備完整功能的項目的一部分進行多處使用
2.能加快項目的進度
3.可以進行項目的復用
2.要想實現組件化，那么我們使用的這一部分就必須是完整的，我們把這一完整的整體稱 之為組件
3.插件 ： index.html img css js 分開的話會導致復用的麻煩
4.如果能將 html css js img 等多個部分放在一起，那該多好，所以Vue將這個聚合體的文件稱之為，單文件組件(xx.vue)
4.基礎的組件創建
1.全局創建（也叫全局注冊）
2.局部創建（局部注冊）
<div id='app'></div>
<script>
//Vue 是構造器函數
//Vue.extend() 是 Vue用來擴展vue功能（組件）的
console.log(Vue) //輸出Vue的構造函數
console.log(Vue.extend()) //輸出VumComponent的構造函數
//Vue決定不進行實例化Vue.extend(), vue借鑒了react，react中組件是以標簽的形式使用的，
//vue決定組件要以標簽的形式呈現
//為了符合html / html5的規則，所以組件的標簽化使用必須注冊，
//注冊說白了就是用來解析這個標簽化的組件讓html能識別的標簽
//總結: 組件使用前必須注冊
new Vue({
el:'#app'
})
</script>
全局注冊
組件必須先注冊再使用（組件范圍內使用），全局注冊就是 只需要注冊一次 可以多次使用（別的組件范圍也可以使用）
//語法： Vue.component(組件的名稱，組件的配置項)
//Vue.extend() 中有options參數
//Vue()也有options參數 兩個options基本一致
var Hello = Vue.extend({
template:'<div>這里是father組件</div>'
})
Vue.component('Father',Hello)
new Vue({
el:'#app'
})
全局組件簡寫形式：
Vue.component('Father',{
template:'<div>這里是father組件</div>'
})
局部注冊
注意：
命名：一個單詞的大寫：注意不要和原生的h5標簽重名 比如header footer
標簽名字要小寫 （如果標簽大寫的話需要帶-）比如 header-title
大駝峰：GaYa 使用 ga-ya
局部注冊：在組件中用一個components的配置項目來表示
只能在注冊的范圍內使用，其他地方不能使用
<div>
<gabriel-yan></gabriel-yan> //這里會輸出 ‘這里是1903’
</div>
var Hello = Vue.extend({
template:'<div>這里是1903</div>'
})
new Vue({
el:'#app',
components:{
'gabriel-yan':hello
}
})
局部組件簡寫形式：(在Vue下面的components中寫)
new Vue({
el: '#app',
components: {
'Hello': { //組件名
template: '#hello' //組件的結構
}
}
})
組件的嵌套
父組件里面放子組件 類似於dom結構中的父子結構
將子組件以標簽的形式放在父組件的模板中使用
切記 不要放在父組件內容中
錯誤的寫法:
<div id='app'>
<Father><Son></Son></Father>
</div>
正確寫法：
<div id='app'>
<Father></Father>
</div>
Vue.component('Father',{
template:'<div>這里是father組件<Son></Son></div>'
})
Vue.component('Son',{
template:'<div>這里是Son組件</div>'
})
嵌套局部寫法
new Vue({
el:'#app',
components:{
'Father':{
template:'<div>這里是Father組件</div>'
components:'Son':{
template:'<div>這里是Son組件</div>'
}
}
}
})
組件的一些特殊使用規則
<div id='app'>
<table>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
</table>
</div>
//is規則
// ul>li ol>li table>tr>td select>option
//如上直屬父子級如果直接組件以標簽化形式使用，那么就會出現bug
//解決 使用is規則：用過is屬性來綁定一個組件
// <tr is = "Hello"></tr>
Vue.component('Hello',{
template:'<tr><td>1</td><td>2</td><td>3</td></tr>'
})
new Vue({
el:'#app'
})
template使用：
1.實例范圍內使用
2.實例范圍外使用
/*
template使用：
\1. 實例范圍內使用
template中的內容被當做一個整體了，並且template標簽是不會解析到html結構中的
\2. 實例范圍外使用
實例范圍外template標簽是不會被直接解析的
組件要想使用template使用，我們采用第二種
但是使用第二種template使用后，有個弊端，template標簽結構會在html文件中顯示
解決： 使用webpack、gulp等工具編譯，將來要用vue提供的單文件組件
*/
實例范圍內使用
<div id="app">
<h3> 實例范圍內使用 </h3>
<template>
<div>
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
</ul>
</div>
</template>
<h3> 使用 hello 組件</h3>
<Hello></Hello>
</div>
<script>
Vue.component('Hello',{
template: '#hello'
})
new Vue({
el: '#app'
})
</script>
實例范圍外使用
<h3> 實例范圍外使用 </h3>
<template id="hello">
<div>
<ul>
<li>1</li>
<li>2</li>
</ul>
</div>
</template>
<script>
Vue.component('Hello',{
template: '#hello'
})
new Vue({
el: '#app'
})
</script>
總結：1.Vue中有個Vue.extend()方法是用來擴展vue功能(組件)的
2.組件的使用必須要先進行注冊（防止和其他標簽重名）
3.兩種注冊方法 全局注冊 和 局部注冊
全局注冊:直接用Vue全局的方法compontends
Vue.components('組件名'，{
template:'內容'
})
局部注冊:在組件中用components的配置項目來表示（只能在注冊范圍內用）
new Vue({
el:'#app',
components:{內容}
})