溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
今天小編給大家分享一下vue渲染方法有哪些的相關知識點，內容詳細，邏輯清晰，相信大部分人都還太了解這方面的知識，所以分享這篇文章給大家參考一下，希望大家閱讀完這篇文章后有所收獲，下面我們一起來了解一下吧。
方法是：1、用原有模板語法，掛載渲染；2、用render屬性、createElement函數直接渲染；3、用render屬性，配合組件的template屬性、createElement函數渲染；4、使用render屬性，配合單文件組件渲染。
本文操作環境：windows10系統、Vue2.9.6版，DELL G3電腦。
Vue中的渲染方式個人總結可分為4種:
原有模板語法，掛載渲染
使用render屬性，createElement函數直接渲染
使用render屬性，配合組件的template屬性，createElement函數渲染
使用render屬性，配合單文件組件，createElement函數渲染
方式1：
原有模板語法，掛載渲染，即html的方式做渲染。當頁面返回時html中的v-model等屬性并沒有被渲染，保持不變發給客戶端，客戶端直到加載了Vue，創建了實例之后才會將這些標識渲染出來。
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 的完全編程的能力生成頁面。特點是只適合一些細節渲染，雖完全控制輸出，但不夠直觀，實現復雜。
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>特點是動態渲染，并且通過組件實現了模塊分離，但是html模板被包在````里，使用不方便，IDE無法高亮代碼，不適合大型項目。
方式4:
使用render屬性，配合單文件組件，createElement函數渲染。這種方式是絕大部分Vue項目（官方腳手架就是采用該渲染方式）的渲染方式。使用過vue CLI的話應該都比較了解吧。特點就是單文件組件，模塊化，動態渲染，典型的單頁面應用。
以上就是“vue渲染方法有哪些”這篇文章的所有內容，感謝各位的閱讀！相信大家閱讀完這篇文章都有很大的收獲，小編每天都會為大家更新不同的知識，如果還想學習更多的知識，請關注億速云行業資訊頻道。
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
