Vuejs Course


Vue Components are an important feature of VueJS that creates custom elements, which can be reused in HTML.
Components are created with the Vue.component() method.

- Syntax:
Vue.component('component-name', { options });

It accepts the same options as new Vue(), such as data, computed, watch, methods, and lifecycle hooks. The only exceptions are a few root-specific options like el.
A component's data option must be a function that returns an object, so that each instance can maintain an independent copy of the returned data.

Let's create a component, that will give a better understanding on how components work with Vue.js.
// 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>'
});

To use this Vue component in the html document, create a custom html element where the tag-name is the name of the component (here "test_comp"), then create a Vue instance, like in the following example:
<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.


Reusing Vue Components

Components can be reused as many times as you want.
Example:
<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>

Events and Methods in Components

In Vue components we can define methods and event listeners in template.
Example:
<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>

Passing data to Component with Props

In Vue.js props contains variables that are used to pass values to its child components.
Props are custom attributes you can register on a component, and they are defined into an Array in the props property.
Test and study the next example:
<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>
Props are almost like named variable, they pass to the child component whatever data they receive from the parent.
We can obtain the same results with the following code (with a 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>

Global and Local Components

Global components are defined with the 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>

Content Distribution with Slot

If you want to pass html content from parent tag to a component use the custom <slot> tag in component's template.
In the following example, the <slot> tag will be replaced with the HTML content added in the <msg_box> element (parent).
<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>

Daily Test with Code Example

HTML
CSS
JavaScript
PHP-MySQL
What attribute makes a radio button or checkbox input selected?
checked="checked" selected="selected" disabled="disabled"
<input type="checkbox" name="a_name" value="value" checked="checked" />
What CSS value scales the background image to the largest size contained within the element?
repeat-x contain linear-gradient
#id {
  background:url("path_to_image.png");
  background-size:contain;
  background-repeat:no-repeat;
}
What operator is used to determine the rest of the division of two numbers?
% * /
var rest8_7 = 8 % 7;
alert(rest8_7);
Indicate the PHP function that rounds a number up to the next highest integer.
floor() ceil() abs()
$nr = ceil(3.5);
echo $nr;        // 4
Vue JS Components

Last accessed pages

  1. Zodiac Signs PHP code (6421)
  2. PHP Unzipper - Extract Zip, Rar Archives (23649)
  3. Recursive function to create Multi-Level Menu in PHP (11097)
  4. How to use php variable in external js file (2555)
  5. innerHTML in PHP (14461)

Popular pages this month

  1. PHP Unzipper - Extract Zip, Rar Archives (99)
  2. Courses Web: PHP-MySQL JavaScript Node.js Ajax HTML CSS (86)
  3. SHA256 Encrypt hash in JavaScript (70)
  4. querySelector and querySelectorAll (50)
  5. SHA1 Encrypt data in JavaScript (45)