Vue2笔记_01创建vdom并挂载到dom元素上

首先看一下在 vue2 中 创建vdom并将其 挂载到dom元素上 的语法

import Vue from 'vue'
import App from './App.vue' //组件

new Vue({
  render: h => h(App),
}).$mount('#app')

• 在通过 new关键字 创建vue实例化对象时会 自动调用render 函数；
  • 得到vdom
  • 返回到实例化对象的beforeMount生命周期中；
• $mount函数将vdom挂载到dom元素上；
• 进行渲染

render函数

语法

render( createElement ){
  return createElement(...)
}

• 参数：render函数会将 createElement函数 作为参数传入 ；
• 返回值： 返回值为createElemenet函数的调用 即vdom

作用

render函数的作用是将 createElemet 函数创建的vdom返回到Vue实例化对象的beforeMount生命周期函数中；然后通过挂载点进行挂载然后将vdom渲染在界面上(真实dom)。

createElement函数

createElement函数是用于创建vdom的，其内有三个参数

• 参数1(必填)：需要渲染的html标签；
  • 类型(String | Object | function)
• 参数2(选填)：html标签的各种属性；
  • 类型(Object)
    • class : 类名(String)
    • style:样式(Object)
    • attrs: 属性(Object)
    • domProps:设置标签内容等
• 参数3(选填)：子元素

示例-参数1为字符串(html标签)

若是createElement的第一个参数为html标签的字符串-> 创建一个对应的html标签的vdom并将这个标签渲染到挂载点上(createElement创建$mount函数挂载渲染)；

<script>
export default {
  render( createElement ){
    return createElement('div',{domProps:{innerHTML:'html页面'}})
  }
}
</script>

• 
• 
• 原理：进入该组件会 自动调用render函数 得到vdom将其传入beforeMount生命周期函数中，让其将vdom渲染在界面上。

上述示例是创建了一个div标签，若是想给标签内部添加子元素->使用第三个参数为其添加子元素

<script>
export default {
  data(){
    return{
      value:[111,222]
    }
  },
  render( createElement ){
    return createElement('ul',{domProps:''},this.value.map(item => createElement('li',{domProps:{innerHTML:item},style:{color:'#f00'}})))
  }
}
</script>

• 
• 在有子元素时，要将父元素的innerHTML/innerText去掉，否则会覆盖标签间的全部内容，导致子元素不能正常显示；

示例2-参数1为组件

若是createElement的第一个参数为组件 -> 创建该组件的vdom渲染到挂载点上(createElement创建$mount函数挂载渲染)；

• 子组件

   <template>
     <ul>
       <li>111</li>
       <li>222</li>
     </ul>
   </template>
  

• 父组件

  • <script>
    import hello from './hello.vue'
    export default {
      data(){
        return{
          value:[111,222]
        }
      },
      render( createElement ){
        return createElement(hello)
      }
    }
    </script>
    

el与$mount挂载

使用el或$mount进行挂载