站長資訊網
方法是：1、用原有模板語法，掛載渲染；2、用render屬性、createElement函數直接渲染；3、用render屬性，配合組件的template屬性、createElement函數渲染；4、使用render屬性，配合單文件組件渲染。
本文操作環(huán)境：windows10系統(tǒng)、Vue2.9.6版，DELL G3電腦。
vue渲染方法是什么
Vue中的渲染方式個人總結可分為4種:
-
原有模板語法，掛載渲染
-
使用render屬性，createElement函數直接渲染
-
使用render屬性，配合組件的template屬性，createElement函數渲染
-
使用render屬性，配合單文件組件，createElement函數渲染
方式1：
原有模板語法，掛載渲染，即html的方式做渲染。當頁面返回時html中的v-model等屬性并沒有被渲染，保持不變發(fā)給客戶端，客戶端直到加載了Vue，創(chuàng)建了實例之后才會將這些標識渲染出來。
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: '這是內容' 19 } 20 }); 21 </script> 22 </html>
方式2：
使用render屬性，createElement函數直接渲染：原本無html，通過JavaScript 的完全編程的能力生成頁面。特點是只適合一些細節(jié)渲染，雖完全控制輸出，但不夠直觀，實現復雜。
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: '這是內容' 17 }, 18 render: function (createElement) { 19 return createElement('p', 'Message is:' + this.message) 20 } 21 }); 22 </script> 23 </html>
方式3：
使用render屬性，配合組件的template屬性，createElement函數渲染。
相比于上一個方式，加入組件，利用template屬性，更為直觀，同樣是原本無html，通過render函數渲染。
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: '這是內容' 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>
特點是動態(tài)渲染，并且通過組件實現了模塊分離，但是html模板被包在““里，使用不方便，IDE無法高亮代碼，不適合大型項目。
方式4:
使用render屬性，配合單文件組件，createElement函數渲染。這種方式是絕大部分Vue項目（官方腳手架就是采用該渲染方式）的渲染方式。使用過vue CLI的話應該都比較了解吧。特點就是單文件組件，模塊化，動態(tài)渲染，典型的單頁面應用。
【
