首先呢，我们建一个空的文件夹，取名vue组件2。
建好了没？
下一步，很重要！命令行，先进入已经建好的文件夹vue组件2，然后敲命令。请复制:vue init webpack vuetest
这里vue官网写的也很清楚：

A.先看index.html
也两个点：1、全局注册组件，2、局部注册组件

注意:自定义标签的命名 ：小写，并且包含一个短杠，如：<my-component></my-component>或者使用:is属性<div is="my-component"></div>,当然is也可以提供js环境,如:<div :is="judge?'hello-world':'my-component'"></div>。

data必须是函数，否则Vue 会停止运行，并在控制台发出警告。这里有一个小东西，模拟data函数？：外面定义一个对象，如：var obj = {message:"我是str字符串"};然后data函数里面return这个obj，如 data:function () {return obj;},，这个对象将被各个组件共用一个引用，即传址问题？不是很清楚。

所以我们应该使用data函数为每个组件返回全新的数据对象来修复这个问题。
data: function () {
return {
counter: 0
}
}

全局注册组件:
格式:
注册一个全局组件，可以使用 Vue.component(tagName, options)。
Vue.component("MyComponent",{
template:"<h1>全局注册的mycomponent组件is me {{mymessage}}</h1>",
data:function(){
return {
mymessage:"被忽略的组件数据"
}
}
})
在实例模板#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数据渲染到template里面，这点和vue实例里面的data数据渲染到实例模板#app里面一样，且注意，template里面只能有一个容器，即一个标签节点。
组件之间也可以互相使用，当然必须得加入components注册在其的作用域内,渲染方法还是一样的。这里也有一个注意点，要注册到另一个组件的组件要定义在上面，否则会出问题。好了，index.html就这么多。

B、终于到app.vue，不知道还能不能写完。
先总结下知识点有:1、子组件如Person与父组件app.vue之间的数据互传:
父组件传数据给子组件，由于组件实例的作用域是孤立的，需要使用prop，即自定义标签的时候，将数据当做标签属性写入标签,如:
<Person
username="张三"
:height="180"
color="white"
></Person>
子组件通过props声明它预期的数据来接收数据，如：
props:['username','height','color'],
或者
props:{
username:{type:String},
height:{type:Number},
color:{type:String}
},
同样也可以在 template 实例中通过来调用。
如:
<template>
<div>
<p>姓名:{{username}}</p>
<p>肤色:{{height}}</p>
<p>身高:{{color}}</p>
</div>
</template>

子组件传数据给父组件：
************这是官网上子组件修改prop值并返回给父组件，也是子组件传输局给父组件的一种表现？回头研究。
定义一个局部变量，并用 prop 的值初始化它：

props: ['initialCounter'],
data: function () {
return { counter: this.initialCounter }
}
定义一个计算属性，处理 prop 的值并返回：

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

这里有一种返回数据的方法，使用emit
passDad:function(){
// 传递事件
// 第一个参数是要发射的事件名称,后面参数是要传递的数据
this.$emit("myfn",this.message);
}
父组件通过@myfn="fn",data就是传递的数据
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 来进一步配置如何分发内容。多个插槽可以有不同的名字。具名插槽将匹配内容片段中有对应 slot 特性的元素。
如：
<template>
<div>
<h1>我是slot组件</h1>
<slot name="header"></slot>
<slot>我是默认显示的内容</slot>
<slot name="footer"></slot>
</div>
</template>
仍然可以有一个匿名插槽，它是默认插槽，作为找不到匹配的内容片段的备用插槽。如果没有默认插槽，这些找不到匹配的内容片段将被抛弃。中间那个slot元素里面写的内容就是备用插槽。

在父组件里面:template里面呈现
<my-slot>

<p slot="header">我是头部</p>
<p slot="footer">我是底部</p>
<p>我是插槽里的内容</p>
</my-slot>
父组件里面的p标签没有slot属性，它的内容优先级要大于子组件的备用插槽，即如果没有这个p标签，子组件的备用插槽内容就会显示。

4、还有一个transition过渡,这个其实不是讲组件的，只是通过父组件呈现出来而已，顺带讲一下。先附上一张结构图，方便了解:

v-enter:动画开始进入的状态
v-enter-to:动画进入完成的状态
v-leave:动画将要离开的状态
v-leave-to:动画离开结束的状态
v-enter-to,v-leave其实是同一种状态,也就是没有动画时候的状态
还有官网上德解释，也看看呗。
v-enter：定义进入过渡的开始状态。在元素被插入时生效，在下一个帧移除。
v-enter-active：定义过渡的状态。在元素整个过渡过程中作用，在元素被插入时生效，在 transition/animation 完成之后移除。这个类可以被用来定义过渡的过程时间，延迟和曲线函数。
v-enter-to: 2.1.8版及以上 定义进入过渡的结束状态。在元素被插入一帧后生效 (与此同时 v-enter 被删除)，在 transition/animation 完成之后移除。
v-leave: 定义离开过渡的开始状态。在离开过渡被触发时生效，在下一个帧移除。
v-leave-active：定义过渡的状态。在元素整个过渡过程中作用，在离开过渡被触发后立即生效，在 transition/animation 完成之后移除。这个类可以被用来定义过渡的过程时间，延迟和曲线函数。
v-leave-to: 2.1.8版及以上 定义离开过渡的结束状态。在离开过渡被触发一帧后生效 (与此同时 v-leave 被删除)，在 transition/animation 完成之后移除。
v-指的是节点，如:class类名

了解这个之后，就可以呈现出来了，首先在template里面用transition标签包裹要过渡动画的节点
动画显示方法：2种
1、直接通过定义class类名，如：fade，
.fade-enter-active, .fade-leave-active {
transition: opacity .5s;
}
这个是动画进入和离开的过渡状态，完全根据上面的模板来的，style也是css的写法，很简单。
.fade-enter, .fade-leave-to {
opacity: 0;
}
这个是动画进入和离开的过渡样式,也是很容易看懂的。
注意: 组件动态切换:模式切换mode切换(默认in-out)
将它改成out-in，就会出现用相同的节点切换，但不是一个节点，讲起来比较难懂，反正用它显示效果会使你想要的。可以试试区别。
给个例子：
<transition name="fade" mode="out-in">
<div :is="switchC?'Component1':'Component2'"></div>
</transition>
如果使用的时if-else写法:那么就要使用value值来区分这两个节点，如果没有加以区分，缓存就会将他们当做一个节点来变化。如：
<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里面的内容</div>
</transition>
这种方法其实就是将动画效果携程函数，然后再transition标签里面用属性的方式调用。
再看函数的代码:
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参数外，其他的都还有done参数，done代表的时这个动画结束，执行下一个，el代表元素节点。
恩，终于写完了，本来以为会总结的很好，结果分了两天写，写的就有点乱套了，反正这个只是我的一个小笔记，自己应该能看懂，恩，就这样。