首先呢，我們建一個空的文件夾，取名vue組件2。
建好了沒？
下一步，很重要！命令行，先進入已經(jīng)建好的文件夾vue組件2，然后敲命令。請復(fù)制:vue init webpack vuetest
這里vue官網(wǎng)寫的也很清楚：

A.先看index.html
也兩個點：1、全局注冊組件，2、局部注冊組件

注意:自定義標簽的命名 ：小寫，并且包含一個短杠，如：<my-component></my-component>或者使用:is屬性<div is="my-component"></div>,當然is也可以提供js環(huán)境,如:<div :is="judge?'hello-world':'my-component'"></div>。

data必須是函數(shù)，否則Vue 會停止運行，并在控制臺發(fā)出警告。這里有一個小東西，模擬data函數(shù)？：外面定義一個對象，如：var obj = {message:"我是str字符串"};然后data函數(shù)里面return這個obj，如 data:function () {return obj;},，這個對象將被各個組件共用一個引用，即傳址問題？不是很清楚。

所以我們應(yīng)該使用data函數(shù)為每個組件返回全新的數(shù)據(jù)對象來修復(fù)這個問題。
data: function () {
return {
counter: 0
}
}

全局注冊組件:
格式:
注冊一個全局組件，可以使用 Vue.component(tagName, options)。
Vue.component("MyComponent",{
template:"<h1>全局注冊的mycomponent組件is me {{mymessage}}</h1>",
data:function(){
return {
mymessage:"被忽略的組件數(shù)據(jù)"
}
}
})
在實例模板#app中使用自定義標簽<my-component></my-component>就ok了。

局部注冊：你不必把每個組件都注冊到全局。你可以通過某個 Vue 實例/組件的實例選項 components 注冊僅在其作用域中可用的組件，如：
var Child = {
template: '<div>A custom component!</div>'
}
new Vue({
components: {
// <my-component> 將只在父組件模板中可用
'my-component': Child
HelloWorld:HelloWorld
}
})

局部組件里面的data數(shù)據(jù)渲染到template里面，這點和vue實例里面的data數(shù)據(jù)渲染到實例模板#app里面一樣，且注意，template里面只能有一個容器，即一個標簽節(jié)點。
組件之間也可以互相使用，當然必須得加入components注冊在其的作用域內(nèi),渲染方法還是一樣的。這里也有一個注意點，要注冊到另一個組件的組件要定義在上面，否則會出問題。好了，index.html就這么多。

B、終于到app.vue，不知道還能不能寫完。
先總結(jié)下知識點有:1、子組件如Person與父組件app.vue之間的數(shù)據(jù)互傳:
父組件傳數(shù)據(jù)給子組件，由于組件實例的作用域是孤立的，需要使用prop，即自定義標簽的時候，將數(shù)據(jù)當做標簽屬性寫入標簽,如:
<Person
username="張三"
:height="180"
color="white"
></Person>
子組件通過props聲明它預(yù)期的數(shù)據(jù)來接收數(shù)據(jù)，如：
props:['username','height','color'],
或者
props:{
username:{type:String},
height:{type:Number},
color:{type:String}
},
同樣也可以在 template 實例中通過來調(diào)用。
如:
<template>
<div>
<p>姓名:{{username}}</p>
<p>膚色:{{height}}</p>
<p>身高:{{color}}</p>
</div>
</template>

子組件傳數(shù)據(jù)給父組件：
************這是官網(wǎng)上子組件修改prop值并返回給父組件，也是子組件傳輸局給父組件的一種表現(xiàn)？回頭研究。
定義一個局部變量，并用 prop 的值初始化它：

props: ['initialCounter'],
data: function () {
return { counter: this.initialCounter }
}
定義一個計算屬性，處理 prop 的值并返回：

props: ['size'],
computed: {
normalizedSize: function () {
return this.size.trim().toLowerCase()
}
}

這里有一種返回數(shù)據(jù)的方法，使用emit
passDad:function(){
// 傳遞事件
// 第一個參數(shù)是要發(fā)射的事件名稱,后面參數(shù)是要傳遞的數(shù)據(jù)
this.$emit("myfn",this.message);
}
父組件通過@myfn="fn",data就是傳遞的數(shù)據(jù)
methods:{
fn:function(data){
console.log(data);
}
}
2、引入組件(其他的vue文件):
如:import HelloWorld from './components/HelloWorld',
./可以換成@，這里@指的是src文件夾，
引入之后還得注冊到components里面，這里的components和index.html一樣，他在寫在script里面的export default里面，和name同級。
3、具名插槽
在子組件Myslot里面
<slot> 元素可以用一個特殊的特性 name 來進一步配置如何分發(fā)內(nèi)容。多個插槽可以有不同的名字。具名插槽將匹配內(nèi)容片段中有對應(yīng) slot 特性的元素。
如：
<template>
<div>
<h1>我是slot組件</h1>
<slot name="header"></slot>
<slot>我是默認顯示的內(nèi)容</slot>
<slot name="footer"></slot>
</div>
</template>
仍然可以有一個匿名插槽，它是默認插槽，作為找不到匹配的內(nèi)容片段的備用插槽。如果沒有默認插槽，這些找不到匹配的內(nèi)容片段將被拋棄。中間那個slot元素里面寫的內(nèi)容就是備用插槽。

