vue初学-day08

08-(掌握)组件化的实现和使用步骤P52 - 00:04

09-(掌握)组件化的基本使用过程P53 - 11:29

1、创建组件构造器vue.extend()

2、注册组件vue.component()

3、使用组件

<div id="app">
  <!--3、使用组件-->
  <my-component></my-component>

</div>

<script>
  // <!--1、创建组件构造器对象-->
  const cpnExtend = Vue.extend({
    template:`
        <div>
          <h1>标题</h1>
          <p>内容</p>
        </div>`

  });
  //2、注册组件 Vue.component("组件标签名",组件构造器)全局组件
  Vue.component("my-component",cpnExtend);

  // <!--vue实例对象-->
    const app = new Vue({
      el:"#app",
      data:{
        message:"你好啊"
      }
    })
</script>

10-(掌握)全局组件和局部组件P54 - 00:50

vue CLI(构造vue的项目)

1、全局组件：意味着可以在多个vue的实例下面使用

2、在某一个vue的实例下注册 就叫局部属性components:{cpn标签名：组件构造器}

<div id="app">
  <!--3、使用组件-->
  <myComponent></myComponent>
</div>

// <!--1、创建组件构造器对象-->
const cpnExtend = Vue.extend({
  template:`
      <div>
        <h1>标题</h1>
        <p>内容</p>
      </div>`

});
//2、注册组件 Vue.component("组件标签名",组件构造器)---全局组件 可在多个vue实例下使用
//Vue.component("my-component",cpnExtend);

// <!--vue实例对象-->
  const app = new Vue({
    el:"#app",
    data:{
      message:"你好啊"
    },
    //2、局部组件 myComponent组件标签名：cpnExtend组件构造器
    components:{
      myComponent:cpnExtend
    },
  });

11-(掌握)父组件和子组件的区分P55 - 00:23

<div id="app">
   <!--<mycpn1></mycpn1>-->
   <mycpn2></mycpn2>
</div>

<script>
  // <!--组件构造器一  子组件-->
    const cpn1 = Vue.extend({
      template:`
      <div>
      <h2>我是组件一</h2>
      </div>
      `
    });
  // <!--组件构造器二  父组件-->
    const cpn2 = Vue.extend({
      template:`
          <div>
          <h2>我是组件二</h2>
          
          <mycpn1></mycpn1>
          </div>`,
      //在哪里使用 就在哪里注册组件（mycpn1组件在mycpn2组件中使用）
      components:{
        mycpn1:cpn1
      }
    });

    const app = new Vue({
      el:"#app",
      data:{
        message:"你好啊"
      },
      components:{
        // mycpn1:cpn1
        mycpn2:cpn2
      }
    })

12-(掌握)注册组件的语法糖写法P56 - 00:04

1、全局--省去了****extend方法，直接用一个对象替换

Vue.component("cpn2",{
    template:`<div><p>全局--我是组件构造器一的组件--语法糖形式</p></div>`
    //不需要单独使用extend方法构造了
  });

2、局部---vue实例中直接写组件

 components:{'cpn3':{
        template:`<div><p>局部--我是组件构造器一的组件--语法糖形式</p></div>`
           }
        }

3、总方法如下

<div id="app">
  <!--通过原方法全局注册-->
  <cpn1></cpn1>
  <!--语法糖 全局注册-->
  <cpn2></cpn2>
  <!--语法糖局部注册-->
  <cpn3></cpn3>
</div>
<!--使用vue-->
<script src="../js/vue.js"></script>
<script>
  // <!--组件构造器-->
  const cpnC = Vue.extend({
    template:`<div><p>我是组件构造器一的组件</p></div>`
  });
    //全局注册组件
  Vue.component("cpn1",cpnC);
    //语法糖全局注册组件
  Vue.component("cpn2",{
    template:`<div><p>全局--我是组件构造器一的组件--语法糖形式</p></div>`
    //不需要单独使用extend方法构造了
  });

    const app = new Vue({
      el:"#app",
      data:{
        message:"你好啊"
      },
      components:{'cpn3':{
        template:`<div><p>局部--我是组件构造器一的组件--语法糖形式</p></div>`
           }
        }
    })
</script>

13-(掌握)组件模板抽离的写法P57 - 00:24

<div id="app">
    <cpn1></cpn1>
    <cpn2></cpn2>
</div>

<!--1、<script>标签分离 类型text/x-template"-->
<scrpit type="text/x-template" id="jsCpn">
  <div>
    <p>我是通过scrpit标签分离的模板</p>
  </div>
</scrpit>
<!--2、通过template标签分离模板 -->
<template id="jsCpn">
  <div>
    <p>我是通过template标签分离的模板</p>
  </div>
</template>
<!--使用vue-->
<script src="../js/vue.js"></script>
<script>
  // <!--注册全局组件-->
    Vue.component("cpn1",{
      template:"#jsCpn"
    });
    //局部组件分离写法
    const app = new Vue({
      el:"#app",
      data:{
        message:"你好啊"
      },
      components:{"cpn2":{
          template:"#jsCpn"
        }

      }
    })