前注：
版本限制：
Vue.js 2.0+
1.0无法使用
没耐心，只关心有什么用的，想知道其大概是获取什么东西后生成的，可以直接看结尾的总结
非使用render方法的情况
完整代码：
<!DOCTYPE html><html><head><title>Vue的render方法说明</title><script src="https://unpkg.com/vue@2.1.10/dist/vue.js"></script></head><body><div id="app"><child :level="1">Hello world!</child></div><script type="text/x-template" id="template"><div><h1 v-if="level === 1"><slot></slot></h1><h2 v-if="level === 2"><slot></slot></h2><h3 v-if="level === 3"><slot></slot></h3><h4 v-if="level === 4"><slot></slot></h4><h5 v-if="level === 5"><slot></slot></h5><h6 v-if="level === 6"><slot></slot></h6></div></script><script type="text/javascript">Vue.component('child', {template: '#template',props: {level: {type: Number,required: true}}})new Vue({el: "#app"})</script></body></html>代码说明：
最下面的new Vue方法很明显，是new了一个Vue的实例，挂载点是”#app”这个dom Vue.component这部分代码，第一个参数表示注册了一个Vue的组件，标签名是child（即 <child> 标签会被替换）； 第二个参数中，template属性表示取找id=“template”的标签（另注，这个标签是script，或者是div，或者是template，或者是其他，没有影响），然后将这个标签作为组件的模板 props表示传递给这个组件的变量，通过标签中的v-bind:level这种形式传递变量level的值等于1。在这里的写法是限制变量类型为number，并且强制需要 slot表示内容分发，具体来说，就是把组件替换的源html标签里的内容（如 <child> 标签里面的内容，不包含 <child> 标签本身，这里是Hello world!），发在 <slot> 标签所在的位置（即放在 <h1>``````<h2> 这样的标签内）。 如果还不理解，可以运行该段代码查看结果，或者去看vue的官方文档说明 总的来说，顺序如下：注册一个组件，这个组件有模板，这个模板里有一个变量，变量的值通过父组件来传递，然后根据变量的值，通过v-if命令显示对应的html标签内容，然后在父组件里使用这个组件，让子组件显示需要显示的内容。这样的代码有一个缺陷，就是需要写大量重复的代码，如从 <h1> ～ <h6> 共6种情况。如果这样的模板比较复杂，比如 <hx> 标签里还有很多其他内容，显然会让人十分困扰，既不美观也不好用。
使用render方法的情况
解决办法就是render方法，全部代码如下：
新闻热点
疑难解答
图片精选
