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 相关文章推荐
浅析showModalDialog数据缓存问题(用禁止浏览器缓存解决)
Jul 09 Javascript
阻止事件(取消浏览器对事件的默认行为并阻止其传播)
Nov 03 Javascript
kindeditor修复会替换script内容的问题
Apr 03 Javascript
jQuery插件windowScroll实现单屏滚动特效
Jul 14 Javascript
jQuery实现文本框邮箱输入自动补全效果
Nov 17 Javascript
JS根据浏览器窗口大小实时动态改变网页文字大小的方法
Feb 25 Javascript
关于动态执行代码(js的Eval)实例详解
Aug 15 Javascript
移动端界面的适配
Jan 11 Javascript
Ionic3 UI组件之autocomplete详解
Jun 08 Javascript
Node.js dgram模块实现UDP通信示例代码
Sep 26 Javascript
js中el表达式的使用和非空判断方法
Mar 28 Javascript
通过vue刷新左侧菜单栏操作
Aug 06 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
DC《小丑》11项提名领跑奥斯卡 Netflix成第92届奥斯卡提名最大赢家
2020/04/09 欧美动漫
初识php MVC
2014/09/10 PHP
php显示指定目录下子目录的方法
2015/03/20 PHP
两种php给图片加水印的实现代码
2020/04/18 PHP
PHP中的print_r 与 var_dump 输出数组
2016/06/13 PHP
对laravel in 查询的使用方法详解
2019/10/09 PHP
phpcmsv9.0任意文件上传漏洞解析
2020/10/20 PHP
JS注册/移除事件处理程序(ExtJS应用程序设计实战)
2013/05/07 Javascript
js禁止页面使用右键(简单示例代码)
2013/11/13 Javascript
jquery对象和javascript对象即DOM对象相互转换
2014/08/07 Javascript
JavaScript中的变量定义与储存介绍
2014/12/31 Javascript
js实现基于正则表达式的轻量提示插件
2015/08/29 Javascript
Vue.js快速入门实例教程
2016/10/15 Javascript
jQuery中ajax错误调试分析
2016/12/01 Javascript
基于JS设计12306登录页面
2016/12/28 Javascript
JavaSctit 利用FileReader和滤镜上传图片预览功能
2017/09/05 Javascript
windows下更新npm和node的方法
2017/11/30 Javascript
jquery+ajaxform+springboot控件实现数据更新功能
2018/01/22 jQuery
解决VUE中document.body.scrollTop为0的问题
2018/09/15 Javascript
vue实现前台列表数据过滤搜索、分页效果
2019/05/28 Javascript
详解一次Vue低版本安卓白屏问题的解决过程
2019/05/30 Javascript
Python中的index()方法使用教程
2015/05/18 Python
python中实现精确的浮点数运算详解
2017/11/02 Python
简单谈谈Python的pycurl模块
2018/04/07 Python
对pandas中apply函数的用法详解
2018/04/10 Python
详解Python3.6安装psutil模块和功能简介
2018/05/30 Python
Python补齐字符串长度的实例
2018/11/15 Python
Python实现堡垒机模式下远程命令执行操作示例
2019/05/09 Python
python三引号如何输入
2020/07/06 Python
python3.5的包存放的具体路径
2020/08/16 Python
HTML5之多线程(Web Worker)
2019/01/02 HTML / CSS
数控专业推荐信范文
2013/12/02 职场文书
经济信息系毕业生自荐信范文
2014/03/15 职场文书
2014年设计师工作总结
2014/11/25 职场文书
2015年公司行政后勤工作总结
2015/05/20 职场文书
ECharts transform数据转换和dataZoom在项目中使用
2022/12/24 Javascript