[Vue]extend & template &

extend 拓展实例构造器

<div id="author"></div>
var authorExtend = Vue.extend({
    template:'<p><a :href="authorURL">{{authorName}}</a></p>',
    data(){
        return {
            authorName:'huakang',
            authorURL:'https://www.baidu.com'
        }
    }
})
new authorExtend().$mount('#author')

template

<template id="ex">
    <h3>标签模板</h3>
</template>

<script type="x-template" id="ins">
    <h3>script模板</h3>
</script>

//三种使用方式
new Vue({
  template:str,//直接嵌套
  template:'#ex',//内部引用
  template:`#ins`,//外部引用
})

component 组件的相关知识

1. 声明

   • 外部申明 Vue.component({})
   • 内部申明 components:{kane:{template:''}}

2. props

<kane where="china" :want-to="msg"></kane>
new Vue({
  components:{
    kane:{
      template:`<p>there is {{where}}，want to {{wantTo}}</p>`,
    },
    props:['where','wantTo']
  }
})

3. :is来动态加载组件

<component :is="who"></component>
var app = new Vue({
    el:'#app',
    data:{
        who:'componentA'
    },
    components:{
        componentA,
        componentB,
        componentC
    }
})