搜尋

首頁 >web前端 >Vue.js >vue渲染方法是什麼

vue渲染方法是什麼

WBOY
WBOY原創
2022-03-18 16:44:345250瀏覽

方法是：1、用原有模板語法，掛載渲染；2、用render屬性、createElement函數直接渲染；3、用render屬性，配合元件的template屬性、createElement函數渲染；4、使用render屬性，配合單一檔案元件渲染。

vue渲染方法是什麼

本文操作環境：windows10系統、Vue2.9.6版，DELL G3電腦。

vue渲染方法是什麼

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: &#39;#app&#39;,
17         data: {
18             message: &#39;这是内容&#39;
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: &#39;#app&#39;,
15         data: {
16             message: &#39;这是内容&#39;
17         },
18         render: function (createElement) {
19             return createElement(&#39;p&#39;, &#39;Message is:&#39; + 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: &#39;这是内容&#39;
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: &#39;#app&#39;,
29         components: {
30             &#39;my-component&#39;: MyComponent
31         },
32         render: function (createElement) {
33             return createElement(&#39;my-component&#39;)
34         }
35         //ECMAScript6: render: h => h(&#39;my-component&#39;)
36     });
37 </script>
38 </html>

特點是動態渲染，並且透過元件實現了模組分離，但是html模板被包在````裡，使用不方便，IDE無法高亮程式碼，不適合大型專案。

方式4:

使用render屬性，配合單一檔案元件，createElement函數渲染。這種方式是絕大部分Vue專案（官方鷹架就是採用該渲染方式）的渲染方式。使用過vue CLI的話應該都比較了解吧。特點就是單一檔案元件，模組化，動態渲染，典型的單頁應用。

【相關推薦：《vue.js教學》】

#

以上是vue渲染方法是什麼的詳細內容。更多資訊請關注PHP中文網其他相關文章！

JavaScript vue.js html JS ide
陳述：
本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn
上一篇：vue的漸進式體現在哪下一篇：vue的漸進式體現在哪

相關文章

看更多