前言
如果你使用過
React框架惫撰，相信你一定了解過JSX語法糖扼雏。在此不去長篇大論JSX語法，簡單的說就是可以js和html混用，經(jīng)過編譯后轉(zhuǎn)化為JavaScript語法励翼。
而除了JSX之外，在react中也可以直接用js語法來書寫元素，但是在JSX中html結(jié)構(gòu)更加直觀惭蟋。
創(chuàng)建HTML的幾種方式
-
模板語法
在底層實現(xiàn)上癌佩，vue將模板編譯成虛擬DOM渲染函數(shù)。結(jié)合響應(yīng)系統(tǒng)矫俺，在應(yīng)用狀態(tài)改變時，vue能夠智能地計算出重新渲染組件的最小代價并應(yīng)用到DOM操作上。
- Render函數(shù)
字符串模板的代替方案伊群。render函數(shù)接收一個createElement方法作為第一個參數(shù)用來創(chuàng)建VNode
createElement 參數(shù)
createElement() 有3個參數(shù)：
參數(shù)一
require: true
type: {String | Object | Function}
meaning: {一個 HTML 標簽字符串 | 組件選項對象 | 一個返回值類型為String/Object的函數(shù)}參數(shù)二
require: false
type: { Object }
meaning: {一個包含模板相關(guān)屬性的數(shù)據(jù)對象}參數(shù)三
require: false
type: { String | Array }
meaning: { 子節(jié)點(VNodes)丸卷，由createElement()生成萎坷，或簡單的使用字符串來生成"文本節(jié)點"}
深入data object參數(shù)
就是createElement的第二個參數(shù)住闯。
{
'class': {
// 和`v-bind:class`一樣的API
},
style: {
// 和`v-bind:style`一樣的API
},
attrs: {
// 正常的 html 特性
},
props: {
// 組件 props
},
domProps: {
// DOM 屬性
},
on: {
// 事件監(jiān)聽器基于on
// 不再支持如 `v-on:keyup.enter` 修飾器，需手動匹配 keyCode
},
nativeOn: {
// 僅對于組件，用于監(jiān)聽原生組件，而不是組件內(nèi)部使用`vm.$emit`觸發(fā)的事件
},
directives: [
{
// 自定義指令识腿，注意事項：不能對綁定的舊值設(shè)值
// vue 會為您持續(xù)追蹤
}
],
scopedSlots: {
},
slot: '', // 如果組件是其他組件的子組件，需為 slot 指定名稱
// 其他特殊頂層屬性
key: '',
ref: ''
}
約束
就是createElement的第三個參數(shù)。
組件樹中的所有 VNodes 必須是唯一的蹬昌。
使用 JavaScript 代替模板功能
v-if / v-for
v-if 在render中用if / else實現(xiàn)；
v-for 在render中用map實現(xiàn)
v-model
render: function (createElement) {
var self = this
return createElement('input', {
domProps: {
value: self.value
},
on: {
input: function (event) {
self.value = event.target.value
self.$emit('input', event.target.value)
}
}
})
}
別名
將 h 作為 createElement 的別名是 Vue 生態(tài)系統(tǒng)中的一個通用慣例满粗，實際上也是 JSX 所要求的挤聘，如果在作用域中 h 失去作用， 在應(yīng)用中會觸發(fā)報錯。
es5
new Vue({
el: '#demo',
render: function (h) {
return (
h(APP)
)
}
})
es6
new Vue({
el: '#demo',
render: h => h(APP)
})
