CoderFunda
  • Home
  • About us
    • Contact Us
    • Disclaimer
    • Privacy Policy
    • About us
  • Home
  • Php
  • HTML
  • CSS
  • JavaScript
    • JavaScript
    • Jquery
    • JqueryUI
    • Stock
  • SQL
  • Vue.Js
  • Python
  • Wordpress
  • C++
    • C++
    • C
  • Laravel
    • Laravel
      • Overview
      • Namespaces
      • Middleware
      • Routing
      • Configuration
      • Application Structure
      • Installation
    • Overview
  • DBMS
    • DBMS
      • PL/SQL
      • SQLite
      • MongoDB
      • Cassandra
      • MySQL
      • Oracle
      • CouchDB
      • Neo4j
      • DB2
      • Quiz
    • Overview
  • Entertainment
    • TV Series Update
    • Movie Review
    • Movie Review
  • More
    • Vue. Js
    • Php Question
    • Php Interview Question
    • Laravel Interview Question
    • SQL Interview Question
    • IAS Interview Question
    • PCS Interview Question
    • Technology
    • Other

28 December, 2020

Vue.js Component

 Programing Coderfunda     December 28, 2020     Vue.js Tutorial     No comments   

Vue.js Component

Vue.js components are one of Vue.js' most important features and used to create custom elements that can be reused in HTML. Components are the reusable Vue.js instances with a name. We can use a component as a custom element inside a root Vue.js instance.

Following is the syntax to create a component.

