在有些特定场景中需要使用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 }}/>