如何在vue中使用jsx语法

目录
  • 为什么需要在vue中使用jsx
  • 在vue中如何使用jsx
  • template转jsx的语法转换

为什么需要在vue中使用jsx

几年前面试的时候,被问过这个问题,当时我一脸懵,这两个东西为啥要混用呢?

直到后来,我遇到了这种场景。

tab切换展示组件,大部分组件展示表格,除了2个tab需要展示不同,这个不同,怎么处理呢?

  • 当然可以直接改封装的tab组件,v-if条件渲染嘛
  • 那如果后面再有其他需求,tab组件继续写if么
  • 这个时候,组件就过于冗余啦
  • 那怎么让组件统一处理呢?当然可以用render函数来抽象组件啦
  • render函数写法有多恶心,想必大家都知道 => 不知道的看段简单的ul,li布局

    with(this){  // this 就是 vm
      return _c(
          'div',
          {
              attrs:{"id":"app"}
          },
          [
              _c(
                  'div',
                  [
                      _c(
                          'input',
                          {
                              directives:[
                                  {
                                      name:"model",
                                      rawName:"v-model",
                                      value:(title),
                                      expression:"title"
                                  }
                              ],
                              domProps:{
                                  "value":(title)
                              },
                              on:{
                                  "input":function($event){
                                      if($event.target.composing)return;
                                      title=$event.target.value
                                  }
                              }
                          }
                      ),
                      _v(" "),
                      (!title) ? _c(
                          'button',
                          {
                              on:{
                                  "click":add
                              }
                          },
                          [_v("submit")]
                      ): _e()
                  ]
              ),
              _v(" "), // 空字符串节点
              _c('div',
                  [
                      _c(
                          'ul',
                          _l((list),function(item){return _c('li',[_v(_s(item))])})
                      )
                  ]
              )
          ]
      )
    }
  • 这...日子没法过了
  • 于是我们就发现了jsx的好用,同样上述代码,可读性更高,更加精简

在vue中如何使用jsx

主要是依赖babel插件

  • 安装babel依赖,npm install babel-plugin-transform-vue-jsx babel-helper-vue-jsx-merge-props
  • 配置.babelrc文件

    "plugins": [
        [ "transform-vue-jsx" ]
    ]
  • 子组件是函数式组件
  // content.js
  export default {
    name: 'content',
    functional: true,
    props: {
      render: Function,
      column: {
        type: Object,
        default: null
      },
      params: {
        type: Object,
        default: () => {}
      }
    },
    render: (h, ctx) => {
      const params = ctx.props.params
      return ctx.props.render && ctx.props.render(h, params)
    }
  }
  • 父组件引入
<el-tabs
  v-model="activeName">
    <el-tab-pane
      v-for="item in tabList"
      :key="item.code"
      :label="item.label">
      <span v-if="item.render">
          <content
              :params="item.params"
              :render="item.render"
            ></content>
      </span>
    </el-tab-pane>
</el-tabs>
    <script>
        import Content from './content'
        components: {
           Content
        },
    </script>

template转jsx的语法转换

v-model,v-if,v-forv-html,v-text,vue中的指令

  • jsx语法是不会有对应的指令的,所以我们就要实现这些指令的功能,对于v-model
// 在vue中
<el-input
  v-model="searchParams.searchVal">
</el-input>

// 对应jsx语法
function _input (value) {
    this.searchParams.searchVal = value
},
item.render = (h, params) => {
    // 这里也可以从params传入参数
    return (
        <el-input
          value={this.searchParams.searchVal}
          onInput={_input}>
        </el-input>
    )
}
  • v-if其实就是判断语句,用&&或三元表达式
// 在vue中
<el-button v-if="show"></el-button>

// 对应jsx语法
item.render = (h, params) => {
    return (
        this.show && <el-button></el-button>
    )
}
  • v-for其实就是循环语句,用map
// 在vue中
<ul>
    <li v-for="item in list">{{item.label}}</li>
</ul>

