了解VUE的render函数的使用


Posted in Javascript onJune 08, 2017

Vue 推荐在绝大多数情况下使用 template 来创建你的 HTML。然而在一些场景中,你真的需要 JavaScript 的完全编程的能力,这就是 render 函数,它比 template 更接近编译器。 在 HTML 层, 我们决定这样定义组件接口:通过传入不同的level 1-6 生成h1-h6标签,和使用slot生成内容

<div id="div1">
  <child :level="1">Hello world!</child>
</div>
<script type="text/x-template" id="child-template">
 <h1 v-if="level === 1">
  <slot></slot>
 </h1>
 <h2 v-if="level === 2">
  <slot></slot>
 </h2>
 <h3 v-if="level === 3">
  <slot></slot>
 </h3>
 <h4 v-if="level === 4">
  <slot></slot>
 </h4>
 <h5 v-if="level === 5">
  <slot></slot>
 </h5>
 <h6 v-if="level === 6">
  <slot></slot>
 </h6>
 </script>

<script type="text/javascript">
  /**
   * 全局注册child组件,注意template如果值以 # 开始,则它用作选项符,将使用匹配元素的 innerHTML 作为模板。常用的技巧是用 <script type="x-template"> 包含模板,这样的好处是html不会渲染里面的内容
   * 这里使用template不是最好的选择,
   * 一、代码冗长 
   * 二、在不同的标题插入内容需要重复使用slot 
   * 三、由于组件必须有根元素,所以标题和内容被包裹在一个无用的div中,比如<div><h1>hello world</h1></div>
   */

  Vue.component('child', {
   template: '#child-template',
   props: {
    level: {
     type: Number,
     required: true
    }
   },
   data: function() {
    return {
     a: 1
    }
   }
  })

  new Vue({
    el:"#div1"
  })
 </script>

我们尝试使用render函数实现上面的例子,注意使用render函数,template 选项将被忽略。 createElement接收3个参数:

第一个参数可以是HTML标签名,组件或者函数都可以;此参数是必须的;

第二个为数据对象{Object}(可选);

第三个为子节点{String | Array}(可选),多个子节点[createElement(tag1),createElement(tag2)]。

<div id="div1">
  <child :level="1">
   Hello world!
  </child>
  <child :level="2">
   <!-- 将不会被显示 -->
   <span slot="footer">span</span>
   <p slot="header">header slot<span>span</span></p>
  </child>
 </div>

Vue.component('child', {
   render: function(createElement) {
    console.log(this.$slots);
    return createElement(
     'h'+ this.level, // tagName标签名称
     {
      // 为每个h标签设置class
      'class': {
       foo: true,
       bar: false
      },
      // 最终被渲染为内联样式
      style: {
       color: 'red',
       fontSize: '14px'
      },
      // 其他的html属性
      attrs: {
       id: 'foo',
       'data-id': 'bar'
      },
      // DOM属性
      domProps: {
       // innerHTML: 'from domProps',
      },
      // 事件监听器基于 "on"
      // 所以不再支持如 v-on:keyup.enter 修饰器
      on: {
       click: this.clickHandler
      },
      // ...
     },
     // 你可以从this.$slots获取VNodes列表中的静态内容
     // $slots.default用来访问组件的不具名slot
     // 当你可能需要具名slot的时候需要指定slot的name, this.$slots.header
     [this.$slots.default]
    )
   },
   template: '<div v-if="level===1"><slot></slot></div>', // 将被忽略
   props: {
    level: {
     type: Number,
     required: true
    }
   },
   methods: {
    clickHandler: function() {
     console.log('clickHandler')
    }
   }
  })

  new Vue({
    el:"#div1"
  })

我们现在可以完成这样的组件

<h1>
   <a name="hello-world" href="#hello-world" rel="external nofollow" >
    Hello world!
   </a>
</h1>

// 递归函数获得helloworld文本
  function getChildrenTextContent(child) {
    return child.map(function(node) {
      return node.children? getChildrenTextContent(node.children) : node.text
    }).join('')
  }
  Vue.component('child',{
    render: function(createElement) {
      var hello_world = getChildrenTextContent(this.$slots.default)
               .toLowerCase()
               .replace(/\W+/g,'-')
               .replace(/^\-|\-$/g,'');
      return createElement(
        'h'+ this.level,
        {},
        [ // 创建一个a标签,设置属性,并设置a标签的子节点
          createElement('a',{
            attrs: {
              name: hello_world,
              href: '#' + hello_world
            }
          },this.$slots.default)
        ]
      )
    },
    props: {
      level: {
        type: Number,
        required: true
      }
    }
  })
  new Vue({
    el:"#div1"
  })

注意VNode的唯一性,这里两个VNode指向同一引用是错误的,如果要重复创建多个相同元素/组件,可以使用工厂函数实现

<div id="div1">
  <child :level="1">
   Hello world!
  </child>
</div>

Vue.component('child',{
  // render: function(createElement) {
  // var myParagraphVNode = createElement('p','hello')
  // return createElement('div',
  //   [myParagraphVNode, myParagraphVNode]
  // )
  // },
  render: function(createElement) {
    return createElement('div',
      Array.apply(null, {length:20}).map(function() {
        return createElement('p','hello')
      })
    )
  },
  props: {
    level: {
      type: Number,
      required: true
    }
  }
})
new Vue({
  el:"#div1"
})

