vue 非template模式_vue渲染方式render和template的差別

render函數詳解

Vue中的Render函數中有一個參數，這個參數是一個函數通常我們叫做h。其實這個h叫做createElement。Render函數将createElement的傳回值放到了HTML中

createElement這個函數中有3個參數

第一個參數(必要參數)：主要用于提供DOM的html内容，類型可以是字元串、對象或函數

第二個參數(類型是對象，可選)：用于設定這個DOM的一些樣式、屬性、傳的元件的參數、綁定事件之類

第三個參數(類型是數組，數組元素類型是VNode，可選)：主要是指該結點下還有其他結點，用于設定分發的内容，包括新增的其他元件。注意，元件樹中的所有VNode必須是唯一的

// @return {VNode}

createElement(

// {String | Object | Function}

// 一個HTML标簽字元串，元件選項對象，或者一個傳回值類型為String/Object的函數。該參數是必須的

'div',

// {Object}

// 一個包含模闆相關屬性的資料對象，這樣我們可以在template中使用這些屬性，該參數是可選的。

{

attrs: {

name: headingId,

href: '#'+headingId

},

style: {

color: 'red',

fontSize: '20px'

},

'class': {

foo: true,

bar: false

},

// DOM屬性

domProps: {

innerHTML: 'baz'

},

// 元件props

props: {

myProp: 'bar'

},

// 事件監聽基于 'on'

// 是以不再支援如 'v-on:keyup.enter' 修飾語

// 需要手動比對 KeyCode

on: {

click: function(event) {

event.preventDefault();

console.log(111);

}

}

}

// {String | Array}

// 子節點(VNodes)由 createElement() 建構而成。可選參數

// 或簡單的使用字元串來生成的 "文本節點"。

[

'xxxx',

createElement('h1', '一則頭條'),

createElement(MyComponent, {

props: {

someProp: 'xxx'

}

}),

this.$slots.default

]

)

什麼時候用render函數？

假設我們要封裝一套按鈕元件，按鈕有四個樣式(success、error、warning、default)。首先，你可能會想到如下實作

{{ text }}