vue jsx 使用指南及vue.js 使用jsx语法的方法
vue jsx 语法与react jsx 还是有些不一样，在这里记录下。
letcomponent=null//if语句
if(true){
component=(
);
}else{
component=(
);
}
varul=(
-
{component}
{i==1?'True!':'False'}
菜鸟教程
{/*注释...*/}{{_html:'
//h函数写法
returnh('Input',{
props:{
value:params.row.buyingNums
},
on:{
input:val=>{
params.row.buyingNums=val;
},
'on-blur':()=>{
this.update(params);
}
}
});
//所有的事件监听必须以on开头，然后字母大写
//template
HelloWorld!!
'}}好了，下面看下vue.js使用jsx语法的方法
1、创建一个测试的组件
exportdefault{
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格式的文件
总结
以上所述是小编给大家介绍的vuejsx使用指南及vue.js使用jsx语法的方法，希望对大家有所帮助！