vue2中render函数学习

最新推荐文章于 2024-05-17 18:09:22 发布

一个好好的程序员

最新推荐文章于 2024-05-17 18:09:22 发布

阅读量1.5k

点赞数 1

文章标签：学习 javascript 前端 vue.js

本文链接：https://blog.csdn.net/m0_62823653/article/details/125699351

版权

第一部分：render函数的语法学习

都知道Vue项目入口文件main.js里面有个render函数长下面这样，将项目的App根组件，挂载到根实例上通过render渲染

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

render函数返回值是一个VNode -> "virtual node"虚拟节点

render函数的参数是一个createElement函数

第一个标签名称

第二个属性值

第三个标签子级元素

createElement返回值也是一个VNode节点

createElement函数的参数有三个

例如以下vue2的写法

<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>

<body>
    <div id="app">
    </div>
    <script>
/*
render函数的用途
    创建html模板
知识点：
1.render 函数的参数是createElement 函数
    createElement返回值是一个虚拟dom。即VNode
    也就是我们要渲染的节点
2.createElement有三个参数
    第一个参数：必需，{String|Object|Function}
    是要渲染的html标签
    第二个参数：可选：{Object}
    html标签的各种属性
    第三个参数：可选，{String|Array}
    子虚拟节点(VNodes),
    当前html标签的子元素
3.渲染过程
【1】独立构建
    包括模板编译器。HTML字符串===>render函数===>Vnode===>真实dom节点
【2】运行时构建
    不包含模板编译器，render函数===>VNode===>真实DOM节点

render函数的返回值是VNode
*/ 
 new Vue({
     data() {
         return {
             isRed: true
         }
     },
     // render:h=>h(App),
     render(createElement) {
             return createElement('div', {
                 // 第二个参数：可选：{Object}:html标签的各种属性
                 'class': {
                     'is-red': this.isRed
                 },
                 // 设置style
                 style:{color:"#f00",fontSize:"22px"},
                 // 设置html内容domProps
                 // domProps:{innerHTML:'我是div的内容,我今天很开心'},
                 // 设置html的属性
                 attrs:{id:"xxid"}
             }, [
                 // domProps如果在父盒子设置，子元素内容不会显示
                 createElement('h1','我是虚拟子节点')
             ]
         )
     }
 }).$mount('#app')
</script>
</body>

</html>

第二部分：全局注册组件写法

第一步：创建js文件默认导出

export default {
  render (createElement) {
    return createElement('div', {
      // 第二个参数：可选：{Object}:html标签的各种属性
      class: {
        'is-red': this.isRed
      },
      // 设置style
      style: { color: '#f00', fontSize: '22px' },
      // 设置html内容domProps
      domProps: { innerHTML: '我是div的内容,我今天很开心' },
      // 设置html的属性
      attrs: { id: 'xxid' }
    }, [
      // domProps如果在父盒子设置，子元素内容不会显示
      createElement('h1', '我是虚拟子节点')
    ]
    )
  }
}

第二步：在main.js中全局注册

import render from './views/render/render.js'
Vue.component('textName', render)

未完待续。。。

一个好好的程序员

关注

1
点赞
踩
2

收藏

觉得还不错? 一键收藏
打赏
0
评论
vue2中render函数学习

都知道项目入口文件里面有个函数长下面这样，将项目的根组件，挂载到根实例上通过渲染 render函数返回值是一个VNode -> "virtual node"虚拟节点render函数的参数是一个createElement函数第一个标签名称第二个属性值第三个标签子级元素createElement返回值也是一个VNode节点createElement函数的参数有三个第二部分：全局注册组件写法第一步：创建js文件默认导出第二步：在main.js中全局注册未完待续。。。..
复制链接

扫一扫