vue的学习曲线不是很陡（相比其它框架，如anglarjs），官方文档比较全面，分为基础篇和高级篇。我们刚开始学习的时候，肯定像引用jquery那样，先把vue的js引进来，然后学习基础内容。如果仅仅停留在基础内容，没有学习vue组件的话，我觉得也就没有什么意思了。vue的核心思想——组件，是一个很好的东西，它提供了功能复用。
1、单文件组件
所谓单文件组件，顾名思义，一个vue格式的文件就是一个组件。好比python和js的模块，文件即模块。vue组件带有自己的模板，可以理解为视图，也带有自己数据及逻辑。数据可以从外部来，通过Prop接收。用图形表示：
由此可见，单文件组件就是一个完整而独立的体系。注意，style有个属性scope表示仅作用于当前组件。wpf当中的控件，有自己的xaml（视图），逻辑，可以外部绑定数据源。我觉得vue组件类似wpf中的用户控件。因为用户控件组合了基础的控件，比如Button、TextBlock等等。用户控件可直接当成一个独立的组件使用。它和vue组件一样，都是从外部获取特定的信息，然后构建自己内部的数据以及逻辑。其实组件体现的是面向对象中的“封装”思想。
2、动态组件&异步加载
有时候读了官方的文档，还是不明白，这时候就需要上网搜搜相关资料。好比《圣经》或者《道德经》中的经文是需要慢慢揣摩和体会的。当然vue的动态组件、以及组件的异步加载也是需要在实践当中慢慢体会的。下来分享一个我在项目中使用的例子：
在后台管理页面中，编辑、增加一条信息，这时候需要在弹出页面中操作。因此，我就封装了一个弹出模态框（带有遮罩效果）的组件。而编辑页面是另外的一个组件。所以，需要把编辑页面的组件“送到”弹出框的组件中呈现。有点像“装饰器模式”，不要原生态地呈现编辑组件，而是把它包装一番，再呈现，如下图：
后台管理中像这样的编辑页面非常多，所以弹出框组件的意义就在这，复用。我上面说了需要把“编辑软件资源”的组件，送到弹出框组件显示。如何送呢？其实也不难。我把这个组件作为弹框组件的子组件。那么这个弹框组件有很多个编辑组件。现在问题来了，如何控制它们显示？当我点击“编辑软件资源”的时候，弹出对应的页面，当我点击编辑新闻的时候，它要弹出新闻的页面，难道我要控制组件的显示隐藏吗？这个情况有点像“Tab”，任何时候，只能呈现一个TabItem，那么其它的只能隐藏掉。好了，我们也可以这么做。还有另外一个问题，我们如何导入这些组件，一次性import多个组件，貌似也没有什么问题。这会不会影响页面加载的性能呢？我想肯定会。
我想到了秦腔中的“变脸”，对，这个很有意思，一个人通过变脸可以扮演多个人。和演员一样，比如最近的一个电视剧中景甜扮演了“奉剑”和“千湄”两个角色。vue里面的动态组件就是如此，一个组件总是“扮演”各种组件。异步加载，当我需要用你的时候，再去import，这显然是合理的。说了这么多，我们看看代码：
1 <template> 2 <transition name="modal"> 3 <div class="modal-mask"> 4 <div class="modal-wrapper"> 5 <div class="modal-container" :style="{width:width,height:height}"> 6 7 <div class="modal-header"> 8 <slot name="header"> 9 {{title}} 10 </slot> 11 <button class="modal-default-button" @click="close"> 12 X 13 </button> 14 </div> 15 16 <div class="modal-body" :style="{height:bodyHeight,width:bodyWidth}"> 17 <slot name="body"> 18 <component :is="currentComponent" @close="close" :id="id"></component> 19 </slot> 20 </div> 21 22 </div> 23 </div> 24 </div> 25 </transition> 26 </template> 27 28 <style scoped> 29 .modal-mask { 30 position: fixed; 31 z-index: 9998; 32 top: 50%; 33 left: 50%; 34 width: 100%; 35 height: 100%; 36 background-color: rgba(0, 0, 0, .5); 37 display: table; 38 transform: translateX(-50%) translateY(-50%); 39 transition: opacity .3s ease; 40 } 41 42 .modal-wrapper { 43 display: table-cell; 44 vertical-align: middle; 45
