vue组件

todolist案例

1. 布局问题

• 前端的UI组件库

组件

组件化

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

组件的基础

1. 组件是一个具备html css img js …等的一个聚合体

2. 组件的表现形式就类似一个标签

3. 组件至少得有模板，模板用template表示，相当于el，但是不能用el，因为被根实例占用了

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

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

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

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

8. 组件的注册有两种形式

   • 全局注册
     1. 格式： Vue.component(组件的名称，组件的配置项)
     2. 组件的命名规则
     3. 举例：
        • Father Hello
        • my-button
   • 局部注册
     1. 格式：
     2. 写在组件内注册
     3. 举例：

     - new Vue({
           componens: {
             组件名: 组件配置项
           }
         })
     

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

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

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

    <div id="app">
         <Haha></Haha><!--组件的表现形式就是一个标签 -->
    </div>
    

      //简写形式  全局注册  Vue.component(组件的名称，组件的配置项) 一般用简写
        Vue.component('Haha',{
            template:'<h3>xixixiixixixi</h3>'
        })
        //3.组件的使用
        new Vue({//是一个根实例组件，叫Root组件
            el:'#app',
        })
    

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

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

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

13. 组件使用时有规则的：

    1. 比如特殊的一些标签： ul li ol li table tr td dl dt dd select option …这类型标签，是规定了它们的直接子元素，当我们将组件写入这类型标签的时候，就会发现有问题
    2. 解决： 在直接子元素身上，通过 is 属性来 绑定 一个组件
    3. 举例：

        <table>
            <tr>
              <td>1</td>
              <td>2</td>
              <td>3</td>
            </tr>
            <!-- <Hello></Hello>  这么写有问题-->
            <tr is = "Hello"></tr>
        </table>
    

14. 组件嵌套

    1. 全局注册：
       • 要将子组件的组件名写在父组件的template中

    <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>
    

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

    2. 局部注册

    <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'
                }
              }
            }
          }
        })