文档章节

学Vue,就要学会vue JSX(二)

o
 osc_kurqu050
发布于 07/08 15:56
字数 1124
阅读 33
收藏 0

「深度学习福利」大神带你进阶工程师,立即查看>>>

学习JSX,先了解一下createElement

提到JSX,不可避免的就要提到createElement,当你看完本节,你会发现,奇怪的知识又增多了。ok,我们接着上一部分继续讲。这一次的准备工作是了解createElement。

Vue编译后的代码看createElement

你是否看过写的Vue代码经过编译之后的样子,比如下面这段代码

<template>
   <div>我喜欢<span class="emphasize">前端</span></div>
 </template>

小编对这段代码进行编译之后,得到下面这段代码

function () {
   var e = this,
   // e._self._c 对应源码里面的createElement
   t = e._self._c;
   // 返回了一个 createElement('div',[])
   return t("div", [
     // e._v 对应源码里面的createTextVNode
     e._v("my"),
     t("span", { staticClass: "emphasize" }, [e._v("前端")]),
   ]);
 }

 

通过对上面的代码进行分析,不难发现,Vue模板中的每一个元素编译之后都会对应一个createElement,那么这个createElement到底是什么,嗯,这个你面试的时候也许已经提到过了。

那么什么是createElement

无论是Vue还是React,都存在createElement,而且作用基本一致。可能你对createElement不是很了解,函数名翻译过来就是增加一个元素,但他的返回值你一定知道。createElement函数返回的值称之为虚拟节点,即VNode,而由VNode扎堆组成的树便是大名鼎鼎,面试必问的虚拟DOM

createElement函数的参数,在这里小编偷个懒抄一下Vue官方文档

// @returns {VNode}
 createElement(
   // {String | Object | Function}
   // 一个 HTML 标签名、组件选项对象,或者
   // resolve 了上述任何一种的一个 async 函数。必填项。
   'div',
 ​
   // {Object}
   // 一个与模板中 attribute 对应的数据对象。可选。
   {
     // (详情见下一节)
   },
 ​
   // {String | Array}
   // 子级虚拟节点 (VNodes),由 `createElement()` 构建而成,
   // 也可以使用字符串来生成“文本虚拟节点”。可选。
   [
     '先写一些文字',
     createElement('h1', '一则头条'),
     createElement(MyComponent, {
       props: {
         someProp: 'foobar'
       }
     })
   ]
 )

 

从上面可以看出createElement一共有三个参数,三个参数分别是

  • 第一个参数是需要渲染的组件,可以是组件的标签,比如div;或者是一个组件对象,也就是你天天写的export default {};亦或者可以是一个异步函数。

  • 第二个参数是这个组件的属性,是一个对象,如果组件没有参数,可以传null(关于组件的属性,下文将依次介绍)

  • 第三个参数是这个组件的子组件,可以是一个字符串(textContent)或者一个由VNodes组成的数组

createElement写一个组件吧

表单示例

假设我们需要开发一个下面这样的表格(element-ui的)

img

用模板代码去开发

如果我们用模板代码去开发这个表单,那么代码大概就长这样

<el-form :inline="true" :model="formInline" class="demo-form-inline">
   <el-form-item label="审批人">
     <el-input v-model="formInline.user" placeholder="审批人"></el-input>
   </el-form-item>
   <el-form-item label="活动区域">
     <el-select v-model="formInline.region" placeholder="活动区域">
       <el-option label="区域一" value="shanghai"></el-option>
       <el-option label="区域二" value="beijing"></el-option>
     </el-select>
   </el-form-item>
   <el-form-item>
     <el-button type="primary" @click="onSubmit">查询</el-button>
   </el-form-item>
 </el-form>

 

createElement去实现

如果我们直接将上面的代码转换为用createElement去实现,那么代码将会是这样的

export default {
  methods: {
     $_handleChangeUser(value) {
       this.formInline.user = value
     }
   },
   render(createElement) {
     return createElement(
       'ElForm',
       {
         props: {
           inline: true,
           model: this.formInline
         },
         staticClass: 'demo-form-inline'
       },
       [
         createElement(
           'ElFormItem',
           {
             props: {
               label: '审批人'
             }
           },
           [
             createElement('ElInput', {
               props: {
                 value: this.formInline.user
               },
               attrs: {
                 placeholder: '审批人'
               },
               on: {
                 input: this.$_handleChangeUser
               }
             })
           ]
         ),
         createElement(
           'ElFormItem',
           {
             props: {
               label: '活动区域'
             }
           },
           [
             createElement(
               'ElSelect',
               {
                 props: {
                   value: this.formInline.region,
                   placeholder: '活动区域'
                 }
               },
               [
                 createElement('ElOption', {
                   props: {
                     label: '区域一',
                     value: 'shanghai'
                   }
                 }),
                 createElement('ElOption', {
                   props: {
                     label: '区域二',
                     value: 'beijing'
                   }
                 })
               ]
             )
           ]
         ),
         createElement('ElFormItem', null, [
           createElement(
             'ElButton',
             {
               props: {
                 type: 'primary'
               },
               on: {
                 click: this.$_handleSubmit
               }
             },
             '查询'
           )
         ])
       ]
     )
   }
 }

 

