站長(zhǎng)資訊網(wǎng)
方法是：1、用原有模板語(yǔ)法，掛載渲染；2、用render屬性、createElement函數(shù)直接渲染；3、用render屬性，配合組件的template屬性、createElement函數(shù)渲染；4、使用render屬性，配合單文件組件渲染。
本文操作環(huán)境：windows10系統(tǒng)、Vue2.9.6版，DELL G3電腦。
vue渲染方法是什么
Vue中的渲染方式個(gè)人總結(jié)可分為4種:
-
原有模板語(yǔ)法，掛載渲染
-
使用render屬性，createElement函數(shù)直接渲染
-
使用render屬性，配合組件的template屬性，createElement函數(shù)渲染
-
使用render屬性，配合單文件組件，createElement函數(shù)渲染
方式1：
原有模板語(yǔ)法，掛載渲染，即html的方式做渲染。當(dāng)頁(yè)面返回時(shí)html中的v-model等屬性并沒(méi)有被渲染，保持不變發(fā)給客戶端，客戶端直到加載了Vue，創(chuàng)建了實(shí)例之后才會(huì)將這些標(biāo)識(shí)渲染出來(lái)。
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>TestVue</title> 6 </head> 7 <body> 8 <div id="app"> 9 <input v-model="message"> 10 <p>Message is: {{ message }}</p> 11 </div> 12 </body> 13 <script src="js/vue.js"></script> 14 <script type="text/javascript"> 15 var v = new Vue({ 16 el: '#app', 17 data: { 18 message: '這是內(nèi)容' 19 } 20 }); 21 </script> 22 </html>
方式2：
使用render屬性，createElement函數(shù)直接渲染：原本無(wú)html，通過(guò)JavaScript 的完全編程的能力生成頁(yè)面。特點(diǎn)是只適合一些細(xì)節(jié)渲染，雖完全控制輸出，但不夠直觀，實(shí)現(xiàn)復(fù)雜。
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>TestVue</title> 6 </head> 7 <body> 8 <div id="app"> 9 </div> 10 </body> 11 <script src="js/vue.js"></script> 12 <script type="text/javascript"> 13 var v = new Vue({ 14 el: '#app', 15 data: { 16 message: '這是內(nèi)容' 17 }, 18 render: function (createElement) { 19 return createElement('p', 'Message is:' + this.message) 20 } 21 }); 22 </script> 23 </html>
方式3：
使用render屬性，配合組件的template屬性，createElement函數(shù)渲染。
相比于上一個(gè)方式，加入組件，利用template屬性，更為直觀，同樣是原本無(wú)html，通過(guò)render函數(shù)渲染。
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>TestVue</title> 6 </head> 7 <body> 8 <div id="app"> 9 </div> 10 </body> 11 <script src="js/vue.js"></script> 12 <script type="text/javascript"> 13 var MyComponent = { 14 data () { 15 return { 16 message: '這是內(nèi)容' 17 } 18 }, 19 template: ` 20 <div id="app"> 21 <input v-model="message"> 22 <p>Message is: {{ message }}</p> 23 </div> 24 ` 25 }; 26 27 var v = new Vue({ 28 el: '#app', 29 components: { 30 'my-component': MyComponent 31 }, 32 render: function (createElement) { 33 return createElement('my-component') 34 } 35 //ECMAScript6: render: h => h('my-component') 36 }); 37 </script> 38 </html>
特點(diǎn)是動(dòng)態(tài)渲染，并且通過(guò)組件實(shí)現(xiàn)了模塊分離，但是html模板被包在““里，使用不方便，IDE無(wú)法高亮代碼，不適合大型項(xiàng)目。
方式4:
使用render屬性，配合單文件組件，createElement函數(shù)渲染。這種方式是絕大部分Vue項(xiàng)目（官方腳手架就是采用該渲染方式）的渲染方式。使用過(guò)vue CLI的話應(yīng)該都比較了解吧。特點(diǎn)就是單文件組件，模塊化，動(dòng)態(tài)渲染，典型的單頁(yè)面應(yīng)用。
【
