Vue Render函數(shù)創(chuàng)建DOM節(jié)點代碼實例
更新時間:2020年07月08日 14:26:03 作者:viewts
這篇文章主要介紹了Vue Render函數(shù)創(chuàng)建DOM節(jié)點代碼實例,文中通過示例代碼介紹的非常詳細,對大家的學習或者工作具有一定的參考學習價值,需要的朋友可以參考下
雖然在render里使用createElement函數(shù)創(chuàng)建DOM節(jié)點不是很直觀,但是在部分獨立組件的設計中還是可以滿足一些特殊需求的。一個簡單的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等指令都無法在render里使用,需要自己手動實現(xiàn),拿常用的v-model舉個栗子:
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) ] ) } })
以上就是本文的全部內容,希望對大家的學習有所幫助,也希望大家多多支持腳本之家。
相關文章
VUE3開箱即用的音頻播放組件完整代碼(基于原生audio)
Vue3開箱即用的框架有很多選擇,下面這篇文章主要介紹了VUE3開箱即用的音頻播放組件(基于原生audio)的相關資料,文中通過代碼介紹的非常詳細,需要的朋友可以參考下2024-09-09Ant Design Vue如何生成動態(tài)菜單a-menu
這篇文章主要介紹了Ant Design Vue如何生成動態(tài)菜單a-menu問題,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2024-01-01