05 February, 2021

Vue.js Render functions

                No comments   

 

Vue.js Render functions

Vue.js recommends us to use templates to build HTML. Here, we can use the render function as a closer-to-the-compiler alternative to templates.

Vue.js render functions are also used along with Vue.js components. Most of the time, the render function is created by the Vue.js compiler. When you specify a template on your component, this template's content is processed by the Vue.js compiler that will return a render function. The render function essentially returns a virtual DOM node, which will be rendered by Vue.js in your browser DOM.

What is the virtual Document Object Model or "DOM"?

The virtual DOM allows Vue.js to render your component in its memory before updating your browser. This makes everything faster because it has to do only a few interactions with the browser. When Vue.js updates the browser DOM, it compares the updated virtual DOM to the previous one and updates the real DOM with the modified parts. That's how it enhances performance.


Let's take an example of a simple component and see what the render function puts the effect when we use it within the example.

Index.html file:

  1. <html>    
  2.    <head>    
  3.       <title>Vue.js Component</title>    
  4.       <link rel="stylesheet" href="index.css">    
  5.         <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>    
  6.     </head>    
  7.     <body>    
  8.       <div id = "component_test">    
  9.          <testcomponent></testcomponent>    
  10.       </div>    
  11.       <script src="index.js"></script>    
  12.    </body>    
  13. </html>    

Index.js file:

  1. Vue.component('testcomponent',{    
  2.    template : '<h1>Hello Students!</h1>'    
  3. });    
  4. var vm = new Vue({    
  5.    el: '#component_test'    
  6. })  

Let's use a simple CSS file to make the output more attractive.

Index.css file:

  1. html, body {  
  2.     margin: 5px;  
  3.     padding: 0;  
  4. }  

After the execution of the program, you will see the following output:

Output:

Vue.js Render functions

Here, you can see that the component shows the above result as Hello Students. Now, if you reuse the component repeatedly, you will see that the result would be printed again and again. For example,

  1. <div id = "component_test">  
  2.    <testcomponent></testcomponent>  
  3.    <testcomponent></testcomponent>  
  4.    <testcomponent></testcomponent>  
  5.    <testcomponent></testcomponent>  
  6.    <testcomponent></testcomponent>  
  7. </div>   

Output:

Vue.js Render functions

Suppose, you don't want the same text to be printed again and again so, what will you do? Let's make some changes and type something inside the component as follows:

Index.html file:

  1. <html>    
  2.    <head>    
  3.       <title>Vue.js Component</title>    
  4.       <link rel="stylesheet" href="index.css">    
  5.         <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>    
  6.     </head>    
  7.     <body>    
  8.       <div id = "component_test">    
  9.    <testcomponent>Hello Rahul!</testcomponent>  
  10.    <testcomponent>Hello James!</testcomponent>  
  11.    <testcomponent>Hello Alex!</testcomponent>  
  12.    <testcomponent>Hello Priti!</testcomponent>  
  13.    <testcomponent>Hello Mohan!</testcomponent>  
  14.       </div>    
  15.       <script src="index.js"></script>    
  16.    </body>    
  17. </html>    

Index.js file will be same as above.

After the execution of the program, you will see the following output:

Output:

Vue.js Render functions

You can see that the output remains the same as earlier. It does not change the text as we want.

Use of Slot

Now, we will use slots that are provided by components to get the desired result.

Syntax:

  1. template : '<h1><slot></slot></h1>',  

See the following example:

Index.html file:

  1. <html>    
  2.    <head>    
  3.       <title>Vue.js Component</title>    
  4.       <link rel="stylesheet" href="index.css">    
  5.         <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>    
  6.     </head>    
  7.     <body>    
  8.       <div id = "component_test">    
  9.    <testcomponent>Hello Rahul!</testcomponent>  
  10.    <testcomponent>Hello James!</testcomponent>  
  11.    <testcomponent>Hello Alex!</testcomponent>  
  12.    <testcomponent>Hello Priti!</testcomponent>  
  13.    <testcomponent>Hello Mohan!</testcomponent>  
  14.       </div>    
  15.       <script src="index.js"></script>    
  16.    </body>    
  17. </html>    

Index.js file:

  1. Vue.component('testcomponent',{    
  2.     template : '<h1><slot></slot></h1>',    
  3. });    
  4. var vm = new Vue({    
  5.    el: '#component_test'    
  6. })  

After the execution of the program, you will see the following output:

Output:

Vue.js Render functions

How to use render Function?

