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)
      ]
    )
  }
})

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

Javascript 相关文章推荐
Prototype PeriodicalExecuter对象 学习
Jul 19 Javascript
js加减乘除丢失精度问题解决方法
May 16 Javascript
一个jquery实现的不错的多行文字图片滚动效果
Sep 28 Javascript
js图片轮播效果实现代码
Apr 18 Javascript
完美解决input[type=number]无法显示非数字字符的问题
Feb 28 Javascript
Node.js常用工具之util模块
Mar 09 Javascript
Omi v1.0.2发布正式支持传递javascript表达式
Mar 21 Javascript
Vue-router 类似Vuex实现组件化开发的示例
Sep 15 Javascript
基于vue2.x的电商图片放大镜插件的使用
Jan 22 Javascript
JS计算两个数组的交集、差集、并集、补集(多种实现方式)
May 21 Javascript
20个必会的JavaScript面试题(小结)
Jul 02 Javascript
在vue中使用cookie记住用户上次选择的实例(本次例子中为下拉框)
Sep 11 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
You might like
php通用防注入程序 推荐
2011/02/26 PHP
ThinkPHP自动完成中使用函数与回调方法实例
2014/11/29 PHP
php解析url并得到url中的参数及获取url参数的四种方式
2015/10/26 PHP
php实现socket推送技术的示例
2017/12/20 PHP
用js实现随机返回数组的一个元素
2007/08/13 Javascript
获取URL地址中的文件名和参数的javascript代码
2009/09/02 Javascript
在次封装easyui-Dialog插件实现代码
2010/11/14 Javascript
javascript中使用replaceAll()函数实现字符替换的方法
2010/12/25 Javascript
5个最佳的Javascript日期处理类库分享
2012/04/15 Javascript
jQuery简单实现banner图片切换
2014/01/02 Javascript
全面解析Bootstrap排版使用方法(文字样式)
2015/11/30 Javascript
SVG描边动画
2017/02/23 Javascript
vue 中filter的多种用法
2018/04/26 Javascript
微信小程序滑动选择器的实现代码
2018/08/10 Javascript
vue打包相关细节整理(小结)
2018/09/28 Javascript
js 计算图片内点个数的示例代码
2019/04/04 Javascript
通过JQuery,JQueryUI和Jsplumb实现拖拽模块
2019/06/18 jQuery
vue中使用GraphQL的实例代码
2019/11/04 Javascript
js判断一个对象是数组(函数)的方法实例
2019/12/19 Javascript
js实现简单五子棋游戏
2020/05/28 Javascript
nuxt 每个页面head标签内容设置方式
2020/11/05 Javascript
ES6 十大特性简介
2020/12/09 Javascript
老生常谈python之鸭子类和多态
2017/06/13 Python
python实战之实现excel读取、统计、写入的示例讲解
2018/05/02 Python
HTML5新特性之语义化标签
2017/10/31 HTML / CSS
澳大利亚领先的皮肤诊所:Skin Matrix(抗衰老、痤疮专家、药妆护肤)
2018/05/20 全球购物
编写strcpy函数
2014/06/24 面试题
高中数学教学反思
2014/01/30 职场文书
幼儿园教师自我鉴定
2014/03/20 职场文书
大学生入党推荐书范文
2014/05/17 职场文书
寒暑假实习证明书模板
2014/11/29 职场文书
初中生思想道德自我评价
2015/03/09 职场文书
2016高考冲刺决心书
2015/09/23 职场文书
CSS filter 有什么神奇用途
2021/05/25 HTML / CSS
微信小程序实现聊天室功能
2021/06/14 Javascript
Go语言编译原理之变量捕获
2022/08/05 Golang