// jsx语法
item.render = (h, params) => {
     return (
         <ul>
             {
                 list.map((item, index) => (
                       <li>{item.label}</li>
                 )
             }
         </ul>
     )
 }
  • v-html
item.render = (h, params) {
    return (
        <div> <div domPropsInnerHTML={htmlStr}></div> </div>
    )
}

vue中el-input组件上触发原生enter事件,@keyup.enter.native对应nativeOnKeyup

// 在vue中
<el-input
  @keyup.enter.native="onSearch"
></el-input>

// 在jsx中
item.render = (h, params) => {
     function _keyup (e) {
        if (e.keyCode === 13) {
          // 13为enter键的键盘码
          this.onSearch()
        }
     }
     return (
         <el-input
          nativeOnKeyup={e => _keyup(e)}>
        </el-input>
     )
 }

vue中的插槽,在jsx中用scopedSlots

// 在vue中
<el-table
    :data="tableData">
    <el-table-column
      v-for="column in columnData"
      :key="column.value"
      :prop="column.value"
      :label="column.value"
      sortable
      :sort-change="change">
      <template slot-scope="scope">
        <span>{{scope.row[column.value]}}</span>
      </template>
    </el-table-column>
 </el-table>

// 在jsx中
item.render = (h, params) => {
    return (
        <el-table
            data={tableData}>
            {
              columnData.map((column, index) => (
                <el-table-column
                  prop={column.value}
                  label={column.label}
                  sortable
                  onSort-change={(...args) => sortChange(...args)}
                  scopedSlots={{
                    default: (scope) => <span>{scope.row[column.value]}</span>
                  }}>
                </el-table-column>
              ))
            }
          </el-table>
    )
}

组件用-分隔的事件,在jsx中在第一段on后大写即可触发

比如el-tablesort-change,在jsx中是onSort-change,第一段在on后大写即可,见上个例子

到此这篇关于如何在vue中使用jsx语法的文章就介绍到这了,更多相关vue使用jsx语法内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们!

(0)

相关推荐

  • vue jsx 使用指南及vue.js 使用jsx语法的方法

    vue  jsx  语法与 react  jsx  还是有些不一样,在这里记录下. let component = null// if 语句 if (true) { component = ( <div></div> ); } else { component = ( <div></div> ); } var ul = ( <ul> {component} </ul> ); // map 语句 var coms = limit.map

  • 详解Vue如何支持JSX语法

    通常开发vue我们使用的是模板语法,其实还有和react相同的语法,那就是render函数,同样支持jsx语法. Vue 的模板实际是编译成了 render 函数. 1.传统的createElement方法 createElement( 'anchored-heading', { props: { level: 1 } }, [ createElement('span', 'Hello'), ' world!' ] ) 渲染成下面这样 <anchored-heading :level="1

  • 详解如何使用webpack在vue项目中写jsx语法

    本文介绍了如何使用webpack在vue项目中写jsx语法,分享给大家,具体如下: 我们知道Vue 2.0中对虚拟DOM的支持.我们可以通过JavaScript动态的创建元素,而不用在template中写HTML代码.虚拟DOM最终将被渲染为真正的DOM. data: { msg: 'Hello world' }, render (h) { return h( 'div', { attrs: { id: 'my-id' }, [ this.msg ] ); } 渲染后的内容为: <div id=

  • 在vue中使用jsx语法的使用方法

    什么是JSX? JSX就是Javascript和XML结合的一种格式.React发明了JSX,利用HTML语法来创建虚拟DOM.当遇到<,JSX就当HTML解析,遇到{就当JavaScript解析. 我为什么要在vue中用JSX? 想折腾一下呗,开玩笑.最开始是因为近期在学习react,在里面体验了一把jsx语法,发现也并没有别人说的很难受的感觉啊,于是就想尝试在vue中也试下,废话不多说,先来用代码来看下两者的区别吧. ps:vue中大部分场景是不需要用render函数的,还是用模板更简洁直观

  • vue组件jsx语法的具体使用

    如果使用render函数来写比较复杂的vue组件,对于可读性和可维护性都很不友好,而使用jsx就会让我们回到更接近于模板的语法.babel转译器会将jsx转译为render函数渲染. 配置 需要用到babel插件 安装 npm install\ babel-plugin-syntax-jsx\ babel-plugin-transform-vue-jsx\ babel-helper-vue-jsx-merge-props\ babel-preset-env\ --save-dev .babelr

  • Vue 3.0中jsx语法的使用

    Vue 3.0 正式发布了,喜大普奔

  • vue中正确使用jsx语法的姿势分享

    目录 前言 虚拟DOM 什么是虚拟DOM 虚拟DOM的优点 渲染函数是什么 jsx 在vue3中编写jsx的两种方式 用法 最后 参考 前言 又到了愉快的摸鱼时间,我觉得不能荒废,H5页面我一直用的vant,出于对源码的好奇,我从git上拉了一份vant源码,里面竟然都是jsx写的组件,于是我开始了对在vue中使用jsx的探索 虚拟DOM 什么是虚拟DOM 在这之前,先了解下虚拟DOM,vue和react框架都在内部使用了虚拟DOM,这样做的原因是通过js操作DOM的计算成本很高,虽然js更新速

  • 如何在vue中使用jsx语法

    目录 为什么需要在vue中使用jsx 在vue中如何使用jsx template转jsx的语法转换 为什么需要在vue中使用jsx 几年前面试的时候,被问过这个问题,当时我一脸懵,这两个东西为啥要混用呢? 直到后来,我遇到了这种场景. tab切换展示组件,大部分组件展示表格,除了2个tab需要展示不同,这个不同,怎么处理呢? 当然可以直接改封装的tab组件,v-if条件渲染嘛 那如果后面再有其他需求,tab组件继续写if么 这个时候,组件就过于冗余啦 那怎么让组件统一处理呢?当然可以用rende

  • 如何在 Vue 中使用 JSX

    JSX 是什么 JSX 是一种 Javascript 的语法扩展,JSX = Javascript + XML,即在 Javascript 里面写 XML,因为 JSX 的这个特性,所以他即具备了 Javascript 的灵活性,同时又兼具 html 的语义化和直观性 为什么要在 Vue 中使用 JSX 有时候,我们使用渲染函数(render function)来抽象组件,渲染函数不是很清楚的参见官方文档, 而渲染函数有时候写起来是非常痛苦的 createElement( 'anchored-h

  • 如何在vue中使用ts的示例代码

    本文介绍了如何在vue中使用ts的示例代码,分享给大家,具体如下: 注意:此文并不是把vue改为全部替换为ts,而是可以在原来的项目中植入ts文件,目前只是实践阶段,向ts转化过程中的过渡. ts有什么用? 类型检查.直接编译到原生js.引入新的语法糖 为什么用ts? TypeScript的设计目的应该是解决JavaScript的"痛点":弱类型和没有命名空间,导致很难模块化,不适合开发大型程序.另外它还提供了一些语法糖来帮助大家更方便地实践面向对象的编程. typescript不仅可

  • 在 Vue 中使用 JSX 及使用它的原因浅析

    本文 GitHub https://github.com/qq44924588... 上已经收录,更多往期高赞文章的分类,也整理了很多我的文档,和教程资料.欢迎Star和完善,大家面试可以参照考点复习,希望我们一起有点东西. Vue.js 具有简单的 API 和几个选项,可用于在我们的组件中定义HTML模板. 我们可以使用 <template> 标签选项,在根组件实例上定义 template 属性,或者使用单文件组件. 上面的选项很棒并且可以完美地工作,但是,在您的应用程序的生命周期中,有时会

  • 如何在Vue中使用protobuf

    protobuf是由google推出的和语言无关和平台无关,可扩展的序列化数据结构协议,类似于XML,但是比XML更小.更快.更简单.protobuf几乎支持当前的大部分语言,如JavaScript  安装protobufjs cnpm i -S protobufjs 注意:当前protobufjs的版本为:6.11.2 在项目src目录下新建proto目录,把后端给的test.proto文件放进去 syntax = "proto3";//第一行指定了正在使用proto3语法:如果你没

  • 详解如何在Vue中动态添加类名

    目录 静态和动态类 有条件的类名 使用数组语法 使用对象语法 与自定义组件一起使用 快速生成类名 使用计算属性来简化类 能够向组件添加动态类名是非常强大的功能.它使我们可以更轻松地编写自定义主题,根据组件的状态添加类,还可以编写依赖于样式的组件的不同变体. 添加动态类名与在组件中添加 prop :class="classname"一样简单.无论classname的计算结果是什么,都将是添加到组件中的类名. 当然,对于Vue中的动态类,我们可以做的还有很多.在本文中,我们将讨论很多内容:

  • 在vue中写jsx的几种方式

    目录 版本 render函数 jsx/tsx 使用jsx的几种方式 使用js对象注册component 使用.vue文件 vue2.7在.vue文件中结合compositionApi和jsx 版本 本文版本配置 vue: 2.7.2 vue-cli: ~4.5.18: 本文代码github仓库地址 render函数 render函数和vue中的template是互斥的,template最终是要编译成virtual Dom的,而render函数可以更直接构建virtual Dom: virtual

随机推荐