看到上面的代码,你可能会惊呼,代码好多啊,好痛苦,想当年发明JSX的人刚开始天天也是写createElement,写的直掉头发,太痛苦了,然后就使劲挠头,当额头锃光发亮的时候,终于想到了一种新的语法,就是JSX。从此之后,头发呼呼的又长回来了。

看到上面代码,你会发现有一个render函数,这个函数叫做渲染函数,相当于通过createElementJSX去实现功能的主入口方法。而且你熟悉的v-model也没见了,而是用value + input代替了。

ok,这一部分先写到这里,下一篇文章写下一部分:是时候使用JSX代替createElement了。喜欢的朋友可以继续看哦,我更新非常快哦。也会一直出优秀的文章给大家分享。

 

o
粉丝 0
博文 72
码字总数 0
作品 0
私信 提问
加载中
请先登录后再评论。
财付通打印票据和拖动银行卡效果

实现财付通 App 打印票据和拖动银行卡效果。 作者注:纯属为了学习,去山寨腾讯的功能。觉得财付通的充值成功打印票据和拖动银行卡支付的效果不错。学着仿做。。。由于懂的代码不是很多,希望...

匿名
2012/11/11
1.3K
0
【分享】Cocos2dx工具之Cocostudio界面编辑器二

(作者:forward)在《【Cocos2dx工具——Cocostudio界面编辑器】一》博客结束的时候,Forward提出两个问题——1、有了编辑好的UI界面之后,我们如何把它们加载到程序中去呢?2、如何使对应的...

桑莱特
2013/06/05
4.2K
3
日志分析(二)jvm agent+kafka+es +kibana 的OLAP日志分析系统

jvm agent+kafka+es +kibana 一般web业务的场景都包含了分布式,web事务的多应用间跳转,各层次间实现负载均衡等。日志分析OLAP的技术要求就需要跟踪夸web应用的多层次、多应用的链式请求,针...

venuser
2015/12/14
965
4
JCF框架源码分析系列-ArrayList(二)

1、揭开ArrayList真面目 作者将在本文详细赘述日常开发中最常用集合类-ArrayList,本次JCF源码分析基于JDK1.7,主要从以下几个方向分析: UML类图关系 数据结构 接口介绍 常用、重要方法的实...

Ambitor
2015/11/30
385
0
MyBatis学习手记(二)MyBatis缓存机制

MyBatis学习手记二 前:MyBatis官方学习(中文)文档 http://mybatis.github.io/mybatis-3/zh/index.html 一,首先,要使用MyBatis必须使用官方提供的MyBatis的JAR包 链接:https://github.com...

xiaolei123
2015/09/15
2K
4

没有更多内容

加载失败,请刷新页面

加载更多

处理“ java.lang.OutOfMemoryError:PermGen空间”错误

问题: Recently I ran into this error in my web application: 最近,我在Web应用程序中遇到此错误: java.lang.OutOfMemoryError: PermGen space java.lang.OutOfMemoryError:PermGen空间......

技术盛宴
51分钟前
7
0
从JS数组中删除重复的值[duplicate] - Remove duplicate values from JS array [duplicate]

问题: This question already has answers here : 这个问题已经在这里有了答案 : Get all unique values in a JavaScript array (remove duplicates) (79 answers) 获取JavaScript数组中的......

法国红酒甜
今天
11
0
如何使用AngularJS在浏览器的控制台中访问$ scope变量?

问题: I would like to access my $scope variable in Chrome's JavaScript console. 我想在Chrome的JavaScript控制台中访问$scope变量。 How do I do that? 我怎么做? I can neither see ......

fyin1314
今天
18
0
ImageMagick - 添加水印

背景 最近制作思维导图想添加自己的水印,网上很多例子都是使用ImageMagick来完成。但是不少代码在本地并不可行。经过一番试验,找到两个方法。 方法一 代码 stackoverflow方法改良: conver...

wffger
今天
11
0
OSChina 周四乱弹 —— 到底是怎样的饕餮盛宴在等待着我!

Osc乱弹歌单(2020)请戳(这里) 【今日歌曲】 小小编辑推荐 :《你 能 來 保 護 我 的 世 界 嘛》- 歪门 《你 能 來 保 護 我 的 世 界 嘛》- 歪门 手机党少年们想听歌,请使劲儿戳(这里)...

小小编辑
今天
79
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部