Syntax:

  1. Vue.component('nameofthecomponent',{ // options});  

Let's create a component to understand it better how components work with Vue.js. See the following example:

Index.html file:

  1. <html>  
  2.    <head>  
  3.       <title>Vue.js Component</title>  
  4.       <link rel="stylesheet" href="index.css">  
  5.         <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>  
  6.     </head>  
  7.     <body>  
  8.       <div id = "component_test1">  
  9.          <testcomponent></testcomponent>  
  10.       </div>  
  11.       <div id = "component_test2">  
  12.          <testcomponent></testcomponent>  
  13.       </div>  
  14.       <script src="index.js"></script>  
  15.    </body>  
  16. </html>  

Index.js file:

  1. Vue.component('testcomponent',{  
  2.    template : '<div><h1>This is a component example</h1></div>'  
  3. });  
  4. var vm = new Vue({  
  5.    el: '#component_test1'  
  6. });  
  7. var vm1 = new Vue({  
  8.    el: '#component_test2'  
  9. });  

Let's use a simple CSS file to make the output more attractive.

Index.css file:

  1. html, body {  
  2.     margin: 5px;  
  3.     padding: 0;  
  4. }  

After the execution of the program, you will see the following output:

Output:

This is a component example
This is a component example
Vue.js Component

Example Explanation

In the above example, we have created two div with id component_test1 and component_test2 in the Index.html file. Once a component is created, the name of the component becomes the custom element and we can use this custom element in the Vue instance element created, i.e. inside the div with ids component_test1 and component_test2. Here, we have used a test component as the name of the component and the same name is used as the custom element inside the divs.

  1. <div id = "component_test1">  
  2.    <testcomponent></testcomponent>  
  3. </div>  
  4. <div id = "component_test2">  
  5.    <testcomponent></testcomponent>  
  6. </div>  

In the Index .js file, we have created two Vue.js instances with the respective div ids.

  1. var vm = new Vue({  
  2.    el: '#component_test1'  
  3. });  
  4. var vm1 = new Vue({  
  5.    el: '#component_test2'  

We have created a common component to use with both the view instances.

  1. Vue.component('testcomponent',{  
  2.    template : '<div><h1>This is a component example</h1></div>'   

Local registration of Components

We can directly make the components a part of vue.js instance by using the following code in Index.js file. This method is called local registration. Here, the components will be a part of only the created vue instance.

  1. var vm = new Vue({  
  2.    el: '#component_test1',  
  3.    components:{  
  4.       'testcomponent': {  
  5.         template : '<div><h1>This is a component example</h1></div>'   
  6.       }  
  7.    }  
  8. });  

After the execution of the program, you will see the following output:

Output:

Vue.js Component

Vue.js components with more options

We can add some more options such as data and methods to Vue.js components. It is same as we have added data and methods to Vue.js instance. See the following example:

Index.html file:

  1. <html>  
  2.    <head>  
  3.       <title>Vue.js Component</title>  
  4.       <link rel="stylesheet" href="index.css">  
  5.         <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>  
  6.     </head>  
  7.     <body>  
  8.       <div id = "component_test1">  
  9.          <testcomponent></testcomponent>  
  10.       </div>  
  11.       <div id = "component_test2">  
  12.          <testcomponent></testcomponent>  
  13.       </div>  
  14.       <script src="index.js"></script>  
  15.    </body>  
  16. </html>  

Index.js file:

  1. Vue.component('testcomponent',{  
  2.    template : '<div v-on:mouseover = "changename()" v-on:mouseout = "originalname();"><h1>This Custom Component is created by <span id = "name">{{name}}</span></h1></div>',  
  3.    data: function() {  
  4.       return {  
  5.          name : "Panda"  
  6.       }  
  7.    },  
  8.    methods:{  
  9.       changename : function() {  
  10.          this.name = "Alex";  
  11.       },  
  12.       originalname: function() {  
  13.          this.name = "Panda";  
  14.       }  
  15.    }  
  16. });  
  17. var vm = new Vue({  
  18.    el: '#component_test1'  
  19. });  
  20. var vm1 = new Vue({  
  21.    el: '#component_test2'  
  22. });  

In the above Index.js file, we have added a data in the form of a function that returns an object. The object has a name property, which has assigned the value 'Panda'. See the following template used in the example.

  1. template : '<div v-on:mouseover = "changename()" v-on:mouseout = "originalname();"><h1>This Custom Component is created by <span id = "name">{{name}}</span></h1></div>',  
  2.    data: function() {  
  3.       return {  
  4.          name : "Panda"  
  5.       }  

Here, we are using data as a function in components and we also use its properties the same way as we use with direct Vue instance. Here, we have used two methods, changename and originalname. In changename, we are changing the name property, and in originalname we are resetting it back to the original name.

We have also added two events on the div, mouseover and mouseout. Here, mouseover event is used to call changename method and mouseout event is used to call originalname method.

Now, execute the above program to see the output. After the execution of the program, you will see the following output:

Output:

Vue.js Component

You can see that the output displays the assigned name "Panda" which we have set in the data property in the Index.js file. We have also assigned a mouseover and a mouseout event on the div. So on mouseover, you will see that the name of the components are changed to Alex, and when mouseout, it will remain the same as Panda.

Vue.js Component

Vue.js Dynamic Components

Dynamic component means, a component which location in the application is not defined at buildtime. We don't define it in any Vue.js template. Instead of this, the dynamic component is instantiated and placed in the application at runtime. In Vue.js, a dynamic component is created using the keyword <component></component> and it is bound using a property. Let's take an example to understand it clearly.

Index.html file:

  1. <html>  
  2.    <head>  
  3.       <title>Vue.js Component</title>  
  4.       <link rel="stylesheet" href="index.css">  
  5.         <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>  
  6.     </head>  
  7.     <body>  
  8.       <div id = "databinding">  
  9.          <component v-bind:is = "view"></component>  
  10.       </div>  
  11.       <script type = "text/javascript">  
  12.          var vm = new Vue({  
  13.             el: '#databinding',  
  14.             data: {  
  15.                view: 'component1'  
  16.             },  
  17.             components: {  
  18.                'component1': {  
  19.                  template: '<div><span style = "font-size:25;color:Blue;">This is a Dynamic Component Example</span></div>'  
  20.                }  
  21.             }  
  22.          });  
  23.       </script>  
  24.       <script src="index.js"></script>  
  25.    </body>  
  26. </html>  

Index.js file:

  1. var vm = new Vue({  
  2.    el: '#databinding',  
  3.    data: {  
  4.       view: 'component1'  
  5.    },  
  6.    components: {  
  7.       'component1': {  
  8.          template: '<div><span style = "font-size:25;color:Blue;">This is a Dynamic Component Example</span></div>'  
  9.       }  
  10.    }  
  11. });  

Let's use a simple CSS file to make the output more attractive.

Index.css file:

  1. html, body {  
  2.     margin: 5px;  
  3.     padding: 0;  
  4. }  

After the execution of the program, you will see the following output:

Output:

This is a Dynamic Component Example

Vue.js Component

Example explanation

In the above example, you can see that the Dynamic component is created by using the following syntax.

  1. <component v-bind:is = "view"></component>  

Here, it has v-bind:is = "view", and a value view is assigned to it. View is defined in the Vue instance as follows.

  1. var vm = new Vue({  
  2.    el: '#databinding',  
  3.    data: {  
  4.       view: 'component1'  
  5.    },  
  6.    components: {  
  7.       'component1': {  
  8.          template: '<div><span style = "font-size:25;color:red;">Dynamic Component</span></div>'  
  9.       }  
  10.    }  
  11. });  

After the execution, you can see that the template displays that "This is a Dynamic Component Example" in the browser.

By Source : javatoint

  • Share This:  
  •  Facebook
  •  Twitter
  •  Google+
  •  Stumble
  •  Digg
Email ThisBlogThis!Share to XShare to Facebook

Related Posts:

  • Laravel Vue JS Limitless Parchment Model with Demo Here, I need to impart to you how to make limitless parchment pagination utilizing vue js and laravel 5.6. we will make bit by bit vuejs boundle… Read More
  • Vue.js Render functions  Vue.js Render functionsVue.js recommends us to use templates to build HTML. Here, we can use the render function as a closer-to-the-compi… Read More
  • Vue.js Mixins  Vue.js MixinsIn Vue.js, mixins are a set of defined logic, stored in a predefined way specified by Vue.js. We can use these mixins over a… Read More
  • Vue.js Custom Directives Vue.js Custom DirectivesVue.js directives are used in Vue.js applications to make them reusable and straightforward. Directives are just like i… Read More
  • Vue.js Routing  Vue.js RoutingVue.js does not have a built-in router feature, but you can easily create a single page application that supports routing u… Read More
Newer Post Older Post Home

0 comments:

Post a Comment

Thanks

Meta

Popular Posts

  • Spring boot app (error: method getFirst()) failed to run at local machine, but can run on server
    The Spring boot app can run on the online server. Now, we want to replicate the same app at the local machine but the Spring boot jar file f...
  • Log activity in a Laravel app with Spatie/Laravel-Activitylog
      Requirements This package needs PHP 8.1+ and Laravel 9.0 or higher. The latest version of this package needs PHP 8.2+ and Laravel 8 or hig...
  • Failed to install 'cordova-plugin-firebase': CordovaError: Uh oh
    I had follow these steps to install an configure firebase to my cordova project for cloud messaging. https://medium.com/@felipepucinelli/how...
  • Laravel auth login with phone or email
          <?php     Laravel auth login with phone or email     <? php     namespace App \ Http \ Controllers \ Auth ;         use ...
  • Cashier package and Blade files
    I'm a little confused about this Cashier package. I installed it using the Laravel website (with composer), but noticed there's no...

Categories

  • Ajax (26)
  • Bootstrap (30)
  • DBMS (42)
  • HTML (12)
  • HTML5 (45)
  • JavaScript (10)
  • Jquery (34)
  • Jquery UI (2)
  • JqueryUI (32)
  • Laravel (1017)
  • Laravel Tutorials (23)
  • Laravel-Question (6)
  • Magento (9)
  • Magento 2 (95)
  • MariaDB (1)
  • MySql Tutorial (2)
  • PHP-Interview-Questions (3)
  • Php Question (13)
  • Python (36)
  • RDBMS (13)
  • SQL Tutorial (79)
  • Vue.js Tutorial (68)
  • Wordpress (150)
  • Wordpress Theme (3)
  • codeigniter (108)
  • oops (4)
  • php (853)

Social Media Links

  • Follow on Twitter
  • Like on Facebook
  • Subscribe on Youtube
  • Follow on Instagram

Pages

  • Home
  • Contact Us
  • Privacy Policy
  • About us

Blog Archive

  • September (100)
  • August (50)
  • July (56)
  • June (46)
  • May (59)
  • April (50)
  • March (60)
  • February (42)
  • January (53)
  • December (58)
  • November (61)
  • October (39)
  • September (36)
  • August (36)
  • July (34)
  • June (34)
  • May (36)
  • April (29)
  • March (82)
  • February (1)
  • January (8)
  • December (14)
  • November (41)
  • October (13)
  • September (5)
  • August (48)
  • July (9)
  • June (6)
  • May (119)
  • April (259)
  • March (122)
  • February (368)
  • January (33)
  • October (2)
  • July (11)
  • June (29)
  • May (25)
  • April (168)
  • March (93)
  • February (60)
  • January (28)
  • December (195)
  • November (24)
  • October (40)
  • September (55)
  • August (6)
  • July (48)
  • May (2)
  • January (2)
  • July (6)
  • June (6)
  • February (17)
  • January (69)
  • December (122)
  • November (56)
  • October (92)
  • September (76)
  • August (6)

  • Failed to install 'cordova-plugin-firebase': CordovaError: Uh oh - 9/21/2024
  • pyspark XPath Query Returns Lists Omitting Missing Values Instead of Including None - 9/20/2024
  • SQL REPL from within Python/Sqlalchemy/Psychopg2 - 9/20/2024
  • MySql Explain with Tobias Petry - 9/20/2024
  • How to combine information from different devices into one common abstract virtual disk? [closed] - 9/20/2024

Laravel News

  • Customize URL Handling with Laravel's Macroable URI Class - 5/13/2025
  • Use Passkeys in Your Laravel App - 5/13/2025
  • Laravel Seeder Generator - 5/12/2025
  • Improve HTTP Error Testing with Laravel's requestException() Method - 5/12/2025
  • Track Metrics Effortlessly with Laravel's Context Increment and Decrement Methods - 5/4/2025

Copyright © 2025 CoderFunda | Powered by Blogger
Design by Coderfunda | Blogger Theme by Coderfunda | Distributed By Coderfunda