Suppose, you have to change the color and size of the results in output for example, we were using h1 tag in our previous examples and we want to change the HTML tag to p tag or div tag or any other tag for the same component. We have all the flexibility to do the changes by using the render function. Render function helps make the component dynamic and use the way it is required by keeping it common and helping pass arguments using the same component.

Let's see an example to demonstrate the use of render function:

Index.html file:

  1. <html>    
  2.    <head>    
  3.       <title>Vue.js Component</title>    
  4.       <link rel="stylesheet" href="index.css">    
  5.         <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>    
  6.     </head>    
  7.     <body>    
  8.       <div id = "component_test">    
  9.    <testcomponent :elementtype = "'div,red,25,div1'">Hello Rahul!</testcomponent>  
  10.    <testcomponent :elementtype = "'h2,brown,25,div1'">Hello James!</testcomponent>  
  11.    <testcomponent :elementtype = "'p,blue,25,ptag'">Hello Alex!</testcomponent>  
  12.    <testcomponent :elementtype = "'div,green,25,divtag'">Hello Priti!</testcomponent>  
  13.    <testcomponent :elementtype = "'h4,blue,25,ptag'">Hello Mohan!</testcomponent>  
  14.       </div>    
  15.       <script src="index.js"></script>    
  16.    </body>    
  17. </html>    

Index.js file:

  1. Vue.component('testcomponent',{    
  2.     render :function(createElement){  
  3.                var a = this.elementtype.split(",");  
  4.                return createElement(a[0],{  
  5.                   attrs:{  
  6.                      id:a[3],  
  7.                      style:"color:"+a[1]+";font-size:"+a[2]+";"  
  8.                   }  
  9.                },  
  10.                this.$slots.default  
  11.                )  
  12.             },  
  13.             props:{  
  14.                elementtype:{  
  15.                   attributes:String,  
  16.                   required:true  
  17.                }  
  18.             }  
  19.          });  
  20.          var vm = new Vue({  
  21.             el: '#component_test'  
  22.          })  

After the execution of the program, you will see the following output:

Output:

Vue.js Render functions

Example Explanation

In the above example, you can see that we have changed the component and added the render function with props property using the following code in the Index.js file:

  1. Vue.component('testcomponent',{    
  2.     render :function(createElement){  
  3.                var a = this.elementtype.split(",");  
  4.                return createElement(a[0],{  
  5.                   attrs:{  
  6.                      id:a[3],  
  7.                      style:"color:"+a[1]+";font-size:"+a[2]+";"  
  8.                   }  
  9.                },  
  10.                this.$slots.default  
  11.                )  
  12.             },  
  13.             props:{  
  14.                elementtype:{  
  15.                   attributes:String,  
  16.                   required:true  
  17.                }  
  18.             }  
  19.          });  

Here, the props property looks like the following code:

  1. props:{  
  2.                elementtype:{  
  3.                   attributes:String,  
  4.                   required:true  
  5.                }  
  6.             }  
  7.          });  

When we use components with render functions, they do not have a template tag or property. Instead of them, they define a function called render that receives a createElement in the following structure:

Syntax:

  1. (renderElement: String | Component, definition: Object, children: String | Array) argument   

