vue两个组件切换、加载问题

Question

想做一个类似博客文章列表，有详情的和简单的两种情况,点击不同按钮加载不同的文章信息，两个我分别封装成两个组件，一个是<article-list>,另一个是<article-box>。
现在我想根据选中不同的按钮，加载不同的组件。好像不能直接$("#main").html("<article-list />")，好像直接把他变为文本了。所以怎么才能根据点击不同的按钮加相应的组件呢？

    $(".glyphicon-list").click(function() {
        if(!$(this).hasClass("active")) {
            $("#article").html('<article-list />');
            $(this).siblings().removeClass("active").addClass('active');
        }
    });
    $(".glyphicon-th").click(function() {
        if(!$(this).hasClass("active")) {
            $("#article").html('<article-box />');
            $(this).siblings().removeClass("active").addClass('active');
        }
    })

Answer 1

翻了翻官网的教程，发现是 动态组件。 多个组件可以使用同一个挂载点，然后动态地在它们之间切换。使用保留的 <component> 元素，动态地绑定到它的 is 特性。
http://cn.vuejs.org/v2/guide/...动态组件

Answer 2

可别使用 jQuery 来修改 Vue.js 模板了，Vue.js 模板是要在 Vue 创建实例时编译之后才生效的。

一个建议，停止使用 jQuery（虽然 Vue.js 侵入性低，但感觉你同时用 jQuery 和 Vue，会严重禁锢你的思维），从头开始用数据驱动的思路去学习 Vue.js。

jQuery 能做的事件驱动，通过事件绑定，Vue.js 都能做到。

Answer 3

可以通过条件控制吧，大致这样：

<article-list v-if="case1"></article-list>
<article-box v-if="case2"></article-box>