vue使用render渲染jsx

vue&jsx文檔

vue實例屬性

// App.ts
import hBtn from './components/hBtn'
import hUl from './components/hUl'export default {data(){return {theme: "mdui-theme-pink",accent: "mdui-theme-accent-pink",users:['aoo', 'boo', 'coo']}},methods:{},render(h){return h('div',{'class':[this.theme, this.accent],attrs:{id: 'app'}},[h(hBtn,{'class':['mdui-color-theme-accent']}),h('ul',{},[h('li',{'class':{'text-danger':true},style:{color:'red';}} ,'start'),this.users.length? this.users.map((key, index)=>{return h('li',key)}): h('li','v-if else 這樣寫'),h('li', 'end')]),h(hUl,{attrs:{users:['user1', 'user2']}})]);// return end
}, //render end
}

---

// src/components/hBtn.tsvar Text = {// 在內部定義了一個組件props:['body'],render(h){return h('span',[this.body])}
}export default {data(){return {myName: "ajanuw"}},methods:{echo (num:number):void {alert(num)}},mounted(){console.log( '組件渲染完成!!')},render(h) {return h('button',{// 和`v-bind:class`一樣的 API'class':['mdui-btn'],style: {// 定義 stylefontSize: '22px'},attrs:{// 定義attribute, 可以利用這個更組件傳遞 propsid: "ajanuw"},domProps: {// DOM 屬性// innerHTML 會替換組件內部的賦值},on: {click: this.echo.bind(null, 1995)}},[h(Text, {attrs:{body:"this a "},ref: 'start'} ),h(Text, {attrs:{// 使用text組件， 傳遞propsbody:this.myName}, ref: 'end'} )]);}
}

---

// src/components/hUl.ts
// 渲染一個列表var list = {props:['body']render(h){return h('li', this.body)}
};export default {props:['users'],render(h){if(this.users){if(this.users.length){return h('ul',{},[this.users.map((key, index)=>{return h(list,{attrs:{body: key}})})])}else{return h('ul', {}, [return h(list, {attrs:{body: "沒有數據哦！"}})])}}}, //render end
}

---

下面是jsx

vue init webpack vueJsx
cd vueJsx
npm install babel-plugin-syntax-jsx babel-plugin-transform-vue-jsx babel-helper-vue-jsx-merge-props babel-preset-env --save-dev
npm i
npm start

// .babelirc{"presets": ["env"],"plugins": ["transform-vue-jsx"]
}

---

// App.jsvar Text = {props:['body'],render(h){return(<ponClick={ ()=> console.log( this.body)}style={{color:'red'}}>hello {this.body}</p>);// return end}
}
var List = {props:['body'],render(h){return (<li onClick={()=> console.log( this.body)}>{ this.body}</li>);}
}export default {data(){return {name:"ajanuw",users: ['aoo', 'boo']}},methods:{echo(name){alert( name)}},render(h){return (<div id="app"><Text body={this.name}/><ul>{this.users.length !==0? this.users.map((key, index)=>{return <List body={key} key={index}/>}): <li>沒有數據</li>}</ul></div>);// return end}, // render end
}

"vue": "^2.5.2" 發現自帶 jsx 模塊。。。

把App.vue 改成 App.js 文件

// App.js
export default {data(){return {name: 'ajanuw'}},render(){return (<div id="app"><p>hello {this.name}</p></div>)}
}

// main.js
import App from './App'     =>     import App from './App.js'