精华内容
下载资源
问答
  • 主要介绍了vue jsx 使用指南及vue.js 使用jsx语法的方法,非常不错,具有参考借鉴价值,需要的朋友可以参考下
  • 可配置的Babel预设添加了Vue JSX支持。 请参阅的。 兼容性 此仓库仅与以下产品兼容: Babel 7+ 。 要获得Babel 6支持,请使用 Vue 2+ 。 较旧的版本不支持JSX。 对于Vue 3的支持,有一个实验性插件可以用作 。 ...
  • vue jsx 使用指南

    2017-06-09 18:21:00
    vue jsx 使用指南 vue jsx 语法与 react jsx 还是有些不一样,在这里记录下。 let component = null // if 语句 if (true) { component = ( <div></div> ); } else { component = ( <div>&...

    vue 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(i => {
      return {
        <li>
          {ul}
        </li>
      };
    })
    
    // 属性
    <li onClick={() => console.log()}>
    
    // 自定义指令
    let directives = [{name: 'prod-img', value: params.row.skn, modifiers: {skn: true}} ];
    
    return (
        <div>
            <img {...{directives}}></img>  // 属性展开
        </div>
    );
    
    // 自定义过滤器
    不建议使用,直接当函数使用
    foo(something)
    
    // methods
    this.foo()
    
    // model
    <i-input
      value={params.row.factoryCode}
      placeholder='请输入...'
      onInput={val => (params.row.factoryCode = val)}
      style={{width: '100%'}}>
    </i-input>
    
    // 自定义事件
     return (
        <Operator
          category-id={this.categoryId} // prop绑定
          product={params.row} // prop 绑定
          on-change={this.onChangeStatus}> // event 绑定
        </Operator> 
    );
    
    
    //三元运算 
    <div>
      <h1>{i == 1 ? 'True!' : 'False'}</h1>
    </div
    
    // 注释
    <div>
        <h1>菜鸟教程</h1>
        {/*注释...*/}
    </div>
    
    // html
    <div>{{_html: '<h1>Hello World!!</h1>'}}</div>
    
    // h函数写法
    return h('Input', {
        props: {
            value: params.row.buyingNums
        },
        on: {
            input: val => {
                params.row.buyingNums = val;
            },
            'on-blur': () => {
                this.update(params);
            }
        }
    });
    
    // 所有的事件监听必须以on开头
    
    // template
    <input @on-change='click'>
    
    // jsx
    <input onOn-change={() => this.click()}></input>
    <input on-on-change={() => this.click()}></input>
    <input on-on-change={(val) => this.click(val)}></input>
    <input on-on-change={ this.click}></input>
    
    

    转载于:https://www.cnblogs.com/htoooth/p/6973238.html

    展开全文
  • <div><p>Is it possible to use Vue JSX inside a jsfiddle or codepen demo? I am trying to use it in codepen. I have the babel preprocessor selected and a cdn to the latest beta of Vue 2.0. But it doesn&...
  • Configurable Babel preset to add Vue JSX support. See the configuration options here. Compatibility This repo is only compatible with: Babel 7+. For Babel 6 support, use vuejs/babel-plugin-...
  • 近来看到一篇好文章,详细介绍了vue jsx 与render配合使用,在此以做转载,查看地址 侵权立删

    近来看到一篇好文章,详细介绍了vue jsx 与render配合使用,在此以做转载,查看地址

    侵权立删

    展开全文
  • use tag tempalte in vue jsx

    2020-11-29 11:41:10
    <div><p>is there a way to use template tag in jsx? https://vuejs.org/v2/guide/components-slots.html#Named-Slots</p><p>该提问来源于开源项目:vuejs/babel-plugin-transform-vue-jsx</p></div>
  • vue jsx写法记录

    2019-10-05 15:11:01
    目录 v-model的写法 v-for 事件 & 按键修饰符 data写法 slot写法 ...由于vue的createElement跟react的createElement有区别,导致jsx的写法也有区别.本文将记录一些vue中比较特殊的...

    由于vue的createElement跟react的createElement有区别,导致jsx的写法也有区别.本文将记录一些vue中比较特殊的jsx的写法.可以参考官方说明

    v-model的写法

    官网中v-model写法不可行,需要为:

     <el-input v-model="inputValue"/> 
     //   
     <el-input vModel_trim={inputValue}/>
       //或者使用
       <el-input 
        value={this.inputValue} 
        on-input={val => this.inputValue = val}/>

    v-for

        <el-tag
            v-for="(item, index) in content"
            :key="index"
            type="success"
        >
        {{item.name}}
        </el-tag>
        
        // 
        
        {
            this.content.map((item, index) => {
                return (
                    <el-tag
                        key={index}
                        type="success"
                    >
                    {item.name}
                    </el-tag>
                )
            })
        }

    事件 & 按键修饰符

    官方的写法

    <input vOn:click_stop_prevent="newTodoText" />

    一些编辑会提示语法错误,
    推荐可以使用下面的写法

        <el-input
                @keyup.native.enter="fetch()"
                @click="click()"
                class="width-20"
                prefix-icon="el-icon-search"
                placeholder="关键字搜索"
              />
    
        // 或者为:  
        <el-input
                class="width-20"
                nativeOn-keyup={arg => arg.keyCode === 13 && this.fetch()}
                on-click={_ => {this.click()} }
                prefix-icon="el-icon-search"
                placeholder="关键字搜索"
              />

    需要注意的是,不要使用on-click={this.click() }这样写,会报错.解决方案是:
    on-click={this.click.bind(this, args) },不过建议的写法是on-click={() => {this.click(args)} },就不需要写bind(this)了.

    data写法

    jsx其实是createElement的语法糖.jsx语法最终会转为createElement函数.当在jsx的标签中使用{ ...obj }时,obj将会编译为createElement的中间参数.

    需要注意的是,vue的createElement跟react的createElement函数中间的参数是的意义是一样的.在vue中,中间的参数是data对象
    ,而react中,中间参数是props.

    所以如果vue中需要向react中一样设置动态属性时,需要:

    const props={
        name: 'joyer',
    },
    // react中
    <my-button {...props}></my-button>
    // vue中
    <my-button {...{
        props: props,
    }}></my-button>

    当你不知道一个在template中的属性怎么在jsx中使用时,可以先转换为createElementdata对象写法,然后使用{...data}写在jsx标签上.

    如高级组件中使用了v-on="$listeners"或者v-bind="$attrs"代理时,在官网并没有说明.官网有对v-on="$listeners"v-bind="$attrs"的说明,当使用createElement函数创建时,在第二个参数中可以这样写:

    return createElement('div', {
        props: {
            ...$attrs,
            otherProp: value,
        },
        on: {
            ...$listeners,
            click() {
            },
        }
    },this.$slots.default])

    在jsx中,也可以使用data,语法为{...data}:

    // 官网推荐写法
    <button domPropsType="submit"><button>
    // data方式写法
    <button { ...{
      domProps: {
        type: 'submit',
      }, 
    }}><button>

    所以当你不知道jsx中元素上面的属性怎么写时,可以全部写入一个data对象中,然后用...data放在元素上.

    const data = {
      domProps: {
        type: 'submit',
      }, 
      scopedSlots: {
        default: props => createElement('span', props.text)
      },
        props: {
            ...$attrs,
            otherProp: value,
        },
        on: {
            ...$listeners,
            click() {
            },
        }
    }
    <button { ...data }><button>

    这样就解决了v-on="$listeners"或者v-bind="$attrs".

    需要注意的是,如果使用{...data}的高级组件的中,在{...data}所在标签的组件也是一个使用v-bind="$attrs"或者{...data}的组件,还需要在当前组件中设置attrs:
    cd-table-column-id的源码:

    <cd-table-column { ...{
            props: this.$attrs,
            attrs: this.$attrs,
            on: this.$listeners,
            scopedSlots,
          } } bold>
    </cd-table-column>

    cd-table-column的源码:

    <el-table-column { ...{
        props: columnAttrs,
        on: columnListeners,
        scopedSlots,
        } }>
    </el-table-column>

    这是因为cd-table-column里面也是使用了{...data}写法,其组件的props为空,所以设置props是无效的,需要添加一个attrs,通过attrs继承机制将cd-table-column-idthis.$attrs传递给cd-table-columnthis.$attrs.

    slot写法

    默认

        <button>
            <slot></slot>
          </button>
         //
          <button>
            {this.$scopedSlots.default()}
          </button>

    具名slot:

        <button>
            <slot name="before"></slot>
            <slot ></slot>
          </button>
    // 
    let before = '';
        if (this.$scopedSlots.before) {
          before = this.$scopedSlots.before(props => props.text);
        }
        return (
          <button>
            { before }
            {this.$scopedSlots.default()}
          </button>

    作用域slot:

        <slot :isAdvancedPanelShow="isAdvancedPanelShow"></slot>
        
        // 
        
        {this.$scopedSlots.default({
           isAdvancedPanelShow: this.isAdvancedPanelShow
        })}

    转载于:https://www.cnblogs.com/joyer-li/p/11510791.html

    展开全文
  • WebStorm VUE jsx 报错

    2020-11-28 15:45:19
    在 script 标签上添加 type <script type="text/jsx">

    在 script 标签上添加 type

    <script type="text/jsx">

    展开全文
  • vue jsx 的基本原则

    2020-08-04 13:22:08
    jsX就是JavaScript和XML结合的一种格式。react发明了jsX,利用html语法来创建虚拟DOM。当遇到<,jsX就当html解析,遇到{就当JavaScript解析.
  • 学习JSX,先了解一下createElement 提到JSX,不可避免的就要提到createElement,当你看完本节,你会发现,奇怪的知识又增多了。ok,我们接着上一部分继续讲。这一次的准备工作是了解createElement。 从Vue编译后的代码...
  • 最近在做一个项目,然后里面也用到了jsx。因为其实有一些功能也需要更加灵活的去处理。 介绍一下JSX JSX 简介 JSX是一种Javascript的语法扩展,JSX = Javascript + XML,即在Javascript里面写XML,因为JSX的这个特性...
  • Vue Jsx Render开发规范

    2020-08-07 13:50:09
    Vue开发规范 1. Vue render页面格式 import xx from "../xxx"; export default { name: "xxx", //名称 inject: ["xxx"],//注入 mixins: [xxx], //混入 props: { //接入参数 propsXx: { type: [Object...], ...
  • Vue jsx 动态绑定 class

    2021-06-06 21:19:01
    使用三目运算符替代 <transition name='el-fade-in-linear' appear={true}> <span class='e-filter-btn'> <i class={[ 'e-filter-tag', _this.filterLoads.some((fl) =>... "el-icon-loading" : ...
  • 是时候使用JSX代替createElement了 接着上面的讲,当我们看到上面用createElement去实现组件,太麻烦了,别说工作效率提高了,就是那些嵌套可以嵌套正确就很赞了,所以我们需要用JSX去简化整个逻辑。当年我做项目的...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 2,434
精华内容 973
关键字:

vuejsx

vue 订阅