vue jsx 使用指南及vue.js 使用jsx语法的方法

发布时间：2020-12-17 02:43:27 所属栏目：百科来源：网络整理

导读：vue jsx 语法与 react jsx 还是有些不一样，在这里记录下。 );} else { component = ( );}var ul = ( {component} );// map 语句var coms = limit.map(i => { return { {ul} };})// 属性 console.log()}>// 自定义指令let directives = [{name: 'prod-img',v

vue jsx 语法与 react jsx 还是有些不一样，在这里记录下。

); } 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 (params.row.factoryCode = val)} style={{width: '100%'}}> // 自定义事件 return ( // event 绑定 ); //三元运算

{i == 1 ? 'True!' : 'False'}

菜鸟教程

{/*注释...*/} // html

{{_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、创建一个测试的组件

},render(h){
return

test

},data () {
return {

}
}
}

2、把编辑器js语言的版本设置成jsx，这样编辑器可以正确识别jsx语法

3、安装npm依赖

4、修改 .babelrc

我是下载的vux的模板，修改之后顺利打包jsx格式的文件

总结

以上所述是小编给大家介绍的vue jsx 使用指南及vue.js 使用jsx语法的方法，希望对大家有所帮助！

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!