在父組件里面:template里面呈現(xiàn)
<my-slot>

<p slot="header">我是頭部</p>
<p slot="footer">我是底部</p>
<p>我是插槽里的內(nèi)容</p>
</my-slot>
父組件里面的p標簽沒有slot屬性，它的內(nèi)容優(yōu)先級要大于子組件的備用插槽，即如果沒有這個p標簽，子組件的備用插槽內(nèi)容就會顯示。

4、還有一個transition過渡,這個其實不是講組件的，只是通過父組件呈現(xiàn)出來而已，順帶講一下。先附上一張結(jié)構(gòu)圖，方便了解:

v-enter:動畫開始進入的狀態(tài)
v-enter-to:動畫進入完成的狀態(tài)
v-leave:動畫將要離開的狀態(tài)
v-leave-to:動畫離開結(jié)束的狀態(tài)
v-enter-to,v-leave其實是同一種狀態(tài),也就是沒有動畫時候的狀態(tài)
還有官網(wǎng)上德解釋，也看看唄。
v-enter：定義進入過渡的開始狀態(tài)。在元素被插入時生效，在下一個幀移除。
v-enter-active：定義過渡的狀態(tài)。在元素整個過渡過程中作用，在元素被插入時生效，在 transition/animation 完成之后移除。這個類可以被用來定義過渡的過程時間，延遲和曲線函數(shù)。
v-enter-to: 2.1.8版及以上 定義進入過渡的結(jié)束狀態(tài)。在元素被插入一幀后生效 (與此同時 v-enter 被刪除)，在 transition/animation 完成之后移除。
v-leave: 定義離開過渡的開始狀態(tài)。在離開過渡被觸發(fā)時生效，在下一個幀移除。
v-leave-active：定義過渡的狀態(tài)。在元素整個過渡過程中作用，在離開過渡被觸發(fā)后立即生效，在 transition/animation 完成之后移除。這個類可以被用來定義過渡的過程時間，延遲和曲線函數(shù)。
v-leave-to: 2.1.8版及以上 定義離開過渡的結(jié)束狀態(tài)。在離開過渡被觸發(fā)一幀后生效 (與此同時 v-leave 被刪除)，在 transition/animation 完成之后移除。
v-指的是節(jié)點，如:class類名

了解這個之后，就可以呈現(xiàn)出來了，首先在template里面用transition標簽包裹要過渡動畫的節(jié)點
動畫顯示方法：2種
1、直接通過定義class類名，如：fade，
.fade-enter-active, .fade-leave-active {
transition: opacity .5s;
}
這個是動畫進入和離開的過渡狀態(tài)，完全根據(jù)上面的模板來的，style也是css的寫法，很簡單。
.fade-enter, .fade-leave-to {
opacity: 0;
}
這個是動畫進入和離開的過渡樣式,也是很容易看懂的。
注意: 組件動態(tài)切換:模式切換mode切換(默認in-out)
將它改成out-in，就會出現(xiàn)用相同的節(jié)點切換，但不是一個節(jié)點，講起來比較難懂，反正用它顯示效果會使你想要的?？梢栽囋噮^(qū)別。
給個例子：
<transition name="fade" mode="out-in">
<div :is="switchC?'Component1':'Component2'"></div>
</transition>
如果使用的時if-else寫法:那么就要使用value值來區(qū)分這兩個節(jié)點，如果沒有加以區(qū)分，緩存就會將他們當做一個節(jié)點來變化。如：
<transition name="mymove" mode="out-in">
<div v-if="switchC" key="1">我是div1</div>
<div v-else key="2">我是div2</div>
</transition>

2、先看代碼:
<transition
@before-enter="beforeEnter"
@enter="enter"
@leave="leave"
:css="false"
>
<div class="mydiv" v-show="myjudge">div里面的內(nèi)容</div>
</transition>
這種方法其實就是將動畫效果攜程函數(shù)，然后再transition標簽里面用屬性的方式調(diào)用。
再看函數(shù)的代碼:
methods:{
beforeEnter:function(el){
console.log(el);
$(el).css({left:"0px",opacity:0});
},
enter:function(el,done){
$(el).animate({left:"450px",opacity:1},done);
// done();
},
leave:function(el,done){
$(el).animate({left:"900px",opacity:0},done);
// done();
}
}
這里除了beforeEnter只有一個el參數(shù)外，其他的都還有done參數(shù)，done代表的時這個動畫結(jié)束，執(zhí)行下一個，el代表元素節(jié)點。
恩，終于寫完了，本來以為會總結(jié)的很好，結(jié)果分了兩天寫，寫的就有點亂套了，反正這個只是我的一個小筆記，自己應(yīng)該能看懂，恩，就這樣。