You can see it in the example as follows:

  1. render :function(createElement){  
  2.                var a = this.elementtype.split(",");  
  3.                return createElement(a[0],{  
  4.                   attrs:{  
  5.                      id:a[3],  
  6.                      style:"color:"+a[1]+";font-size:"+a[2]+";"  
  7.                   }  

We have also defined a property named elementtype, which takes attributes field of type string. In another required field, we have mentioned that the field is mandatory.

See the render function code where we have used the elementtype property as follows:

  1. render :function(createElement){  
  2.                var a = this.elementtype.split(",");  
  3.                return createElement(a[0],{  
  4.                   attrs:{  
  5.                      id:a[3],  
  6.                      style:"color:"+a[1]+";font-size:"+a[2]+";"  
  7.                   }  
  8.                },  
  9.                this.$slots.default  
  10.                )  
  11.             },  

The render function gets createElement as the argument and returns the same. The CreateElement creates the DOM element in the same way as it does in JavaScript. We have also split the elementtype on comma, using the values in the attrs field.

CreateElement takes the first param as the elementtag to be created. It is passed to the component as follows:

  1. <testcomponent :elementtype = "'div,red,25,div1'">Hello Rahul!</testcomponent>   

The component accepts the props field as the above code. It starts with the symbol : and after that the name of the props is specified. After specifying the prop's name, we have to pass the element tag, color, fontsize, and the id of the element.

In the render function, you can see that the first element is the elementtag in createElement field which is given to the createElemet as follows:

  1. return createElement(a[0],{  
  2.                   attrs:{  
  3.                      id:a[3],  
  4.                      style:"color:"+a[1]+";font-size:"+a[2]+";"  
  5.                   }  
  6.                },  
  7.                this.$slots.default  
  8.                )  
  9.             },  

In the above code, the a[0] is the html element tag. The next parameters are the attributes for the element tag. They are defined in the attr field as follows:

  1. attrs:{  
  2.                      id:a[3],  
  3.                      style:"color:"+a[1]+";font-size:"+a[2]+";"  
  4.                   }  
  5.                },  

Here, we have defined two attributes for the element tag: id tag and style tag.

  • In the id tag, we have passed a[3], which is the value we have after splitting on comma.
  • In the style tag, we have passed a[1] and a[2] respectively to define color and fontsize.

The message we have given in component is specified as follows:

  1. <testcomponent :elementtype = "'div,red,25,div1'">Hello Rahul!</testcomponent>  

The slots field is used to define the text that we want to print in the createElement using the following code:

  1. this.$slots.default  

After the execution of the program when you see the output, you will see that all the output entries are displayed in a specific way. This is because of the elements f the component structure we have defined in a specific way.

  1. <div id = "component_test">    
  2.    <testcomponent :elementtype = "'div,red,25,div1'">Hello Rahul!</testcomponent>  
  3.    <testcomponent :elementtype = "'h2,brown,25,div1'">Hello James!</testcomponent>  
  4.    <testcomponent :elementtype = "'p,blue,25,ptag'">Hello Alex!</testcomponent>  
  5.    <testcomponent :elementtype = "'div,green,25,divtag'">Hello Priti!</testcomponent>  
  6.    <testcomponent :elementtype = "'h4,blue,25,ptag'">Hello Mohan!</testcomponent>  
  7.       </div>  

Event binding in Vue.js render functions

Let's see an example to demonstrate event binding in Vue.js render function. See the following example:

Example

Index.html file:

  1. <html>    
  2.    <head>    
  3.       <title>Vue.js Event binding in render function</title>    
  4.       <link rel="stylesheet" href="index.css">    
  5.         <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>    
  6.     </head>    
  7.     <body>    
  8.       <div id="render_1"></div>  
  9.       <script src="index.js"></script>    
  10.    </body>    
  11. </html>  

Index.js file:

  1. new Vue({  
  2.   el: '#render_1',  
  3.   data() {  
  4.     return {  
  5.       clickCount: 0,  
  6.     }  
  7.   },  
  8.   methods: {  
  9.     onClick() {  
  10.       this.clickCount += 1;  
  11.     }  
  12.   },  
  13.   render(createElement) {  
  14.     const button = createElement('button', {  
  15.       on: {  
  16.         click: this.onClick  
  17.       }  
  18.     }, 'Click me');  
  19.     const counter = createElement('span', [  
  20.       'Number of clicks:',  
  21.       this.clickCount  
  22.     ]);  
  23.     return createElement('div', [  
  24.       button, counter  
  25.     ])  
  26.   }  
  27. });  

After the execution of the program, you will see the following output:

Output:

Vue.js Render functions

When you click on the "Click me" button, you will see that the number of clicks has been displayed as how many times you have clicked on the button. See the output:

Vue.js Render functions

In the above example, the button is clicked four times.

 

Source by : javatpoint.com

 

Related Posts:

  • Vue.js Conditions & LoopsVue.js Conditions & LoopsConditions and Loops are used in all programming languages to provide repetitive control structures. They can repeat one … Read More
  • Vue.js InstanceVue.js InstanceTo start a Vue application, you have to create a new Vue instance by using the Vue function. Whenever we create a new Vue project, the … Read More
  • Vue.js Declarative RenderingVue.js Declarative RenderingIn Vue.js, there is a system in the core that enables us to declaratively render data to the DOM using simple, straightfor… Read More
  • Vue.js TemplateVue.js TemplateIn the previous Vue.js Instance chapter, we have learned how to get an output in the form of text content on the screen. In this chapte… Read More
  • Getting started with Vue.js Getting started with Vue.jsIn the previous chapter, we have seen several ways to use and install Vue.js in your project. In this article, we sha… Read More

0 comments:

Post a Comment

Thanks

Meta

Popular Posts

Categories

Social Media Links

Blog Archive