使用javascript代替模板功能,某些api要自己实现

①使用if/else代替v-if

②使用map代替v-for

Vue.component('child',{
  render: function(createElement) {
    if (this.lists.length) {
      return createElement('ul',this.lists.map(function() {
        return createElement('li','hi')
      }))
    } else {
      return createElement('p','no lists')
    }
  },
  props: {
    level: {
      type: Number,
      required: true
    }
  },
  data: function() {
    return {
      lists: [1,2,3]
    }
  }
})

// render函数中没有与v-model相应的api - 你必须自己来实现相应的逻辑:
Vue.component('child-msg',{
  render: function(createElement) {
    var self = this;
    return createElement('div', [
        createElement('input',{
          'on': {
            input: function(event) {
              self.value = event.target.value;
            }
          }
        }),createElement('p',self.value)
      ])
  },
  props: {
    level: {
      type: Number,
      required: true
    }
  },
  data: function() {
    return {
      value: ''
    }
  }
})
new Vue({
  el:"#div1"
})

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

Javascript 相关文章推荐
使用jQuery.Validate进行客户端验证(初级篇) 不使用微软验证控件的理由
Jun 28 Javascript
使用jQuery实现的网页版的个人简历(可换肤)
Apr 19 Javascript
使用delegate方法为一个tr标签加一个链接
Jun 27 Javascript
node.js中的fs.readFileSync方法使用说明
Dec 15 Javascript
JavaScript 事件对象介绍
Apr 13 Javascript
JS扩展方法实例分析
Apr 15 Javascript
javascript使用shift+click实现选择和反选checkbox的方法
May 04 Javascript
BootStrap入门教程(三)之响应式原理
Sep 19 Javascript
JavaScript中严格判断NaN的方法
Feb 16 Javascript
让Vue也可以使用Redux的方法
May 23 Javascript
Electron-vue脚手架改造vue项目的方法
Oct 22 Javascript
Js通过AES加密后PHP用Openssl解密的方法
Jul 12 Javascript
Node.js 使用命令行工具检查更新
Jun 08 #Javascript
在vue.js中抽出公共代码的方法示例
Jun 08 #Javascript
Ionic3 UI组件之autocomplete详解
Jun 08 #Javascript
jQuery+ajax实现局部刷新的两种方法
Jun 08 #jQuery
gulp解决跨域的配置文件问题
Jun 08 #Javascript
angular 用拦截器统一处理http请求和响应的方法
Jun 08 #Javascript
jQuery 添加样式属性的优先级别方法(推荐)
Jun 08 #jQuery
You might like
《斗罗大陆》六翼天使武魂最强,为什么老千家不是上三宗?
2020/03/02 国漫
人尽可用的Windows技巧小贴士之下篇
2007/03/22 PHP
Yii学习总结之安装配置
2015/02/22 PHP
一个简单安全的PHP验证码类、PHP验证码
2016/09/24 PHP
php安装dblib扩展,连接mssql的具体步骤
2017/03/02 PHP
php获取网站根目录物理路径的几种方法(推荐)
2017/03/04 PHP
jquery nth-child()选择器的简单应用
2010/07/10 Javascript
广泛收集的jQuery拖放插件集合
2012/04/09 Javascript
jquery仿QQ商城带左右按钮控制焦点图片切换滚动效果
2013/06/27 Javascript
点击按钮或链接不跳转只刷新页面的脚本整理
2013/10/22 Javascript
javascript实现输出指定行数正方形图案的方法
2015/08/03 Javascript
深入理解jquery中的each用法
2016/12/14 Javascript
ES6新特性之数组、Math和扩展操作符用法示例
2017/04/01 Javascript
微信小程序中使用javascript 回调函数
2017/05/11 Javascript
详解用函数式编程对JavaScript进行断舍离
2017/09/18 Javascript
Vue.js通用应用框架-Nuxt.js的上手教程
2017/12/25 Javascript
JS常见内存泄漏及解决方案解析
2020/05/30 Javascript
[02:38]DOTA2英雄基础教程 噬魂鬼
2014/01/03 DOTA
python实现查找excel里某一列重复数据并且剔除后打印的方法
2015/05/26 Python
Python的消息队列包SnakeMQ使用初探
2016/06/29 Python
Python的iOS自动化打包实例代码
2018/11/22 Python
由Python编写的MySQL管理工具代码实例
2019/04/09 Python
Python 图像处理: 生成二维高斯分布蒙版的实例
2019/07/04 Python
Python变量及数据类型用法原理汇总
2020/08/06 Python
python 发送get请求接口详解
2020/11/17 Python
Python 多进程、多线程效率对比
2020/11/19 Python
html5中嵌入视频自动播放的问题解决
2020/05/25 HTML / CSS
HTML5超文本标记语言的实现方法
2020/09/24 HTML / CSS
英国最大的正宗复古足球衫制造商和零售商:TOFFS
2018/06/21 全球购物
Monki官网:斯堪的纳维亚的独立时尚品牌
2020/11/09 全球购物
如何提高JDBC的性能
2013/04/30 面试题
幼儿园毕业典礼主持词
2014/03/21 职场文书
纪念九一八事变演讲稿1000字
2014/09/14 职场文书
销售员自我评价
2015/03/11 职场文书
2016年七夕情人节宣传语
2015/11/25 职场文书
python通过新建环境安装tfx的问题
2022/05/20 Python