vue jsx 使用指南及vue.js 使用jsx語(yǔ)法的方法
vue jsx 語(yǔ)法與 react jsx 還是有些不一樣,在這里記錄下。
let component = null// if 語(yǔ)句
if (true) {
component = (
<div></div>
);
} else {
component = (
<div></div>
);
}
var ul = (
<ul>
{component}
</ul>
);
// map 語(yǔ)句
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> // 屬性展開(kāi)
</div>
);
// 自定義過(guò)濾器
不建議使用,直接當(dāng)函數(shù)使用
foo(something)
// methods
this.foo()
// model
<i-input
value={params.row.factoryCode}
placeholder='請(qǐng)輸入...'
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>
);
//三元運(yùn)算
<div>
<h1>{i == 1 ? 'True!' : 'False'}</h1>
</div
// 注釋
<div>
<h1>菜鳥(niǎo)教程</h1>
{/*注釋...*/}
</div>
// html
<div>{{_html: '<h1>Hello World!!</h1>'}}</div>
// h函數(shù)寫法
return h('Input', {
props: {
value: params.row.buyingNums
},
on: {
input: val => {
params.row.buyingNums = val;
},
'on-blur': () => {
this.update(params);
}
}
});
// 所有的事件監(jiān)聽(tīng)必須以on開(kāi)頭,然后字母大寫
// template
<input @on-change='click'>
// jsx
<input onOn-change={() => this.click()}></input>
好了,下面看下vue.js 使用jsx語(yǔ)法的方法
1、創(chuàng)建一個(gè)測(cè)試的組件
export default {
name:'Test',
components:{
},
render(h){
return <div>
test
</div>
},
data () {
return {
}
}
}
2、把編輯器js語(yǔ)言的版本設(shè)置成jsx,這樣編輯器 可以正確識(shí)別jsx語(yǔ)法
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格式的文件
總結(jié)
以上所述是小編給大家介紹的vue jsx 使用指南及vue.js 使用jsx語(yǔ)法的方法,希望對(duì)大家有所幫助!
相關(guān)文章
vue+element-ui:使用el-dialog時(shí)彈框不出現(xiàn)的解決
這篇文章主要介紹了vue+element-ui:使用el-dialog時(shí)彈框不出現(xiàn)的解決方案,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2023-10-10
Vue實(shí)現(xiàn)購(gòu)物車實(shí)例代碼兩則
這篇文章主要介紹了Vue實(shí)現(xiàn)購(gòu)物車實(shí)例代碼,需要的朋友可以參考下2020-05-05
Vue.js處理API請(qǐng)求失敗的最佳實(shí)踐和策略
在現(xiàn)代Web開(kāi)發(fā)中,與后端API的交互是不可避免的,然而,網(wǎng)絡(luò)請(qǐng)求是不穩(wěn)定的,可能會(huì)因?yàn)楦鞣N原因失敗,因此,優(yōu)雅地處理API請(qǐng)求失敗的情況是提升用戶體驗(yàn)和應(yīng)用穩(wěn)定性的關(guān)鍵,本文將詳細(xì)介紹在Vue.js中處理API請(qǐng)求失敗的最佳實(shí)踐和策略,需要的朋友可以參考下2024-12-12
vue使用Echarts設(shè)置數(shù)據(jù)無(wú)效問(wèn)題記錄及解決方法
這篇文章主要介紹了vue使用Echarts設(shè)置數(shù)據(jù)無(wú)效問(wèn)題記錄,本文通過(guò)場(chǎng)景分析給大家分享解決方法,需要的朋友可以參考下2022-08-08
vue+iview tabs context-menu 彈出框修改樣式的方法
今天遇到一個(gè)需求說(shuō)頁(yè)面頂部的菜單右鍵彈出框離得有點(diǎn)遠(yuǎn),需要我們做調(diào)整,下面小編給大家分享下vue+iview tabs context-menu 彈出框修改樣式的方法,感興趣的朋友跟隨小編一起看看吧2024-06-06

