# 1. vue創建html 1. `template`來創建你的HTML 2. 需要使用JavaScript的編程能力和創建HTML，這就是`render`函數，它比`template`更接近編譯器。 3. 在Vue的底層實現上，Vue將模板編譯成虛擬DOM渲染函數。結合Vue自帶的響應系統，在應該狀態改變時，Vue能夠智能地計算出重新渲染組件的最小代價并應到DOM操作上。 4.  ``` render: function (h) { //render函數 return h( <標簽>, // tag name標簽名稱 ｛｝，//節點屬性 [數據或 h函數創建子節點如圖] ) }, props: { level: { type: Number, required: true } } ``` # 2. 寫法 ## 2.1 自定義函數 ~~~jsx Vue.component('anchored-heading', { render: function (createElement) { //render函數 return createElement ( 'h' + this.level, // tag name標簽名稱 this.$slots.default // 子組件中的陣列 ) }, props: { level: { type: Number, required: true } } }) ~~~ ## 2.2 `template`寫法 ~~~jsx let app = new Vue({ template: `<div>{{ msg }}</div>`, data () { return { msg: '' } } }) ~~~ ## 2.3 el寫法 ~~~csharp let app = new Vue({ el: '#app', data () { return { msg: 'Hello Vue!' } } }) ~~~ 1. **無論哪種方法，都要得到`render`函數。** 2. 比較簡單的邏輯，使用`template`和`el`比較好，因為這兩種都屬于聲明式渲染，對用戶理解比較容易，但靈活性比較差，因為最終生成的`render`函數是由程序通過AST解析優化得到的 3. 而使用自定義`render`函數相當于人已經將邏輯翻譯給程序，能夠勝任復雜的邏輯，靈活性高，但對于用戶的理解相對差點。 # 3. 理解`createElement`函數 在使用`render`函數，其中還有另一個需要掌握的部分，那就是`createElement`。接下來我們需要熟悉的是如何在`createElement`函數中生成模板。那么我們分兩個部分來對`createElement`進行理解。 ## 3.1 `createElement`參數 `createElement`，簡寫h，可以是接受多個參數： ### **3.1.1 h第一個參數** > 第一個參數對于`createElement`而言是一個必須的參數，這個參數可以是字符串`string`、是一個對象`object`，也可以是一個函數`function`。 **1. String參數，指定組件第一級標簽** ~~~jsx <div id="app"> <custom-element></custom-element> </div> //定義一個組件 Vue.component('custom-element', { render: function (createElement) { return createElement('div') } }) let app = new Vue({ el: '#app' }) ~~~ 上面的示例，給`createElement`傳了一個`String`參數`'div'`，即傳了一個HTML標簽字符。最后會有一個`div`元素渲染出來：  **2. Object（組件對象）參數** 最基礎要有template標簽，也可以有css和js，就是一個組件對象 ~~~jsx Vue.component('custom-element', { render: function (createElement) { return createElement({ template: `<div>Hello Vue!</div>` }) } }) ~~~  **3. 傳遞Function** ~~~jsx Vue.component('custom-element', { render: function (createElement) { var eleFun = function () { return { template: `<div>Hello Vue!</div>` } } return createElement(eleFun()) } }) ~~~ 最終得到的結果和上圖是一樣的。這里傳了一個`eleFun()`函數給`createElement`，而這個函數返回的是一個對象。 ### 3.1.2 第二個參數:`{Object}` > 指定標簽的屬性信息 `createElement`是一個可選參數，這個參數是一個`Object`。來看一個小示例： ~~~jsx <div id="app"> <custom-element></custom-element> </div> Vue.component('custom-element', { render: function (createElement) { var self = this // 第一個參數是一個簡單的HTML標簽字符 “必選” // 第二個參數是一個包含模板相關屬性的數據對象 “可選” return createElement('div', { 'class': { foo: true, bar: false }, style: { color: 'red', fontSize: '14px' }, attrs: { id: 'boo' }, domProps: { innerHTML: 'Hello Vue!' } }) } }) let app = new Vue({ el: '#app' }) ~~~ 最終生成的DOM，將會帶一些屬性和內容的`div`元素，如下圖所示  ### 3.1.3 第三個參數：{String | Array} > 指定子節點 `createElement`還有第三個參數，這個參數是可選的，可以給其傳一個`String`或`Array`。比如下面這個小示例： ~~~jsx <div id="app"> <custom-element></custom-element> </div> Vue.component('custom-element', { render: function (createElement) { var self = this return createElement( 'div', // 第一個參數是一個簡單的HTML標簽字符 “必選” { class: { title: true }, style: { border: '1px solid', padding: '10px' } }, // 第二個參數是一個包含模板相關屬性的數據對象 “可選” [ createElement('h1', 'Hello Vue!'), createElement('p', '開始學習Vue!') ] // 第三個參數是傳了多個子元素的一個數組 “可選” ) } }) let app = new Vue({ el: '#app' }) ~~~ 最終的效果如下：  接下來看一個小示例，看看`template`和`render`方式怎么創建相同效果的一個組件: ~~~jsx <div id="app"> <custom-element></custom-element> </div> Vue.component('custom-element', { template: `<div id="box" :class="{show: show}" @click="handleClick">Hello Vue!</div>`, data () { return { show: true } }, methods: { handleClick: function () { console.log('Clicked!') } } }) ~~~ 上面`Vue.component()`中的代碼換成`render`函數之后，可以這樣寫： ~~~kotlin Vue.component('custom-element', { render: function (createElement) { return createElement('div', { class: { show: this.show }, attrs: { id: 'box' }, on: { click: this.handleClick } }, 'Hello Vue!') }, data () { return { show: true } }, methods: { handleClick: function () { console.log('Clicked!') } } }) ~~~ 最后聲明一個Vue實例，并掛載到`id`為`#app`的一個元素上： ~~~csharp let app = new Vue({ el: '#app' }) ~~~