方法是：1、用原有模板語法，掛載渲染；2、用render屬性、createElement函數直接渲染；3、用render屬性，配合元件的template屬性、createElement函數渲染；4、使用render屬性，配合單一檔案元件渲染。
本文操作環境：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: '#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.js教學》】
#
以上是vue渲染方法是什麼的詳細內容。更多資訊請關注PHP中文網其他相關文章！
