文章目录
一:节点、树以及虚拟 DOM
1. 浏览器的工作原理
<div>
<h1>My title</h1>
Some text content
<!-- TODO: Add tagline -->
</div>
上述 HTML 对应的 DOM 节点树如下图所示:
每个元素都是一个节点。每段文字也是一个节点。甚至注释也都是节点。一个节点就是页面的一个部分。就像家谱树一样,每个节点都可以有孩子节点 (也就是说每个部分可以包含其它的一些部分)。
2.虚拟 DOM
“虚拟节点 (virtual node)”,也常简写它为“VNode
”。
“虚拟 DOM”是我们对由 Vue 组件树建立起来的整个 VNode 树的称呼。
二:createElement 参数
1:第一个参数{String | Object | Function}
{String | Object | Function}
{HTML 标签名 | 组件选项对象 | 函数}
String
<div id="app">
<custom-element></custom-element>
</div>
<script>
Vue.component('custom-element', {
render: function (createElement) {
return createElement('input')
}
})
var vm = new Vue({
el: '#app'
})
</script>
Object
<div id="app">
<custom-element></custom-element>
</div>
<script>
Vue.component('custom-element', {
render: function (createElement) {
return createElement({
template: `<div>Hello Vue!</div>`
})
}
})
var vm = new Vue({
el: '#app'
})
</script>
Function
<div id="app">
<custom-element></custom-element>
</div>
<script>
Vue.component('custom-element', {
render: function (createElement) {
var eleFun = function(){
return {
template:`<h1>我是方法</h1>`
}
}
return createElement(
eleFun()
)
}
})
var vm = new Vue({
el: '#app'
})
</script>
第一个参数是一个简单的HTML标签字符 “必选”
第二个参数是一个包含模板相关属性的数据对象 “可选”
2:第二个参数{Object}
{Object}
一个与模板中 attribute 对应的数据对象。是个可选参数
<div id="app">
<custom-element></custom-element>
</div>
<script>
Vue.component('