vue 使用jsx的配置

810 阅读1分钟

在有些特定场景中需要使用jsx来精简代码,关于jsx的设置:

1.安装

npm install\

babel-plugin-syntax-jsx\

babel-plugin-transform-vue-jsx\

babel-helper-vue-jsx-merge-props\

babel-preset-es2015\

--save-dev

2.编辑.babelrc文件

{

"presets": ["es2015"],  //似乎可以不添加。

"plugins": ["transform-vue-jsx"]

}

JSX对大多数的Vue内建指令都不支持,唯一的例外是v-show,该指令可以使用v-show={value}的语法。大多数指令都可以用编程方式实现,比如v-if就是一个三元表达式,v-for就是一个array.map()等。

如果是自定义指令,可以使用v-name={value}语法,但是改语法不支持指令的参数arguments和修饰器modifier。有以下两个解决方法:

  • 将所有内容以一个对象传入,如:v-name={{ value, modifier: true }}

  • 使用原生的vnode指令数据格式 const directives = [ { name: 'my-dir', value: 123, modifiers: { abc: true } } ]

    return <div {...{ directives }}/>