Vue


Basics of Vuejs


Basics of Vuejs

example of creating a vue component

Creating a Vue component typically involves defining its template, script (logic), and optional styles within a Single-File Component (SFC) using the .vue extension.
Here is an example of a simple button counter component:
ButtonCounter.vue
Code
<template>
  <button @click="count++">You clicked me {{ count }} times.</button>
</template>

<script>
export default {
  data() {
    return {
      count: 0
    }
  }
}
</script>

<style scoped>
button {
  background-color: #4CAF50; /* Green */
  border: none;
  color: white;
  padding: 15px 32px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 16px;
  margin: 4px 2px;
  cursor: pointer;
  border-radius: 8px;
}
</style>
Explanation:
  • <template>: 
    This section defines the component's HTML structure. In this case, it's a <button> element.
    • @click="count++": This is a Vue directive that listens for the click event on the button and increments the count data property when triggered.
    • {{ count }}: This uses text interpolation to display the current value of the count data property.
  • <script>: 
    This section contains the component's JavaScript logic.
    • export default {}: This exports a JavaScript object that defines the component's options.
    • data(): This function returns an object containing the component's reactive data properties. Here, count is initialized to 0.
  • <style scoped>: 
    This section defines the component's CSS styles.
    • scoped: This attribute ensures that the styles defined within this <style> block are only applied to this specific component and do not globally affect other parts of your application.
Using the component in App.vue (or another parent component):
Code
<template>
  <div id="app">
    <h1>My Vue App</h1>
    <ButtonCounter />
    <ButtonCounter /> <!-- You can reuse components -->
  </div>
</template>

<script>
import ButtonCounter from './components/ButtonCounter.vue';

export default {
  components: {
    ButtonCounter
  }
}
</script>
Explanation:
  • import ButtonCounter from './components/ButtonCounter.vue';: This line imports the ButtonCounter component.
  • components: { ButtonCounter }: This registers the ButtonCounter component, making it available for use within the App component's template.
  • <ButtonCounter />: This is how you use the imported component within your template, treating it like a custom HTML tag. Each instance of <ButtonCounter /> will have its own independent count data
Basics of Vuejs

create a new vue instance

A new Vue instance is created using the createApp method, which is the standard approach in Vue 3. This method takes an options object as an argument, where you define the application's data, methods, components, and other configurations. The instance is then mounted to a specific HTML element in your document using the mount method.
Here's how to create a new Vue instance: HTML Structure.
Create an HTML file with a div element that will serve as the mounting point for your Vue application.
Code
    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>My Vue App</title>
    </head>
    <body>
        <div id="app">
            <!-- Vue app will be rendered here -->
        </div>
        <script src="https://unpkg.com/vue@next"></script>
        <script src="app.js"></script>
    </body>
    </html>
JavaScript File (app.js).
Create a JavaScript file (e.g., app.js) and use createApp to define and mount your Vue instance.
JavaScript
    const app = Vue.createApp({
        data() {
            return {
                message: 'Hello Vue!'
            };
        },
        methods: {
            greet() {
                alert(this.message);
            }
        }
    });

    app.mount('#app');
In this example:
  • Vue.createApp({...}) initializes a new Vue application instance.
  • The data option defines reactive data properties (e.g., message).
  • The methods option defines functions that can be called within the application (e.g., greet).
  • app.mount('#app') connects the Vue instance to the HTML element with the ID app
Basics of Vuejs

v-bind to bind multiple attributes

To bind multiple attributes using v-bind in Vue.js, you can pass an object where the keys are the attribute names and the values are the corresponding data properties or expressions.
Example:
Consider a scenario where you want to dynamically bind the id, class, and title attributes to an HTML element.
Code
<div id="app">
  <button v-bind="buttonAttributes">Click Me</button>
</div>

<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
<script>
  const app = Vue.createApp({
    data() {
      return {
        buttonAttributes: {
          id: 'my-button',
          class: 'primary-button',
          title: 'This is a dynamic button',
          'data-custom': 'some-value' // Example of a data attribute
        }
      };
    }
  });

  app.mount('#app');
</script>
In this example:
  • A div with the ID app serves as the root element for the Vue application.
  • A button element uses v-bind="buttonAttributes" to bind multiple attributes.
  • In the Vue instance's data option, an object named buttonAttributes is defined.
  • This buttonAttributes object contains key-value pairs where the keys (id, class, title, data-custom) represent the attribute names, and the values are the desired values for those attributes.
  • Vue automatically applies these attributes to the button element when the component is mounted.
This approach simplifies binding multiple attributes, especially when dealing with a large number of dynamic attributes or when the attributes are logically grouped together in your data