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ù)寫(xiě)法 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)頭,然后字母大寫(xiě) // 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)文章
vue2.0移動(dòng)端滑動(dòng)事件vue-touch的實(shí)例代碼
這篇文章主要介紹了vue2.0移動(dòng)端滑動(dòng)事件vue-touch的實(shí)例代碼,需要的朋友可以參考下2018-11-11使用vue實(shí)現(xiàn)一個(gè)電子簽名組件的示例代碼
這篇文章主要介紹了使用vue實(shí)現(xiàn)一個(gè)電子簽名組件的示例代碼,文中通過(guò)示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2020-01-01Vue-Cli項(xiàng)目?jī)?yōu)化操作的實(shí)現(xiàn)
這篇文章主要介紹了Vue-Cli項(xiàng)目?jī)?yōu)化操作,文中通過(guò)示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2019-10-10vue實(shí)現(xiàn)導(dǎo)航標(biāo)題欄隨頁(yè)面滾動(dòng)漸隱漸顯效果
這篇文章主要介紹了vue實(shí)現(xiàn)導(dǎo)航標(biāo)題欄隨頁(yè)面滾動(dòng)漸隱漸顯效果,本文通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2020-03-03Vue跳轉(zhuǎn)頁(yè)面的幾種常用方法總結(jié)
在Vue.js中,頁(yè)面跳轉(zhuǎn)是構(gòu)建單頁(yè)面應(yīng)用(SPA)的基本操作之一,本文將介紹Vue中實(shí)現(xiàn)頁(yè)面跳轉(zhuǎn)的幾種方法,并通過(guò)實(shí)例代碼幫助理解每種方法的用法,需要的朋友可以參考下2024-09-09vue3項(xiàng)目如何國(guó)際化實(shí)戰(zhàn)指南
像很多大型的網(wǎng)址,特別是跨國(guó)際等公司網(wǎng)頁(yè),訪問(wèn)來(lái)自世界各地用戶,所以網(wǎng)頁(yè)的國(guó)際化極其重要的需求,下面這篇文章主要給大家介紹了關(guān)于vue3項(xiàng)目如何國(guó)際化的相關(guān)資料,需要的朋友可以參考下2022-09-09