vueレンダリング方式とは何ですか?-Vue.js-php.cn

vueレンダリング方式とは何ですか?

WBOY

リリース： 2022-03-18 16:44:34

オリジナル

5190 人が閲覧しました

方法は次のとおりです: 1. 元のテンプレート構文を使用してレンダリングをマウントします。 2. render 属性と createElement 関数を使用して直接レンダリングします。 3. render 属性を使用して、コンポーネントの template 属性と createElement 関数を使用してレンダリングします。 ; 4. render 属性を使用して、単一ファイルコンポーネントをレンダリングします。

vueレンダリング方式とは何ですか?

この記事の動作環境: Windows 10 システム、Vue バージョン 2.9.6、DELL G3 コンピューター。

vue のレンダリングメソッドとは何ですか?

Vue のレンダリングメソッドを個人的にまとめると、次の 4 つのタイプに分類できます。

元のテンプレートの構文、マウントされたレンダリング
render 属性を使用すると、createElement 関数が直接レンダリングされます
render 属性を使用し、コンポーネントのテンプレート属性と一致しますおよび createElement 関数 renders
render 属性を使用し、単一のファイルコンポーネントと連携して、createElement 関数 rendering

##方法 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: &#39;#app&#39;,
17         data: {
18             message: &#39;这是内容&#39;
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: &#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>

ログイン後にコピー

方法 3:

render 属性を使用し、コンポーネントの template 属性と連携して、createElement 関数のレンダリングを実行します。

前の方法と比較すると、コンポーネントの追加とテンプレート属性の使用がより直感的であり、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: &#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>

ログイン後にコピー

動的レンダリングとコンポーネントによるモジュール分離が特徴です。ただし、HTMLテンプレートが````で囲まれており、使いにくいです。IDEではコードを強調表示できないため、大規模なアプリケーションには適していません。プロジェクト。

方法 4:

render 属性を使用し、単一のファイルコンポーネントと連携し、createElement 関数を使用してレンダリングします。このメソッドは、ほとんどの Vue プロジェクトのレンダリングメソッドです (公式のスキャフォールディングはこのレンダリングメソッドを使用します)。 vue CLI を使用したことがある場合は、よく知っているはずです。特徴は、単一ファイルコンポーネント、モジュール性、動的レンダリング、および典型的な単一ページアプリケーションです。

【関連する推奨事項:「

vue.js チュートリアル」】

以上がvueレンダリング方式とは何ですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。