What is the vue rendering method?-Vue.js-php.cn

What is the vue rendering method?

WBOY

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

Original

5251 people have browsed it

The method is: 1. Use the original template syntax to mount rendering; 2. Use the render attribute and createElement function to render directly; 3. Use the render attribute to render with the component's template attribute and createElement function; 4. Use the render attribute to render with single-file components.

What is the vue rendering method?

The operating environment of this article: Windows 10 system, Vue version 2.9.6, DELL G3 computer.

What is the vue rendering method?

Personal summary of the rendering methods in Vue can be divided into 4 types:

Original template syntax, mounted rendering
Use the render attribute, and the createElement function renders directly
Use the render attribute, and match the template attribute of the component, and the createElement function renders
Use render attribute, cooperate with single file component, createElement function rendering

##Method 1:

Original template syntax , mount rendering, that is, rendering in HTML. When the page returns, the v-model and other attributes in the HTML are not rendered and are sent to the client unchanged. The client will not render these identifiers until Vue is loaded and the instance is created.

 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>

Copy after login

Method 2:

Use the render attribute and the createElement function to render directly: there is no html originally, and the page is generated through the complete programming capabilities of JavaScript. The characteristic is that it is only suitable for rendering some details. Although the output is completely controlled, it is not intuitive enough and the implementation is complicated.

 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>

Copy after login

Method 3:

Use the render attribute, cooperate with the template attribute of the component, and createElement function rendering.

Compared with the previous method, adding components and using the template attribute is more intuitive. It also has no html and is rendered through the render function.

 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>

Copy after login

It is characterized by dynamic rendering and module separation through components. However, the html template is wrapped in ````, which is inconvenient to use. The IDE cannot highlight the code and is not suitable for large projects.

Method 4:

Use the render attribute, cooperate with the single file component, and createElement function to render. This method is the rendering method of most Vue projects (the official scaffolding uses this rendering method). If you have used vue CLI, you should be familiar with it. The characteristics are single-file components, modularity, dynamic rendering, and typical single-page applications.

【Related recommendation: "

vue.js Tutorial"】

The above is the detailed content of What is the vue rendering method?. For more information, please follow other related articles on the PHP Chinese website!