2020-11-22 Vue-10组件化开发（1）

51

 

 

52

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

  <script src="../js/vue.js"></script>
  <script>

    const cpnConstructor = Vue.extend({
      template: `
      <div id="app">
        <h2>龙门客栈</h2>
        <p>大闹天宫</p>
        <p>七十二变</p>
      </div>`
    })

    Vue.component('my-cpn', cpnConstructor);

    const app = new Vue({
      el: '#app',
      data: {
        firstName: 'Kobe',
        age: 17,
        
      }
    })
  </script>

 

 

53

  <div id="app">
    <cpn></cpn>
  </div>
  <div id="app1">
    <cpn></cpn>
  </div>

  <script src="../js/vue.js"></script>
  <script>

    const cpnConstructor = Vue.extend({
      template: `
      <div id="app">
        <h2>龙门客栈</h2>
        <p>大闹天宫</p>
        <p>七十二变</p>
      </div>`
    })

    Vue.component('cpn', cpnConstructor);

    const app = new Vue({
      el: '#app',
      data: {
        firstName: 'Kobe',
        age: 17,
      }
    });

    const app1 = new Vue({
      el: '#app1'
    })
  </script>

 

 

 

  <div id="app">
    <cpn></cpn>
  </div>
  <div id="app1">
    <cpn></cpn>
  </div>

  <script src="../js/vue.js"></script>
  <script>

    const cpnConstructor = Vue.extend({
      template: `
      <div id="app">
        <h2>龙门客栈</h2>
        <p>大闹天宫</p>
        <p>七十二变</p>
      </div>`
    })

    // Vue.component('cpn', cpnConstructor);

    const app = new Vue({
      el: '#app',
      data: {
        firstName: 'Kobe',
        age: 17,
      },
      components: {
        cpn: cpnConstructor
      }
    });

    const app1 = new Vue({
      el: '#app1'
    })
  </script>

 

 

 

54

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

  <script src="../js/vue.js"></script>
  <script>

// const cpn = Vue.extend({})
    const cpnConstructor1 = Vue.extend({
      template: `
      <div id="app">
        <h2>龙门客栈</h2>
        <p>大闹天宫</p>
        <p>七十二变</p>
      </div>
      `
    })
    const cpnConstructor2 = Vue.extend({
      template: `
      <div id="app">
        <h2>大鱼海棠</h2>
        <cpn1></cpn1>
      </div>
      `,
      components: {
        cpn1: cpnConstructor1
      }
    })

    // Vue.component('cpn', cpnConstructor);

    const app = new Vue({
      el: '#app',
      data: {
        firstName: 'Kobe',
        age: 17,
      },
      components: {
        // cpn1: cpnConstructor1,
        cpn2: cpnConstructor2
      }
    });
  </script>

 

 

 

55

全局

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

  <script src="../js/vue.js"></script>
  <script>

    // const cpnConstructor1 = Vue.extend({
    //   template: `
    //   <div id="app">
    //     <h2>龙门客栈</h2>
    //   </div>
    //   `
    // })

    Vue.component('cpn1',{
      template: `
      <div id="app">
        <h2>龙门客栈</h2>
      </div>
      `
    });

    const app = new Vue({
      el: '#app',
      data: {
        firstName: 'Kobe',
        age: 17,
      },
      // components: {
      //   cpn1: cpnConstructor1
      // }
    });
  </script>

局部

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

  <script src="../js/vue.js"></script>
  <script>

    const app = new Vue({
      el: '#app',
      data: {
        firstName: 'Kobe',
        age: 17,
      },
      components: {
        'cpn1': {
          template: `
            <div>
              <h2>大鱼海棠</h2>
            </div>
          `
        }
      }
    })
  </script>

 

 

 

56

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

  <script type="text/x-template" id="cpn">
  <div>
    <h2>失落沙洲</h2>
  </div>
  </script>

  <script src="../js/vue.js"></script>
  <script>

    const app = new Vue({
      el: '#app',
      data: {
        firstName: 'Kobe',
        age: 17,
      },
      components: {
        'cpn1': {
          template: '#cpn'
        }
      }
    })
  </script>

  <template id="cpn">
    <div>
      <h2>失落沙洲</h2>
    </div>
  </template>

这样更简便

 

 

 

