前注：
版本限制：
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方法，全部代碼如下：
新聞熱點
疑難解答
圖片精選
