Quelle est la méthode de rendu vue ?-Voir.js-php.cn

Quelle est la méthode de rendu vue ?

WBOY

Libérer： 2022-03-18 16:44:34

original

5225 Les gens l'ont consulté

La méthode est la suivante : 1. Utilisez la syntaxe du modèle d'origine pour monter le rendu ; 2. Utilisez l'attribut render et la fonction createElement pour effectuer le rendu directement ; 3. Utilisez l'attribut render pour effectuer le rendu avec l'attribut template du composant et la fonction createElement ; l'attribut render, Rendu avec des composants de fichier unique.

Quelle est la méthode de rendu vue ?

L'environnement d'exploitation de cet article : système Windows 10, Vue version 2.9.6, ordinateur DELL G3.

Quelle est la méthode de rendu de Vue ?

Le résumé personnel des méthodes de rendu dans Vue peut être divisé en 4 types :

Syntaxe du modèle original, rendu monté
Utilisez l'attribut render, fonction createElement pour effectuer le rendu directement
Utilisez l'attribut render, coopérez avec l'attribut template du composant, rendu de la fonction createElement
Utilisez l'attribut render, coopérez avec le composant de fichier unique, fonction createElement render

Méthode 1 :

Syntaxe du modèle d'origine, rendu de montage, c'est-à-dire rendu en HTML. Lorsque la page revient, le v-model et les autres attributs du HTML ne sont pas rendus et sont envoyés au client inchangés. Le client ne restituera pas ces identifiants tant que Vue n'est pas chargée et que l'instance n'est pas créée.

 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>

Copier après la connexion

Méthode 2 :

Utilisez l'attribut render et la fonction createElement pour effectuer le rendu directement : il n'y a pas de HTML à l'origine et la page est générée grâce à la capacité de programmation complète de JavaScript. La particularité est qu'il ne convient que pour restituer certains détails. Bien que la sortie soit complètement contrôlée, elle n'est pas assez intuitive et la mise en œuvre est compliquée.

 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>

Copier après la connexion

Méthode 3 :

Utilisez l'attribut render, coopérez avec l'attribut template du composant et la fonction createElement pour le rendu.

Par rapport à la méthode précédente, l'ajout de composants et l'utilisation de l'attribut template sont plus intuitifs. Il n'a pas non plus de code HTML et est rendu via la fonction de rendu.

 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>

Copier après la connexion

se caractérise par un rendu dynamique et une séparation des modules via les composants. Cependant, le modèle html est enveloppé dans ````, ce qui n'est pas pratique à utiliser. L'IDE ne peut pas mettre en évidence le code et ne convient pas aux grands projets.

Méthode 4 :

Utilisez l'attribut render, coopérez avec un composant de fichier unique et la fonction createElement pour le rendu. Cette méthode est la méthode de rendu de la plupart des projets Vue (l'échafaudage officiel utilise cette méthode de rendu). Si vous avez utilisé vue CLI, vous devriez la connaître. Les caractéristiques sont les composants d'un fichier unique, la modularité, le rendu dynamique et les applications typiques d'une seule page.

【Recommandation associée : "Tutoriel vue.js"】

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!