1、Vue组件基础
Vue的站点是可以通过组件拼凑的方式进行搭建的，这个的好处也是蛮多的。
- 组件是独立和可复用的单元，让开发者使用小型、独立和通常可复用的组件进行大型应用的构建。
- 组件开发能大幅度提高应用开发效率、复用性。
- 能实现“高聚合”与“低耦合”，使得前端开发的过程变成堆搭积木的过程。
（例如：玩乐高一样，用小零件拼凑成你想要的模型）
官方：组件允许我们将 UI 划分为独立的、可重用的部分，并且可以对每个部分进行单独的思考。在实际应用中，组件常常被组织成层层嵌套的树状结构
可能你还是不太了解吧，不过没关系啦，看下图。
自定义一个组件，代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>学习Vue的组件</title>
</head>
<body>
<!--view层，模板-->
<div id="app">
<cv-vue></cv-vue>
</div>
<!--1.导入Vue.js-->
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.min.js"></script>
<script type="text/javascript">
Vue.component("cv-vue",{
template: '<h1>Hello Vue</h1>'
});
var mv = new Vue({
el: '#app',
});
</script>
</body>
</html>
说明：
Vue.component()：注册组件
cv-vue：自定义组件的名字
template：组件的模板
2、props数学传递参数
代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>学习Vue的props传值</title>
</head>
<body>
<!--view层，模板-->
<div id="app">
<cv-vue v-for="item in items" v-bind:course="item"></cv-vue>
</div>
<!--1.导入Vue.js-->
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.min.js"></script>
<script type="text/javascript">
Vue.component("cv-vue",{
props: ['course'],
template: '<li>{{course}}</li>'
});
var mv = new Vue({
el: '#app',
data:{
items:["java","Linux","前端"]
}
});
</script>
</body>
</html>
说明：
v-for=“item in items”：遍历Vue实例中定义的名为items的数组，并创建同等数量的组件
v-bind:course=“item”：将遍历的item项绑定到组件中props定义名为course属性上；= 号左边的course为props定义的属性名，右边的为item in items 中遍历的item项的值。
