Maison >interface Web >Voir.js >Quelle est la méthode de rendu vue ?

Quelle est la méthode de rendu vue ?

WBOYoriginal: 2022-03-18 16:44:345252parcourir

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.

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>

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>

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>

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!

JavaScript vue.js html JS ide

Déclaration：

Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn

Article précédent：Où se reflète la progressivité du regard ?Article suivant：Où se reflète la progressivité du regard ?

Articles Liés

Voir plus