限制元素

当使用 DOM 作为模板时，你会受到 HTML 本身的一些限制，因为 Vue 只有在浏览器解析、规范化模板之后才能获取其内容。Vue的模板是DOM模板，使用浏览器原生的解析器而不是自己实现一个。相比字符串模板，DOM模板有一些好处，但是也有问题，它必须是有效的HTML片段。一些HTML元素对什么元素可以放在它里面有限制。对内部元素有限制的标签内，放在这些元素内部的自定义标签将被提到元素的外面，因而渲染不正确。

对应自定义元素，应当使用is特性：

<table>
<tr is="my-component"></tr>
</table>

意思就是有些元素，比如 ul 里面只能直接包含 li元素，像这样：

<ul>
    <li></li>
</ul>
//而不能：
<ul>
    <your-component>
</ul>

这样就不能复用your-component这个组件了，如果要达到我们的目的，我们就要使用is特性像这样：

<ul>
    <li is="your-component"></li>
</ul>

动态组件

在我们平时使用vue中的模板的时候，许多时候都是直接定义成一个固定的模板，但是，vue中提供了一个动态模板，可以在任意模板中切换，就是用vue中<component>用:is来挂载不同的组件。

<div id="app" v-cloak>
        <component :is="currentView"></component>
        <button @click="handleChangeView('A')">A</button>
        <button @click="handleChangeView('B')">B</button>
        <button @click="handleChangeView('C')">C</button>
</div>
<script>
var app = new Vue({
            el: '#app',
            components:{
                comA:{
                    template:`
                        <div>组件A</div>
                    `
                },
                comB:{
                    template:`
                        <div>组件B</div>
                    `
                },
                comC:{
                    template:`
                        <div>组件C</div>
                    `
                }
            },
            data:{
                currentView:'comA'
            },
            methods:{
                handleChangeView:function(component){
                    this.currentView='com'+component;
                }
            }
        });
</script>

我们在components中注册了三个模板，当我们点击当前按钮的时候，就会将模板切换模板，可以说是非常方便了。