Render Function

This tutorial is a basic presentation of the Vue js render function.

Render Function is an alternative to string templates, allowing you to make the Vue component dynamic and pass arguments and values from parent component to resulted HTML structure.
Let's see an example and understand how render function works.

- In the following example we create a Vue component (named "comp_test") which can render an HTML element with dynamic tag-name, color, font-size and id.

<div id = 'demo'>
 <comp_test :elm_type="'h1,#0000ee,30,title'">Freedom is Free</comp_test>
 <comp_test :elm_type="'h3,#00ce00,25,h3tag'">To have peace I give peace.</comp_test>
 <comp_test :elm_type="'p,#ee0000,24,ptag'">The thought precedes perception.</comp_test>
 <comp_test :elm_type="'div,#1234fb,24,divtag'">Peace of mind, health of the body.</comp_test>
</div>
<script>
Vue.component('comp_test',{
 render : function(createElement){
 //gets an array of values from the string added to elm_type attribute
 var a = this.elm_type.split(',');

 //creates and returns the DOM element with data from elm_type, and defined in the attrs object-parameter
 return createElement(a[0],{
 attrs:{
 style:'color:'+a[1]+';font-size:'+a[2]+'px;',
 id:a[3]
 }
 },
 this.$slots.default //To use the text added in component
 )
 },

 //defines the prop required in each <comp_test> as a string
 props:{
 elm_type:{
 attributes: String,
 required: true
 }
 }
});

var vm = new Vue({
 el: '#demo'
});
</script>

As you can see, each <comp_test> tag binds a :elm_type prop which is defined in props property in Vue component.
The elm_type attribute must contains a string with data for the HTML element we want to obtain ('tag-name, color, font-size, id').
In the render function we get an array of values from the string added in "elm_type" attribute.

var a = this.elm_type.split(',');

Render function receives a createElement method as the argument and returns it.
createElement creates the DOM element with data from elm_type (defined in the attrs object).
The content added in the resulted HTML element is the text from each <comp_test>, due to the following argument:

this.$slots.default

- Results:

Freedom is Free

To have peace I give peace.

The thought precedes perception.

Peace of mind, health of the body.

For details about the createElement method from render function see the Vue documentation: createElement Arguments.

<<-Mixins

Daily Test with Code Example

HTML

CSS

JavaScript

PHP-MySQL

Which tag can be used to create input text field in web page?

<input type="text" name="a_name" value="val" />

Which CSS property displays the text in a small-caps font?

display font-variant font-style

h3 {
  font-variant: small-caps;
}

What instruction displays a notice box with a message inside it, in JavaScript?

for() Date() alert()

var msg = "Visit CoursesWeb.net";
alert(msg);

Indicate the PHP code used to get the users IP.

$_SERVER["HTTP_USER_AGENT"] $_SERVER["REMOTE_ADDR"] $_GET[]

$ip = $_SERVER["REMOTE_ADDR"];
echo $ip;

Last accessed pages

Ajax-PHP File Manager ⁽⁹⁵⁹⁶⁾
Get and change IFrame content through a JavaScript script created in another IFrame ^(15560)
JQZoom Image Magnifier ^(12491)
Validate radio and checkbox buttons ⁽⁹⁵¹²⁾
Get Duration of Audio /Video file before Upload ^(14302)

Popular pages this month

PHP Unzipper - Extract Zip, Rar Archives ⁽⁸⁰⁵⁾
Courses Web: PHP-MySQL JavaScript Node.js Ajax HTML CSS ⁽⁵⁶⁵⁾
SHA1 Encrypt data in JavaScript ⁽⁴³¹⁾
Create simple Website with PHP ⁽³⁹⁷⁾
Read Excel file data in PHP - PhpExcelReader ⁽³⁸⁹⁾