未加星标

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

字体大小 | |
[前端(javascript) 所属分类 前端(javascript) | 发布者 店小二05 | 时间 | 作者 红领巾 ] 0人收藏点击收藏

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

let component = null// if 语句
if (true) {
component = (
<div></div>
);
} else {
component = (
<div></div>
);
}
var ul = (
<ul>
{component}
</ul>
);
// map 语句
var coms = limit.map(i => {
return {
<li>
{ul}
</li>
};
})
// 属性
<li onClick={() => console.log()}>
// 自定义指令
let directives = [{name: 'prod-img', value: params.row.skn, modifiers: {skn: true}} ];
return (
<div>
<img {...{directives}}></img> // 属性展开
</div>
);
// 自定义过滤器
不建议使用,直接当函数使用
foo(something)
// methods
this.foo()
// model
<i-input
value={params.row.factoryCode}
placeholder='请输入...'
onInput={val => (params.row.factoryCode = val)}
style={{width: '100%'}}>
</i-input>
// 自定义事件
return (
<Operator
category-id={this.categoryId} // prop绑定
product={params.row} // prop 绑定
onChange={this.onChangeStatus}> // event 绑定
</Operator>
);
//三元运算
<div>
<h1>{i == 1 ? 'True!' : 'False'}</h1>
</div
// 注释
<div>
<h1>菜鸟教程</h1>
{/*注释...*/}
</div>
// html
<div>{{_html: '<h1>Hello World!!</h1>'}}</div>
// h函数写法
return h('Input', {
props: {
value: params.row.buyingNums
},
on: {
input: val => {
params.row.buyingNums = val;
},
'on-blur': () => {
this.update(params);
}
}
});
// 所有的事件监听必须以on开头,然后字母大写
// template
<input @on-change='click'>
// jsx
<input onOn-change={() => this.click()}></input>

好了,下面看下vue.js 使用jsx语法的方法

1、创建一个测试的组件

export default {
name:'Test',
components:{
},
render(h){
return <div>
test
</div>
},
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语法的方法,希望对大家有所帮助!

本文前端(javascript)相关术语:javascript是什么意思 javascript下载 javascript权威指南 javascript基础教程 javascript 正则表达式 javascript设计模式 javascript高级程序设计 精通javascript javascript教程

分页:12
转载请注明
本文标题:vue jsx 使用指南及vue.js 使用jsx语法的方法
本站链接:http://www.codesec.net/view/568371.html
分享请点击:


1.凡CodeSecTeam转载的文章,均出自其它媒体或其他官网介绍,目的在于传递更多的信息,并不代表本站赞同其观点和其真实性负责;
2.转载的文章仅代表原创作者观点,与本站无关。其原创性以及文中陈述文字和内容未经本站证实,本站对该文以及其中全部或者部分内容、文字的真实性、完整性、及时性,不作出任何保证或承若;
3.如本站转载稿涉及版权等问题,请作者及时联系本站,我们会及时处理。
登录后可拥有收藏文章、关注作者等权限...
技术大类 技术大类 | 前端(javascript) | 评论(0) | 阅读(14)