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)// methodsthis.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語法的方法,希望對大家有所幫助!
新聞熱點
疑難解答