Vue.component() method.new Vue(), such as data, computed, watch, methods, and lifecycle hooks. The only exceptions are a few root-specific options like el.data option must be a function that returns an object, so that each instance can maintain an independent copy of the returned data.
// Define a new component called test_comp
Vue.component('test_comp', {
data: function(){
return { txt:'Life is miracle' }
},
template: '<div><h4>This is me</h4><p>{{txt}}.</p></div>'
});
<div id='demo'>
<test_comp></test_comp>
</div>
<script>
new Vue({ el: '#demo' });
</script>
The custom tag (here <test_comp>) is replaced with the value of the template property from the defined component.If you have more html tags in component's template, you must wrap the template in a parent element.
In our example we added H4 and P tags inside a Div element.
<div id='demo'>
<test_comp></test_comp>
<test_comp></test_comp>
<test_comp></test_comp>
</div>
<script>
// Define a new component called test_comp
Vue.component('test_comp', {
data: function(){
return { txt:'Life is miracle' }
},
template: '<div><h4>This is me</h4><p>{{txt}}.</p></div>'
});
// Create a Vue instance
new Vue({ el: '#demo' });
</script>
<div id='demo'>
Click on these:
<comp_test></comp_test>
<comp_test></comp_test>
</div>
<script>
// Define a new component called comp_test
Vue.component('comp_test', {
template: '<div v-bind:style="styleobj" @click="countClicks">Nr. clicks: {{ nr_c }}.</div>',
data: function(){
return {nr_c:0, styleobj:{background:'#babafe', height:'80px', margin:'8px', width:'111px'}};
},
methods:{
countClicks: function(ev){
this.nr_c++;
}
}
});
// Create a Vue instance
new Vue({ el: '#demo'});
</script>
props property.
<div id='demo'>
<comp_button text='Comments'></comp_button>
<comp_button text='Likes'></comp_button>
<comp_button text='Shares'></comp_button>
</div>
<script>
// Define a new component called comp_button
Vue.component('comp_button', {
props: ['text'],
template: '<button>{{text}}</button> '
});
// Create a Vue instance
new Vue({ el: '#demo' });
</script>
v-for directive), which is more elegant:
<div id='demo'>
<comp_button v-for='txt in ar_txt' v-bind:text='txt'></comp_button>
</div>
<script>
// Define a new component called comp_button
Vue.component('comp_button', {
props: ['text'],
template: '<button>{{text}}</button> '
});
const btn_txt =['Comments', 'Likes', 'Shares']; //array with data for text in component
// Create a Vue instance
new Vue({
el: '#demo',
data:{
ar_txt: btn_txt
}
});
</script>
Vue.component() method, but the components can also be registered directly in the vue instance, in the components property. This is called Local registration, as shown in the following script:
<div id='demo'>
<comp_arti v-for='obj in article' v-bind:post='obj'></comp_arti>
</div>
<script>
//array with data for article content in component
const arti =[
{title: 'Be Happy', cnt:'<i>Just transmit joy</i>'},
{title: 'Be Good', cnt:'<b>Recognize holiness and innocence in everything you perceive.</b>'},
{title: 'Be (in) Peace', cnt:'<b>Just be the inner Self.</b>'}
];
// Create a Vue instance
new Vue({
el: '#demo',
data:{
article: arti
},
components:{
comp_arti:{
props:['post'],
template:'<div><h3>{{post.title}}</h3><div v-html="post.cnt"></div></div>'
}
}
});
</script>
<slot> tag in component's template.
<div id='demo'>
<msg_box>
<i>I'm Free.</i>
</msg_box>
</div>
<script>
Vue.component('msg_box', {
template:'<div class="my_msg"><b>Success:</b> <slot></slot></div>'
})
// Create a Vue instance
new Vue({
el: '#demo'
});
</script>
<ul> <li>http://coursesweb.net/html/</li> <li>http://coursesweb.net/css/</li> </ul>
.some_class {
display: list-item;
}var obj = {
"courses": ["php", "javascript", "ajax"]
};
var jsonstr = JSON.stringify(obj);
alert(jsonstr); // {"courses":["php","javascript","ajax"]}$strhtml = '<body><div id="dv1">CoursesWeb.net</div></body>';
$dochtml = new DOMDocument();
$dochtml->loadHTML($strhtml);
$elm = $dochtml->getElementById("dv1");
echo $elm->nodeValue; // CoursesWeb.net