Apakah kaedah pemaparan vue?-View.js-php.cn

Apakah kaedah pemaparan vue?

WBOY

Lepaskan： 2022-03-18 16:44:34

asal

5190 orang telah melayarinya

Kaedahnya ialah: 1. Gunakan sintaks templat asal untuk melekapkan pemaparan; ; 4. Gunakan atribut render untuk membuat dengan komponen fail tunggal.

Apakah kaedah pemaparan vue?

Persekitaran pengendalian artikel ini: sistem Windows 10, versi Vue 2.9.6, komputer DELL G3.

Apakah kaedah pemaparan vue?

Ringkasan peribadi kaedah pemaparan dalam Vue boleh dibahagikan kepada 4 jenis:

Sintaks templat asal , rendering mounted
Gunakan atribut render dan fungsi createElement render terus
Gunakan atribut render dan bekerjasama dengan atribut template komponen, dan fungsi createElement membuat
Gunakan atribut render, dengan komponen fail tunggal, createElement fungsi rendering

Kaedah 1:

Sintaks templat asal , pelekapan pemaparan, iaitu pemaparan dalam HTML. Apabila halaman kembali, model v dan atribut lain dalam HTML tidak dipaparkan dan dihantar kepada klien tidak berubah.

 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>

Salin selepas log masuk

Kaedah 2:

Gunakan atribut render dan fungsi createElement untuk membuat secara langsung: tiada html pada asalnya, dan halaman dijana melalui lengkap keupayaan pengaturcaraan JavaScript. Cirinya ialah ia hanya sesuai untuk memaparkan beberapa butiran Walaupun output dikawal sepenuhnya, ia tidak cukup intuitif dan pelaksanaannya rumit.

 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>

Salin selepas log masuk

Kaedah 3:

Gunakan atribut render, padankan dengan atribut templat komponen dan createElement untuk membuat.

Berbanding dengan kaedah sebelumnya, menambah komponen dan menggunakan atribut templat adalah lebih intuitif Ia juga tidak mempunyai html dan dipaparkan melalui fungsi 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>

Salin selepas log masuk

Ia dicirikan oleh pemaparan dinamik dan pemisahan modul melalui komponen Walau bagaimanapun, templat html dibalut dengan ````, yang menyusahkan untuk digunakan untuk projek besar.

Kaedah 4:

Gunakan atribut render, bekerjasama dengan komponen fail tunggal dan fungsi createElement untuk membuat. Kaedah ini ialah kaedah pemaparan kebanyakan projek Vue (perancah rasmi menggunakan kaedah pemaparan ini). Jika anda telah menggunakan vue CLI, anda sepatutnya sudah biasa dengannya. Ciri-cirinya ialah komponen fail tunggal, modulariti, pemaparan dinamik dan aplikasi satu halaman biasa.

[Cadangan berkaitan: "tutorial vue.js"]

Atas ialah kandungan terperinci Apakah kaedah pemaparan vue?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!