Shulou(Shulou.com)06/01 Report--

Today, I would like to share with you the relevant knowledge points about vue rendering methods. The content is detailed and the logic is clear. I believe most people still know too much about this, so share this article for your reference. I hope you can get something after reading this article. Let's take a look at it.

The methods are as follows: 1, mount the rendering with the original template syntax; 2, render directly with the render attribute and createElement function; 3, use the render attribute with the component's template attribute and createElement function to render; 4, use the render attribute with single file component rendering.

This article operating environment: windows10 system, Vue2.9.6 version, DELL G3 computer.

What is the vue rendering method?

Personal summary of rendering methods in Vue can be divided into four categories:

Original template syntax, mount rendering

Using the render property, the createElement function renders directly

Use the render property to render with the createElement function in conjunction with the template property of the component

Use the render attribute to render with a single file component and the createElement function

Method 1:

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

1 2 3 4 5 TestVue 6 7 8 9 10

Message is: {{message}}

11 12 13 14 15 var v = new Vue ({16 el:'# app',17 data: {18 message: 'this is content' 19} 20}); 21 22

Mode 2:

Using the render attribute, the createElement function renders directly: there is no html, and the page is generated through the full programming ability of JavaScript. The characteristic is that it is only suitable for some detail rendering, although the output is completely controlled, but it is not intuitive enough and the implementation is complex.

12 3 4 5 TestVue 6 7 8 9 10 11 12 13 var v = new Vue ({14 el:'# app',15 data: {16 message: 'this is the content' 17}, 18 render: function (createElement) {19 return createElement ('packs,' Message is:' + this.message) 20} 21}); 22 23

Mode 3:

Use the render property, in conjunction with the component's template property, to render with the createElement function.

Compared with the previous way, the addition of components, the use of template properties, more intuitive, is also originally no html, rendered through the render function.

12 3 4 5 TestVue 6 7 8 9 10 11 12 13 var MyComponent = {14 data () {15 return {16 message: 'this is the content' 17} 18}, 19 template: `20 21 22

Message is: {{message}}

23 24 `25}; 26 27 var v = new Vue ({28 el:'# app',29 components: {30 'my-component': MyComponent31}, 32 render: function (createElement) {33 return createElement (' my-component') 34} 35 / / ECMAScript6: render: h = > h ('my-component') 36}); 37 38

It is characterized by dynamic rendering and module separation through components, but the html template is packaged in ````, which is not easy to use, and IDE cannot highlight the code, so it is not suitable for large-scale projects.

Mode 4:

Use the render attribute to render with a single file component and the createElement function. This is the rendering method for most Vue projects (official scaffolding is used for this rendering). If you have used vue CLI, you should know more about it. It is characterized by single-file components, modularization, dynamic rendering, typical single-page applications.

These are all the contents of the article "what are the vue rendering methods?" Thank you for reading! I believe you will gain a lot after reading this article. The editor will update different knowledge for you every day. If you want to learn more knowledge, please pay attention to the industry information channel.

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.