编程 Javascript

Vue Render函数创建DOM节点代码实例

Posted in Javascript onJuly 08, 2020

虽然在render里使用createElement函数创建DOM节点不是很直观，但是在部分独立组件的设计中还是可以满足一些特殊需求的。一个简单的render示例如下：

<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
</head>
<body>
  <div id="app">
    <my-component :list="list"></my-component>
  </div>
  <script src="vue.js"></script>
  <script>
    Vue.component('my-component', {
      props: {
        list: {
          type: Array,
          default: () => []
        }
      },
      render(createElement) {
        if (this.list.length) {
          return createElement('ul', this.list.map(item => createElement('li', item)))
        } else {
          return createElement('p', 'Empty list')
        }
      }
    })
    new Vue({
      el: '#app',
      data: {
        list: ['html', 'css', 'javascript']
      }
    })
  </script>
</body>
</html>

另外，由于v-if，v-else，v-show等指令都无法在render里使用，需要自己手动实现，拿常用的v-model举个栗子：

Vue.component('my-component', {
  data() {
    return {
      message: ''
    }
  },
  render(createElement) {
    return createElement(
      'div',
      [
        createElement(
          'input',
          {
            on: {
              input: e => this.message = e.target.value
            }
          }
        ),
        createElement('p', this.message)
      ]
    )
  }
})

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持三水点靠木。

Vue Render函数创建DOM节点代码实例

- Author -

viewts

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Javascript 相关文章推荐

javascript与CSS复习(三)

Jun 29 Javascript

JS对象与JSON格式数据相互转换

Feb 20 Javascript

javascript中expression的用法整理

May 13 Javascript

jQuery学习笔记之jQuery+CSS3的浏览器兼容性

Jan 19 Javascript

Dropzone.js实现文件拖拽上传功能(附源码下载)

Nov 22 Javascript

Angular2-primeNG文件上传模块FileUpload使用详解

Jan 14 Javascript

bootstrap 下拉多选框进行多选传值问题代码分析

Feb 14 Javascript

基于Vue实例对象的数据选项

Aug 09 Javascript

使用vue2实现购物车和地址选配功能

Mar 29 Javascript

JavaScript动态添加数据到表单并提交的几种方式

Jun 26 Javascript

解决vant的Toast组件时提示not defined的问题

Nov 11 Javascript

正则表达式基础与常用验证表达式

Jun 16 Javascript

实例讲解React 组件生命周期

Jul 08 #Javascript

详细分析React 表单与事件

Jul 08 #Javascript

详解JavaScript之ES5的继承

Jul 08 #Javascript

jQuery使用jsonp实现百度搜索的示例代码

Jul 08 #jQuery

微信小程序拖拽排序列表的示例代码

Jul 08 #Javascript

基于javascript canvas实现五子棋游戏

Jul 08 #Javascript

深度解读vue-resize的具体用法

Jul 08 #Javascript