组件的初步

todolist案例

1. 布局问题

• 前端的UI组件库

组件

组件化

1. 组件化是当今最为流行的一种可复用性增加的方法，随着当今前端开发的复杂度更加，这个组件化变得越来越流行

组件的基础

1. 组件是一个具备html css img js …等的一个聚合体
2. 组件的表现形式就类似一个标签
3. 组件至少得有模板

• 全局注册

   <div id="app">
     <Hello></Hello>
   </div>
  

         // 1. 组件的注册
         Vue.component( 'Hello', {
           template: '<h3> hello 组件的简写 </h3>'
         })
         // 2. 组件的使用
         new Vue({
           el: '#app'
         })
  

  -局部注册

  <div id="app">
    <Hello></Hello>
  </div>
  

    new Vue({
    el: '#app',
    components: {
      'Hello': {
        template: `
          <h3> hello 局部注册
          <p> lll </p> </h3>
          `
      }
    }
  })
  

  -2.

    <div id="app">
    <Hello></Hello>
    </div>
  <template id="hello">
    <div>
      <h3> 端午节happy </h3>
    </div>
  </template>
  

      new Vue({
     el: '#app',
     components: {
     'Hello': {
       template: '#hello'
     }
   }
 })

• 3

<div id="app">
   <table>
       <tr>
         <td>1</td>
         <td>2</td>
         <td>3</td>
       </tr>
       <!-- <Hello></Hello> 错误写法-->
       <tr is = "Hello"></tr>
     </table>
 </div>
 <template id="hello">
   <tr>
     <td>1</td>
     <td>2</td>
     <td>3</td>
   </tr>
 </template>

   new Vue({
   el: '#app',
   components: {
     'Hello': {
       template: '#hello'
     }
   }
 })

• 组件的全局嵌套

 <div id="app">
   <Father></Father>
 </div>
 <template id="father">
   <div>
     <h3>  father </h3>
     <Son></Son>
   </div>
 </template>
 <template id="son">
   <h3> son </h3>
 </template>

 Vue.component('Father',{
   template: '#father'
 })
 Vue.component('Son',{
   template: '#son'
 })
 new Vue({
   el: '#app',
 })

• 组件的局部嵌套

    <div id="app">
   <Father></Father>
 </div>
 <template id="father">
   <div>
     <h3>  father </h3>
     <hr>
     <Son></Son>
   </div>
 </template>
 <template id="son">
   <h3> son </h3>
 </template>

new Vue({
   el: '#app',
   components: {
     'Father': {
       template: '#father',
       components: {
         'Son': {
           template: '#son'
         }
       }
     }
   }
 })

• 总结

  1. Vue.js通过Vue.extend() 方法来扩展 组件的 使用

  2. Vue.extend( options ) 里面的options参数和 Vue(options) 的options参数几乎是一致的

  3. new Vue出来的 ViewModel( 视图模型 ) 也是一个组件，我们称之为 ‘根实例组件’ ，叫 ‘Root’ 组件

  4. Vue中组件的表现形式是类似于标签的，要想像标签一样使用，就必须得符合 h5 的规则，也就是必须要进行组件的注册

  5. 组件的注册有两种形式
     全局注册
     格式： Vue.component(组件的名称，组件的配置项)
     组件的命名规则
     举例：
     1. Father Hello
     2. my-button
     局部注册
     格式：
     写在组件内注册
     举例：
     new Vue({
     componens: {
     组件名: 组件配置项
     }
     })

  6. 组件必须先注册在使用

  7. 组件中的模板需要使用一个叫做template的配置项表示

  8. 组件的配置项可以简写，不需要使用 Vue.extend(options),可以直接将options写在组件的注册中

  9. template组件中有且仅有一个根元素

  10. 组件使用时有规则的：
      比如特殊的一些标签： ul li ol li table tr td dl dt dd select option …这类型标签，是规定了它们的直接子元素，当我们将组件写入这类型标签的时候，就会发现有问题

      解决： 在直接子元素身上，通过 is 属性来 绑定  一个组件
      
      举例： 
      <table>
        <tr>
          <td>1</td>
          <td>2</td>
          <td>3</td>
        </tr>
        <!-- <Hello></Hello>  这么写有问题-->
        <tr is = "Hello"></tr>
      </table>
      

  11. 组件嵌套
      全局注册：
      要将子组件的组件名写在父组件的template中
      局部注册