Vuejs2.0学习之二(Render函数,createElement,vm.$slots,函数化组件,模板编译,JSX)

发布时间:2017-7-9 7:22:10编辑:www.fx114.net 分享查询网我要评论
本篇文章主要介绍了"Vuejs2.0学习之二(Render函数,createElement,vm.$slots,函数化组件,模板编译,JSX) ",主要涉及到Vuejs2.0学习之二(Render函数,createElement,vm.$slots,函数化组件,模板编译,JSX) 方面的内容,对于Vuejs2.0学习之二(Render函数,createElement,vm.$slots,函数化组件,模板编译,JSX) 感兴趣的同学可以参考一下。

时隔一周多,因为一些别的事情绊住了,下面接着写。中间这段时间也有看官方文档,发现正如他所说90%的基础内容都一样,所以这里直接跳到我比较关注的东东上,要是想看看哪些不一样,可以参考这个http://vuefe.cn/guide/migration.html,表明了基础内容上发生了哪些变化。

直接来到进阶部分,过渡动画的过了一遍,大概讲述在dom发生变化时可以伴随的动画效果。不看了,后面用到再来看,更关注业务内容如何变化。

  1. Render函数 
    所以直接来到Render,本来也想跳过,发现后面的路由貌似跟它还有点关联。先来看看Render 
    1.1 官网一开始就看的挺懵的,不知道讲的是啥,动手试了一下,一开头讲的是Render的用法,官网的栗子永远都是一个特点,tm的不贴完整,我这里是个相对完整版的:(为了看的清楚点,替换了下名字)
<div id="div1"><child :level="2">Hello world!</child></div><script type="text/x-template" id="template">  <div>    <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>  </div></script><script type="text/javascript">    Vue.component('child', {  template: '#template',  props: {    level: {      type: Number,      required: true    }  }})    new Vue({    el:"#div1"})</script>
  • 回顾一下前面所学,这里注册了一个名叫child的全局组件,其模板是id=template的模板,往上一看发现,这个写法跟以前不一样啊,以前用的是<template>标签,小伙伴们还有印象不?为此查了下api,也就是说这是新版写法。模板里有做了判断,根据level的值来选择head的尺寸h1-h6,同时使用slot分发内容(不记得的童鞋可以看看我前面的文章)。level在哪里?回头看组件里的props,这东东还有印象不,父组件传递参数给子组件可以用它,同时还做了props验证,level必须是Number类型,这个前面我们也聊过的。

最后实例化Vue,在id=div1的块中使用Vue,这样div1就可以使用child模板:

<div id="div1"><child :level="2">Hello world!</child></div>
  • 此时,父组件div1可以使用子模板child,同时父模板可以使用level属性,采用bind的方式可以传递数值2,不用:去bind的后果就是传递字符串”2”,这个也聊过了。hello world作为slot分发的内容。所以最后整个内容会显而易见的被渲染为:。。。不写了,自己研究。

突然发现我们的案例越来越复杂了,还好前面有做准备。但是这一切跟Render好像没有半毛钱关系啊,确实没有关系- -!官方举了这个栗子就是说明这种写法是繁杂浪费的,浪费的原因是,虽然最后只剩下h2,但是其他的h1,h3-h5其实都被渲染了,只不过没有显示而已。为了优化,所以才引用了Render。

1.2 将上面代码改写为Render方式

//html<div id="div1"><child :level="3">Hello world!</child></div>//script<script type="text/javascript">    Vue.component('child', {  render: function (createElement) {    return createElement(      'h' + this.level,   // tag name 标签名称      this.$slots.default // 子组件中的阵列    )  },  props: {    level: {      type: Number,      required: true    }  }})    new Vue({    el:"#div1"})</script>

没了?是的,没了。不信你试一下,效果是一样的,绑定1的话渲染出h1,绑定2渲染h2。我去,很6啊,模板都不要就搞定了。怎么做到的?看createElement是个啥东东先,所以就开始createElement。所以,大家们发现了没,这官网的逻辑就是非主流啊,无意中被我发现了要理解他的逻辑必须向我这样边试边看才行,哇咔咔。不过我们顾名思义一下,createElement看名字像动态创建dom节点(节点vue里面也叫VNode)的过程,在看内容,’h’+this.level根据level创建标签h1-h6,所以它只会渲染一个标签,而不是所有都渲染,所以优化了,而且代码也省了不少呢。

1.3 createElement有点印象,js添加dom节点可以用它,document.createElement(tag)。这里的createElement(tag,{},[])或者createElement(tag,{},String)类似,不过接收的参数不一样,后面两个参数都是可选的

// @returns {VNode}createElement(  // {String | Object | Function}  // 一个 HTML 标签,组件设置,或一个函数  // 必须 Return 上述其中一个  'div',  // {Object}  // 一个对应属性的数据对象  // 您可以在 template 中使用.可选项.  {    // (下一章,将详细说明相关细节)  },  // {String | Array}  // 子节点(VNodes). 可选项.  [    createElement('h1', 'hello world'),    createElement(MyComponent, {      props: {        someProp: 'foo'      }


上一篇:智能指针
下一篇:Shiro学习(3)授权

相关文章

相关评论

本站评论功能暂时取消,后续此功能例行通知。

一、不得利用本站危害国家安全、泄露国家秘密,不得侵犯国家社会集体的和公民的合法权益,不得利用本站制作、复制和传播不法有害信息!

二、互相尊重,对自己的言论和行为负责。

好贷网好贷款