四，组件化开发之初识

1. 认识组件化

1. 什么是组件化

• 如果我们将一个页面的所有处理逻辑全部放在一起，处理起来就会变得非常复杂，而且不利于后期的管理以及扩展。
• 我们将一个页面拆分成一个一个小的功能块，每个功能块完成属于自己这部分独立的功能，那么之后的界面管理和维护就变得非常容易。

2. vue组件化思想

• 通常一个应用会以一棵嵌套的组件树的形式来组织：
  
• 例如，你可能会有页头、侧边栏、内容区等组件，每个组件又包含了其它的像导航链接、博文之类的组件

2. 注册组件

1. 基本步骤

• 创建组件构造器

  • 调用Vue.extend()创建组件构造器
  • 通常在创建组件构造器时，传入template代表我们自定义组件的模板
  • 这个模板就是我们在使用组件的地方，要显示的Html代码
  • 事实是这种写法几乎见不到了，改用下面提到的语法糖格式，但还是需我们去了解

• 注册组件

  • 调用Vue.component()注册组件，并且给该组件起一个标签名称
  • 传递两个参数，1.注册组件的标签名 2. 组件构造器

• 使用组件

  • 组件必须挂载在某个vue实例下，去使用组件

<div id="app">
    <my-cpn></my-cpn>
</div>

<script src="../js/vue.js"></script>
<script>
    //1.构建组件构造器对象
    var cpnC = Vue.extend({
        template: '<div>\n' +
            '    <h1>我是标题1</h1>\n' +
            '    <p>我是内容1</p>\n' +
            '</div>'
    })

    //2.注册组件
    Vue.component('my-cpn',cpnC)

    //3.使用组件
    var app= new Vue({
            el: "#app",
            data: {
                message: "hello vue"
            }
        })
</script>