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.
Daily Test with Code Example
HTML
CSS
JavaScript
PHP-MySQL
Which tag is used to add lists into <ul> and <ol> elements?
<dt> <dd> <li><ul>
<li>http://coursesweb.net/html/</li>
<li>http://coursesweb.net/css/</li>
</ul>
Which value of the "display" property creates a block box for the content and ads a bullet marker?
block list-item inline-block.some_class {
display: list-item;
}Which instruction converts a JavaScript object into a JSON string.
JSON.parse() JSON.stringify eval()var obj = {
"courses": ["php", "javascript", "ajax"]
};
var jsonstr = JSON.stringify(obj);
alert(jsonstr); // {"courses":["php","javascript","ajax"]}Indicate the PHP class used to work with HTML and XML content in PHP.
stdClass PDO DOMDocument$strhtml = '<body><div id="dv1">CoursesWeb.net</div></body>';
$dochtml = new DOMDocument();
$dochtml->loadHTML($strhtml);
$elm = $dochtml->getElementById("dv1");
echo $elm->nodeValue; // CoursesWeb.net