Vue复习笔记-2018-07-16

template模板：
html代码很少时写在new Vue的选项里
template：`<h2 style='color:red'>我是选项里的template模板</h2>`

html较多：
<template id="demo2">
    <h2 style='color:red'>我是template标签模板</h2>
</template>
在选项中添加：
template: "#demo2"

<script type="x-template" id="demo3">
    <h2 style='color:red'>我是script标签模板</h2>
<script>
在选项中添加：
template: "#demo3"

全局component:
Vue.component('zmj',{
    template:`<h2 style='color:red'>我是选项里的template模板</h2>`
})
局部component（在new Vue()）选项中添加：
components:{
    'zmj':{
          template:`<h2 style='color:red'>我是选项里的template模板</h2>`
     }
}

<zmj here="China" ><zmj>
components:{
    "zmj":{
          template:`<div style="color:red"> {{ here }} </div>`,
          props:['here']
     }
}
带横线"-"的属性处理   from-here 转为 fromHere即可
属性传值    :here = "message"       在data中定义message的值

父子组件
var city = {
    template:`<div>siChuan of China</div>`
}
var zmj = {
    template:`<div>
                           <p>Panda from China</p>
                           <city></city>
                     </div>`，
    components:{
          "city": city
     }
}

<component>标签
<component :is="who"></component>