57

 

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

  <template id="cpn">
    <div>
      <h2>{{title}}</h2>
    </div>
  </template>

  <script src="../js/vue.js"></script>
  <script>

    Vue.component('cpn1', {
      template: '#cpn',
      data() {
        return {
          title: '樱吹雪'
        }
      }
    })

    const app = new Vue({
      el: '#app',
      data: {
        firstName: 'Kobe',
        age: 17,
      }
    })
  </script>

###data是函数形式的，不能是对象；函数有作用域

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

  <template id="cpn">
    <div>
      <h2>当前计数：{{counter}}</h2>
      <button @click='increment'>+</button>
      <button @click='decrement'>-</button>
    </div>
  </template>

  <script src="../js/vue.js"></script>
  <script>

    Vue.component('cpn1', {
      template: '#cpn',
      data() {
        return {
          counter: 0
        }
      },
      methods: {
        increment(){
          this.counter++;
        },
        decrement(){
          this.counter--;
        }
      }
    })

    const app = new Vue({
      el: '#app',
      data: {
        firstName: 'Kobe',
        age: 17,
      }
    })
  </script>

 

 

58-父==>子

 

<div id="app">
  <cpn :csuperstar='superstar' :cname='name'></cpn>
</div>
<template id="cpn">
  <div>
    <p>{{cname}}</p>
    <ul>
      <li v-for='item in csuperstar'>{{item}}</li>
    </ul>
  </div>
</template>

<script src="../js/vue.js"></script>
<script>

//Vue.compoment('cpn',{})
  const cpn = {
    template: '#cpn',
    // props: ['csuperstar','cname'],
    props: {
      // 1,类型限制
      // csuperstar: Array,
      // cname: String
      // 2,提供默认值以及必传值
      cname: {
        type: String,
        default: 'Kobe',
        required: true
      },
        // 类型为对象或数组（引用值）时候，默认值必须是一个函数
      csuperstar: {
        type: Array,
        default(){
          return []
        }
        
      }
    },
    data(){
      return {}
    },
    methods: {

    }
  }

  const app = new Vue({
    el: '#app',
    data: {
      name: 'Bryant',
      superstar: ['Curry','Jordan','James','Dukan','Onial']
    },
    components: {
      cpn
    }
  })
</script>

 

 

 

59-Vue小驼峰

<div id="app">
  <cpn :c-Super-Star='superStar' :c-Name='name'></cpn>
</div>
<template id="cpn">
  <div>
    <p>{{cName}}</p>
    <ul>
      <li v-for='item in cSuperStar'>{{item}}</li>
    </ul>
  </div>
</template>

<script src="../js/vue.js"></script>
<script>

// Vue.compoment('cpn',{})
  const cpn = {
    template: '#cpn',
    // props: ['csuperstar','cname'],
    props: {
      // 1,类型限制
      // csuperstar: Array,
      // cname: String
      // 2,提供默认值以及必传值
      cName: {
        type: String,
        default: 'Kobe',
        required: true
      },
        // 类型为对象或数组（引用值）时候，默认值必须是一个函数
      cSuperStar: {
        type: Array,
        default(){
          return []
        }
        
      }
    },
    data(){
      return {}
    },
    methods: {

    }
  }

  const app = new Vue({
    el: '#app',
    data: {
      name: 'Bryant',
      superStar: ['Curry','Jordan','James','Dukan','Onial']
    },
    components: {
      cpn
    }
  })
</script>

 

 

 

60

<div id="app">
  <!-- // 父组件监听 -->
  <cpn @itemclick="cpnClick"></cpn>
</div>

<template id="cpn">
  <div>
    <button v-for="item in categories" 
            @click="btnClick(item)">
      {{item.name}}
    </button>
  </div>
</template>

<script src="../js/vue.js"></script>
<script>

// Vue.compoment('cpn',{})
  const cpn = {
    template: '#cpn',
    data(){
      return {
        categories: [
          {id: 'a', name: '热门推荐'},
          {id: 'b', name: '手机数码'},
          {id: 'c', name: '家用电器'},
          {id: 'd', name: '电脑办公'}
        ]
      }
    },
    methods: {
      btnClick(item){
        // 子组件发射事件: 自定义事件
        this.$emit('itemclick', item)
      }
    }
  }

  const app = new Vue({
    el: '#app',
    data: {
      name: 'Bryant',
      superStar: ['Curry','Jordan','James','Dukan','Onial']
    },
    components: {
      cpn
    },
    methods: {
      cpnClick(item){
        console.log(item.name);
      }
    }
  })
</script>

 

 

 

62-回顾