如何在iview组件中使用jsx

更新日期: 2019-03-09阅读: 3k标签: jsx
最近选用的框架iview表单组件的render写法让人有点不习惯,尤其是在写比较复杂的逻辑的时候,还是感觉模  板式的写法比较方便且可读性较强。而render函数除了支持配置写法外,还支持jsx的写法。由于之前有用过react,因此对jsx并不陌生,可以直接上手。


1、安装插件

安装插件:transform-vue-jsx
如果需要使用v-model还需要安装jsx-v-model
在babelrc中配置

"plugins": [["import", {
    "libraryName": "iview",
    "libraryDirectory": "src/components"}],
    "transform-vue-jsx", "transform-runtime"],
  "env": {
    "test": {
      "presets": ["env", "stage-2"],
      "plugins": ["transform-vue-jsx", "transform-es2015-modules-commonjs", "dynamic-import-node"]
    }
  }


2、使用及注意事项

下面粘贴的代码是Table组件的columns的配置项,这里需要注意的有2点:
1、需要全局注册组件,如输入框组件不可以写成Input必须写成i-input;
2、事件绑定:如点击事件需要携程onOn-click

{
    title: "关系名",
    key: "name",
    width: 180,
    render: (h, params) => {
      let { index, row } = params;
      return (
        <div>
          {this.editShow && this.editIndex === index ? (
            <span>
              <i-input
                placeholder="中文"
               
                value={this.editRow.cnName}
                onOn-blur={this.activeCellChange("cnName")}
              />
              <i-input
                placeholder="英文"
               
                value={this.editRow.name}
                onOn-blur={this.activeCellChange("name")}
              />
            </span>
          ) : (
            <span
             
              title={`${row.cnName}(${row.name})`}
            >{`${row.cnName}(${row.name})`}</span>
          )}
        </div>
      );
    }
  }


链接: https://www.fly63.com/article/detial/2291

vue2.0写组件使用jsx语法_webpack在vue项目中支持jsx

Vue 2.0中的render中使用JSX,由于Vue框架并没有特意地去支持JSX,Vue和JSX为什么能配合在一起使用呢? 很简单, 因为Vue支持虚拟DOM, 你可以用JSX或者其他预处理语言,只要能保证render方法正常工作即可。

jsx是什么?_JSX语法简介

JSX就是Javascript和XML结合的一种格式,利用HTML语法来创建虚拟DOM。将XML语法直接加入JS中,通过代码而非模板来高效的定义界面。之后JSX通过翻译器转换为纯JS再由浏览器执行。

JSX 这么6?

本文会先解释一下JSX的工作原理,再介绍一下如何用不寻常的方式来使用JSX。

react本质:JSX如何转化为javascript

react中基本都使用JSX来开发,但JSX其实是javascript的一种语法糖。语法糖就是提供了一种全新的方式书写代码,但是其实现原理与之前的写法相同。

React和JSX基础

脚手架工具:选用React官方推荐的脚手架工具create-react-app,安装npm install create-react-app -g。项目初始化步骤:

可替代的JSX

不仅仅是在React(或受JSX启发模板),对于在各种框架中进行模板化,JSX是如今一个非常受欢迎的选择。然而,如果你不喜欢使用JSX,或者你的项目想避免使用它,又或者只是受好奇心驱使

Vue中jsx的最简单用法

JSX就是Javascript和XML结合的一种格式。React发明了JSX,利用HTML语法来创建虚拟DOM。当遇到<,JSX就当HTML解析,遇到{就当JavaScript解析.

JSX在render函数中的应用

JSX 可以很好地描述 UI 应该呈现出它应有交互的本质形式。JSX 可能会使人联想到模版语言,但它具有 JavaScript 的全部功能。Babel 会把 JSX 转译成一个名为 React.createElement() 函数调用。

React中JSX和虚拟dom

这被称为 JSX,是一个 JavaScript 的语法扩展。建议在 React 中配合使用 JSX,JSX 可以生成 React “元素”,而且JSX 可以很好地描述 UI 应该呈现出它应有交互的本质形式。JSX 可能会使人联想到模版语言,但它具有 JavaScript 的全部功能。

如何在 Vue 中使用 JSX 以及使用它的原因

Vue.js 具有简单的 API 和几个选项,可用于在我们的组件中定义HTML模板。我们可以使用<template>标签选项,在根组件实例上定义template属性,或者使用单文件组件。上面的选项很棒并且可以完美地工作

点击更多...

内容以共享、参考、研究为目的,不存在任何商业目的。其版权属原作者所有,如有侵权或违规,请与小编联系!情况属实本人将予以删除!