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 相关文章推荐
用javascript动态调整iframe高度的方法
Mar 06 Javascript
EXT中xtype的含义分析
Jan 07 Javascript
如何从jQuery的ajax请求中删除X-Requested-With
Dec 11 Javascript
JavaScript网页定位详解
Jan 13 Javascript
Node.js的包详细介绍
Jan 14 Javascript
基于vue2的table分页组件实现方法
Mar 20 Javascript
vue实现图片滚动的示例代码(类似走马灯效果)
Mar 03 Javascript
jQuery移动端跑马灯抽奖特效升级版(抽奖概率固定)实现方法
Jan 18 jQuery
微信小程序实现元素渐入渐出动画效果封装方法
May 18 Javascript
JS实现骰子3D旋转效果
Oct 24 Javascript
详解JS预解析原理
Jun 16 Javascript
mapboxgl区划标签避让不遮盖实现的代码详解
Jul 01 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
基于MySQL到MongoDB简易对照表的详解
2013/06/03 PHP
PHP不用递归遍历目录下所有文件的代码
2014/07/04 PHP
php实现汉字验证码和算式验证码的方法
2015/03/07 PHP
前端必学之PHP语法基础
2016/01/01 PHP
PHP unlink与rmdir删除目录及目录下所有文件实例代码
2018/02/07 PHP
php获取微信openid方法总结
2019/10/10 PHP
解决thinkPHP 5 nginx 部署时,只跳转首页的问题
2019/10/16 PHP
Laravel 在views中加载公共页面的实现代码
2019/10/22 PHP
laravel中的fillable和guarded属性详解
2019/10/23 PHP
js资料prototype 属性
2007/03/13 Javascript
点击下载链接 弹出页面实现代码
2009/10/01 Javascript
jQuery选择器的工作原理和优化分析
2011/07/25 Javascript
jQuery实现可高亮显示的二级CSS菜单效果
2015/09/01 Javascript
基于JavaScript实现瀑布流效果(循环渐近)
2016/01/27 Javascript
页面缩放兼容性处理方法(zoom,Firefox火狐浏览器)
2017/08/29 Javascript
vue.js如何将echarts封装为组件一键使用详解
2017/10/10 Javascript
Vue2 SSR渲染根据不同页面修改 meta
2017/11/20 Javascript
解决layui动态添加的元素click等事件触发不了的问题
2019/09/20 Javascript
vue 使用插槽分发内容操作示例【单个插槽、具名插槽、作用域插槽】
2020/03/06 Javascript
快速了解Vue父子组件传值以及父调子方法、子调父方法
2020/07/15 Javascript
vue-列表下详情的展开与折叠案例
2020/07/28 Javascript
JS可断点续传文件上传实现代码解析
2020/07/30 Javascript
详细探究Python中的字典容器
2015/04/14 Python
编写Python爬虫抓取豆瓣电影TOP100及用户头像的方法
2016/01/20 Python
python pandas.DataFrame选取、修改数据最好用.loc,.iloc,.ix实现
2018/06/11 Python
解决python升级引起的pip执行错误的问题
2018/06/12 Python
python画图--输出指定像素点的颜色值方法
2019/07/03 Python
django配置app中的静态文件步骤
2020/03/27 Python
PyCharm 2020.2 安装详细教程
2020/09/25 Python
CSS3 选择器 伪类选择器介绍
2012/01/21 HTML / CSS
html5设计原理(推荐收藏)
2014/05/17 HTML / CSS
党员组织关系介绍信
2014/02/13 职场文书
幼教求职信
2014/03/12 职场文书
求职教师自荐书
2014/06/19 职场文书
党性心得体会
2014/09/03 职场文书
Python&Matlab实现樱花的绘制
2022/04/07 Python