vue jsx 语法与 react jsx 还是有些不一样，在这里记录下。
let component = null// if 语句
if (true) {
component = (
);
} else {
component = (
);
}
var ul = (
{component}
);
// map 语句
var coms = limit.map(i => {
return {
{ul}
};
})
// 属性
console.log()}>// 自定义指令
let directives = [{name: 'prod-img', value: params.row.skn, modifiers: {skn: true}} ];
return (
// 属性展开
);
// 自定义过滤器
不建议使用，直接当函数使用
foo(something)
// methods
this.foo()
// model
value={params.row.factoryCode}
placeholder='请输入...'
onInput={val => (params.row.factoryCode = val)}
style={{width: '100%'}}>
// 自定义事件
return (
category-id={this.categoryId} // prop绑定
product={params.row} // prop 绑定
onChange={this.onChangeStatus}> // event 绑定
);
//三元运算
{i == 1 ? 'True!' : 'False'}
// 注释
菜鸟教程
{/*注释...*/}
// html
Hello World!!
'}}// h函数写法
return h('Input', {
props: {
value: params.row.buyingNums
},
on: {
input: val => {
params.row.buyingNums = val;
},
'on-blur': () => {
this.update(params);
}
}
});
// 所有的事件监听必须以on开头，然后字母大写
// template
// jsx
this.click()}>
好了，下面看下vue.js 使用jsx语法的方法
1、创建一个测试的组件
export default {
name:'Test',
components:{
},
render(h){
return
test
},
data () {
return {
}
}
}
2、把编辑器js语言的版本设置成jsx，这样编辑器 可以正确识别jsx语法
3、安装npm依赖
babel-plugin-syntax-jsx\
babel-plugin-transform-vue-jsx\
babel-helper-vue-jsx-merge-props\
4、修改 .babelrc
{ "presets": ["es2015"], "plugins": ["transform-vue-jsx"]
}
我是下载的vux的模板，修改之后顺利打包jsx格式的文件
总结
以上所述是小编给大家介绍的vue jsx 使用指南及vue.js 使用jsx语法的方法，希望对大家有所帮助！