Vue Render函數(shù)創(chuàng)建DOM節(jié)點(diǎn)代碼實(shí)例
雖然在render里使用createElement函數(shù)創(chuàng)建DOM節(jié)點(diǎn)不是很直觀,但是在部分獨(dú)立組件的設(shè)計(jì)中還是可以滿足一些特殊需求的。一個(gè)簡(jiǎn)單的render示例如下:
<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> </head> <body> <div id="app"> <my-component :list="list"></my-component> </div> <script src="vue.js"></script> <script> Vue.component('my-component', { props: { list: { type: Array, default: () => [] } }, render(createElement) { if (this.list.length) { return createElement('ul', this.list.map(item => createElement('li', item))) } else { return createElement('p', 'Empty list') } } }) new Vue({ el: '#app', data: { list: ['html', 'css', 'javascript'] } }) </script> </body> </html>
另外,由于v-if,v-else,v-show等指令都無(wú)法在render里使用,需要自己手動(dòng)實(shí)現(xiàn),拿常用的v-model舉個(gè)栗子:
Vue.component('my-component', { data() { return { message: '' } }, render(createElement) { return createElement( 'div', [ createElement( 'input', { on: { input: e => this.message = e.target.value } } ), createElement('p', this.message) ] ) } })
以上就是本文的全部?jī)?nèi)容,希望對(duì)大家的學(xué)習(xí)有所幫助,也希望大家多多支持腳本之家。
相關(guān)文章
vue中使用echarts制作圓環(huán)圖的實(shí)例代碼
這篇文章主要介紹了vue中使用echarts制作圓環(huán)圖的實(shí)例代碼,代碼簡(jiǎn)單易懂,非常不錯(cuò),具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2018-07-07VUE3開箱即用的音頻播放組件完整代碼(基于原生audio)
Vue3開箱即用的框架有很多選擇,下面這篇文章主要介紹了VUE3開箱即用的音頻播放組件(基于原生audio)的相關(guān)資料,文中通過(guò)代碼介紹的非常詳細(xì),需要的朋友可以參考下2024-09-09vue-router路由跳轉(zhuǎn)問題 replace
這篇文章主要介紹了vue-router路由跳轉(zhuǎn)問題 replace,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2022-09-09Ant Design Vue如何生成動(dòng)態(tài)菜單a-menu
這篇文章主要介紹了Ant Design Vue如何生成動(dòng)態(tài)菜單a-menu問題,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2024-01-01