Rumah > Artikel > hujung hadapan web > Apakah kaedah pemaparan vue?
Apakah kaedah pemaparan vue?
- WBOYasal
- 2022-03-18 16:44:345218semak imbas
Kaedahnya ialah: 1. Gunakan sintaks templat asal untuk melekapkan pemaparan; ; 4. Gunakan atribut render untuk membuat dengan komponen fail tunggal.
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: '#app',
17 data: {
18 message: '这是内容'
19 }
20 });
21 </script>
22 </html>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: '#app',
15 data: {
16 message: '这是内容'
17 },
18 render: function (createElement) {
19 return createElement('p', 'Message is:' + this.message)
20 }
21 });
22 </script>
23 </html>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: '这是内容'
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>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!