Vue.Js Template With Components
Vue.Js Template With Components:–In this tutorial we will teach you basic concept of components. When we make a larger app then we need components because we can divide our program in various component modules. Hence so our project becomes easier to code and maintain by using components strategy.
Vue.Js Template With Components | Example
A component is a Vue’s instance itself with predefined options which can be used inside vue instance but here we will discuss all possible ways to define a component in View-Model.
Registration of Component | Example
You can use the following code syntax to register a component Vue.component(tagName,options). To register a global component following things keep in mind:
1. Always register a component before Vue instantiation.
2.Once you register your Vue component then use it as an instance’s template inside the predefine tagName that is my-component in below code snippet. So we have explained how to register and how to use it in View-Model.
Component | Registration | Example
Now we will understand how to register a component globally outside the Vue’instance.
Global Registration | Demo | Example
Vue.component('my-component', {
template: '<div>A custom component!</div>'
})
// create a root instance
new Vue({
el: '#example'
})
|
Rendering Template Using Component | Syntax
Now we will show our component part into DOM structure of document using View-Model.
<div id="example"> <my-component></my-component> </div>
Global Registration | Example
In below code example we are combining both above code snippets to make a meaningful example for your better understanding also you can use this code snippet in your program to justify it.
Example
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.3.0/vue.js"></script> <!--<script src="https://unpkg.com/vue"></script>-->
<div id="app">
<ol><!-- Create an instance of the todo-item component --></ol>
</div>
<script>
Vue.component('my-component', {
template: '</p>
<div>A custom component!</div>
<p>',
}),
Vue.component('todo-item', {
props: ['todo'],
template: '</p>
<li>{{ todo.text }}</li>
<p>',
})
var myapp = new Vue({
el: '#app',
data: {
message: '</p>
<h1>Vue.JS Demo Example</h1>
<p>',
template: '</p>
<div>A custom component!</div>
<p>',
groceryList: [
{ id: 0, text: 'Vegetables' },
{ id: 1, text: 'Cheese' },
{ id: 2, text: 'Whatever else humans are supposed to eat' }
]
}
})
</script>
|
Explanation of Program
Explanation:–Above program defines a component carrying two parameters(tagName and options). Here tagName parameter takes as a tagName and a template A Custom Component! as second parameter to make a complete component. So the output presents the template in between my-component in View-Model using DOM structure. You can see this View-Model by writing myapp.$e1 on output console.
Local Registration | Example
You can register a component locally inside a Vue’s instance using the option components. Below is a code snippet for syntax of local registration.
Below is syntax for local registration of a component.
Syntax
var comp= {
template: '<div>Template creation using component</div>'
}
new Vue({
// ...
components: {
// <my-component> will only be available in parent's template
'my-component': comp
}
})
Combination Of Both The Above Programs | Complete | Example
Below example carries the complete information about the creation and registration of a component and therefore it illustrates how does we render a template in View of browser using View-Model.
Local Registration | Demo | Example
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.3.0/vue.js"></script> <!--<script src="https://unpkg.com/vue"></script>-->
<div id="app">
<ol><!-- Create an instance of the todo-item component --></ol>
<!--<template id="greeting-template">
<h1>Welcome to coligo!</h1>
<button>login</button>
<button>signup</button>
<a href="http://coligo.io">Check out the other tutorials!</a>
</template>-->
</div>
<script>
var comp= {
template: '</p>
<div>Template creation using local component</div>
<p>'
}
/* Vue.component('greeting', {
template: '#greeting-template'
}),*/
Vue.component('my-component', {
template: '</p>
<div>A component defined globally.</div>
<p>',
}),
Vue.component('todo-item', {
props: ['todo'],
template: '</p>
<li>{{ todo.name }}</li>
<p>',
})
var myapp = new Vue({
el: '#app',
data: {
message: '</p>
<h1>Vue.JS Component Example</h1>
<p>',
template: '</p>
<div>A template is being created using Vue.Js Component System.</div>
<p>',
juicesList: [
{ id: 0, name: 'Apple' },
{ id: 1, name: 'Pineapple' },
{ id: 2, name: 'Strawberry' }
]
},
components: {
// <my-component> will only be available in parent's template
'my-component': comp
}
})
</script>
|
Execution of Program
Explanation:–In here we see only the difference between local registration and global registration is that unlikely we don’t need to write opening and closing my-component as a tagName to render the template value stored in “comp” variable ; instead we have used ‘my-component’: comp code in our program inside the view instance itself.
Creating Component Based Template Using Template Tag | Example
What we have done here is that we don’t use opening and closing tagName my-component to render form Template option of component in our program.
In other words we are using an id selector #greeting-template as a reference in our template option in component.
Example
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.3.0/vue.js"></script> <!-- Latest compiled and minified CSS --> <!--<script src="https://unpkg.com/vue"></script>-->
<div id="app">
<ol><!-- Create an instance of the todo-item component --></ol>
<h1>Welcome to Tutorialsplane!</h1>
<form>
<div class="form-group">
<label for="firstname">First Name</label>
<input id="fname" class="form-control" name="First Name" type="text" placeholder="Enter First Name" />
</div>
<div class="form-group">
<label for="email">Email</label>
<input id="email" class="form-control" name="email" type="text" placeholder="Enter email" /></div>
<div class="form-group">
<label for="Phone">Phone</label>
<input id="phone" class="form-control" name="phone" type="text" placeholder="Enter Phone No" /></div>
<div class="form-group"><label for="Password">Password</label> <input id="password" class="form-control" name="password" type="password" placeholder="Enter Password" /></div>
<div class="form-group">
<label for="Password">Confirm Password</label>
<input id="confirmpassword" class="form-control" name="confirmpassword" type="password" placeholder="Enter Password" />
</div>
<button class="btn btn-primary" type="submit">Submit</button>
</form></div>
<script>
var comp= {
template: '</p>
<div>Template creation using local component</div>
<p>'
}
Vue.component('greeting', {
template: '#greeting-template'
}),
Vue.component('my-component', {
template: '</p>
<div>A component defined globally.</div>
<p>',
}),
Vue.component('todo-item', {
props: ['todo'],
template: '</p>
<li>{{ todo.name }}</li>
<p>',
})
var myapp = new Vue({
el: '#app',
data: {
message: '</p>
<h1>Vue.JS Component Example</h1>
<p>',
template: '</p>
<div>A template is being created using Vue.Js Component System.</div>
<p>',
juicesList: [
{ id: 0, name: 'Apple' },
{ id: 1, name: 'Pineapple' },
{ id: 2, name: 'Strawberry' }
]
},
components: {
// <my-component> will only be available in parent's template
'my-component': comp
}
})
</script>
|
Parent-child Component Relationship using props | Example
Here we do explain data flow between child and parent components. So parent component takes template data from child component. In our example the following template is imported by parent component from child component.template: ‘
‘ by using
Another scenario you can see here is about props property which is used to import user string value from anonymous root component into another child component named my-component>
; also we have utilize the actual power of v-bind to attach it’s value in the template of my-component.
props | Example
<html>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.3.0/vue.js"></script>
<body>
<div id="app">
<my-component v-bind:user="user"></my-component>
<parent-component v-bind:user="user"></parent-component>
<input type="text" v-model="message"/>
<div v-on:click="button_click" v-text="message" ></div>
</div>
<script>
Vue.component('child-component', {
template: '<div>template of child component is being called by parent component</div>',
}),
Vue.component("parent-component", {
template: `
<child-component></child-component>
`})
var vm = new Vue({
el: '#app',
data: {
message:'The Tutorialsplane',
greeting:'hi',
questions: ["one", "two", "three"],
user:'username'
},
methods: {
button_click: function(message) {
alert('The Number is::' + message + '!')
if (event) {
alert(event.target.tagName)
console.log(event.target.value)
}
}
},
components:{
'my-component':{
props:['user'],
// setting data locally for the child
data: function (){
return { name: 'spiky' };
},
// using both local and parent data in the child's template
template: '<div> {{ user }},{{ name }}</div>'
}
}
})
</script>
</body>
</html>
|
Advertisements
