一、组件
1> 组件命名方式有两种（注意：在DOM模板中只有kebab-case命名方法才生效）：
html中引用组件：
<!-- 在DOM模板中，只有 kebab-case命名才生效 -->
<my-component-name></my-component-name> script:
Vue.component('my-component-name',{
template:'<div>这是第一种命名方式：kebab-case</div>'
/* ... */
}) html中引用组件：
<my-component-name></my-component-name> script:
/* 根据大写字母隔开，my-component-name */
Vue.component('MyComponentName',{
template:'<div>这是第二种命名方式：PascalCase</div>'
/* ... */
})
2> 全局组件与局部组件：
/*
* 全局组件可以在根组件的任何子组件中使用
*/
Vue.component('component-a',{/* ...组件相关配置... */})
/*
* 局部组件只能在当前注册的组件实例中生效，在其子组件中也不生效
*/
var componentb = { /* ...组件相关配置... */ }
var vm = new Vue({
el:'#app',
'component-b':componentb /* 局部注册组件 */
})
3> 动态组件（component）
4> 插槽（slot）
二、单文件组件
1> 组成：单文件组件有 模板(<template></template>)、脚本(<script></script>) 与 样式(<style><style>) 组成
<!-- 这是一个单文件组件 -->
<template>
<div>模板中只允许一个根元素，可以在这个根元素中进行编写DOM结构</div>
</template> <script>
/* export default:默认导出对象；在这里进行vue的相关选项配置与逻辑编写 */
export default{
name: 'App'
}
</script> /*
* scoped：表示样式代码只在该组件中生效
* lang='stylus':表示样式使用stylus格式进行编写css
*/
<style lang='stylus' scoped>
/* >>> 3个箭头表示修改外部样式（.样式2） */
.样式1 >>> .样式2
background:red
</style>
2> 单文件组件的注册（局部注册）：
<template>
<div>
<!-- 引入组件 -->
<test-component> </test-component>
</div>
</template> <script>
import TestComponent from '需要引入的组件路径'
export default{
name: 'App',
components : {
TestComponent /* 与写法 TestComponent:TestComponent 一致，es6新特性 */
}
}
</script> <style lang='stylus' scoped> </style>
三、递归组件