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 相关文章推荐
PPK 谈 JavaScript 的 this 关键字 [翻译]
Sep 29 Javascript
jquery+ajax+C#实现无刷新操作数据库数据的简单实例
Feb 08 Javascript
jquery实现select选中行、列合计示例
Apr 25 Javascript
JS实现距离上次刷新已过多少秒示例
May 23 Javascript
AngularJS基础 ng-include 指令示例讲解
Aug 01 Javascript
javascript 面向对象function详解及实例代码
Feb 28 Javascript
简单实现jQuery上传图片显示预览功能
Jun 29 jQuery
jQuery 防止相同的事件快速重复触发方法
Feb 08 jQuery
了解重排与重绘
May 29 Javascript
js动态获取时间的方法分析
Aug 02 Javascript
在vue-cli中引入lodash.js并使用详解
Nov 13 Javascript
springboot+vue实现文件上传下载
Nov 17 Vue.js
实例讲解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
Apache+php+mysql在windows下的安装与配置图解(最新版)
2008/11/30 PHP
php格式输出文件var_export函数实例
2014/11/15 PHP
smarty内置函数section的用法
2015/01/22 PHP
Laravel5.1数据库连接、创建数据库、创建model及创建控制器的方法
2016/03/29 PHP
利用Laravel事件系统如何实现登录日志的记录详解
2017/05/20 PHP
纯JS实现动态时间显示代码
2014/02/08 Javascript
javascript实现检验的各种规则
2015/07/31 Javascript
jquery.cookie.js用法实例详解
2015/12/25 Javascript
BootStrap Validator 版本差异问题导致的submitHandler失效问题的解决方法
2016/12/01 Javascript
Angular4学习笔记之准备和环境搭建项目
2017/08/01 Javascript
ES6中Class类的静态方法实例小结
2017/10/28 Javascript
详解用webpack的CommonsChunkPlugin提取公共代码的3种方式
2017/11/09 Javascript
浅谈webpack对样式的处理
2018/01/05 Javascript
详解如何在微信小程序中愉快地使用sass
2018/07/30 Javascript
javascript执行上下文、变量对象实例分析
2020/04/25 Javascript
js实现时间日期校验
2020/05/26 Javascript
在vue中使用console.log无效的解决
2020/08/09 Javascript
js 将多个对象合并成一个对象 assign方法的实现
2020/09/24 Javascript
利用Psyco提升Python运行速度
2014/12/24 Python
Python脚本实现格式化css文件
2015/04/08 Python
python创建一个最简单http webserver服务器的方法
2015/05/08 Python
selenium python浏览器多窗口处理代码示例
2018/01/15 Python
python Tkinter版学生管理系统
2019/02/20 Python
Python代码实现删除一个list里面重复元素的方法
2019/04/02 Python
libreoffice python 操作word及excel文档的方法
2019/07/04 Python
PHP统计代码行数的小代码
2019/09/19 Python
Python Opencv提取图片中某种颜色组成的图形的方法
2019/09/19 Python
python基于event实现线程间通信控制
2020/01/13 Python
简单聊聊H5的pushState与replaceState的用法
2018/04/03 HTML / CSS
blueseventy官网:铁人三项和比赛泳衣
2021/02/06 全球购物
定义一结构体数组表示分数,并求两个分数相加之和
2013/06/11 面试题
文秘专业个人求职信
2013/12/22 职场文书
销售活动策划方案
2014/08/26 职场文书
逃课检讨书
2015/01/26 职场文书
2015年妇联工作总结范文
2015/04/22 职场文书
python区块链持久化和命令行接口实现简版
2022/05/25 Python