# Vue

# Basics of Vuejs

# example of creating a vue component

<div class="WaaZC" id="bkmrk-creating-a-vue-compo" style="color: rgb(10, 10, 10); font-family: 'Google Sans', Arial, sans-serif; font-size: 16px; font-style: normal; font-variant-ligatures: normal; font-variant-caps: normal; font-weight: 400; letter-spacing: normal; orphans: 2; text-align: start; text-indent: 0px; text-transform: none; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px; white-space: normal; background-color: rgb(255, 255, 255); text-decoration-thickness: initial; text-decoration-style: initial; text-decoration-color: initial;"><div class="RJPOee EIJn2" style="animation: auto ease 0s 1 normal none running none !important; color: rgb(10, 10, 10);"><div class="rPeykc" data-hveid="CAQQAQ" data-ved="2ahUKEwi1oIbsl5yRAxWPRmwGHWuHDVUQo_EKegQIBBAB" style="margin: 0px 0px 10px;"><span data-huuid="2481158412169634724">Creating a Vue component typically involves defining its template, script (logic), and optional styles within a Single-File Component (SFC) using the `.vue` extension.</span></div></div></div><div class="WaaZC" id="bkmrk-here-is-an-example-o" style="color: rgb(10, 10, 10); font-family: 'Google Sans', Arial, sans-serif; font-size: 16px; font-style: normal; font-variant-ligatures: normal; font-variant-caps: normal; font-weight: 400; letter-spacing: normal; orphans: 2; text-align: start; text-indent: 0px; text-transform: none; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px; white-space: normal; background-color: rgb(255, 255, 255); text-decoration-thickness: initial; text-decoration-style: initial; text-decoration-color: initial;"><div class="RJPOee EIJn2" style="animation: auto ease 0s 1 normal none running none !important; color: rgb(10, 10, 10);"><div class="rPeykc" data-hveid="CAcQAQ" data-ved="2ahUKEwi1oIbsl5yRAxWPRmwGHWuHDVUQo_EKegQIBxAB" style="margin: 10px 0px;"><span data-huuid="2481158412169636598">Here is an example of a simple button counter component:</span></div></div></div><div class="WaaZC" id="bkmrk-buttoncounter.vue" style="color: rgb(10, 10, 10); font-family: 'Google Sans', Arial, sans-serif; font-size: 16px; font-style: normal; font-variant-ligatures: normal; font-variant-caps: normal; font-weight: 400; letter-spacing: normal; orphans: 2; text-align: start; text-indent: 0px; text-transform: none; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px; white-space: normal; background-color: rgb(255, 255, 255); text-decoration-thickness: initial; text-decoration-style: initial; text-decoration-color: initial;"><div class="RJPOee EIJn2" style="animation: auto ease 0s 1 normal none running none !important; color: rgb(10, 10, 10);"><div aria-level="3" class="rPeykc pyPiTc" data-hveid="CAYQAQ" data-ved="2ahUKEwi1oIbsl5yRAxWPRmwGHWuHDVUQo_EKegQIBhAB" role="heading" style="margin: 20px 0px 10px; font-size: 20px; font-weight: 600; line-height: 28px;"><span data-huuid="2481158412169634376">`ButtonCounter.vue`</span></div></div></div><div class="WaaZC" id="bkmrk-code" style="color: rgb(10, 10, 10); font-family: 'Google Sans', Arial, sans-serif; font-size: 16px; font-style: normal; font-variant-ligatures: normal; font-variant-caps: normal; font-weight: 400; letter-spacing: normal; orphans: 2; text-align: start; text-indent: 0px; text-transform: none; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px; white-space: normal; background-color: rgb(255, 255, 255); text-decoration-thickness: initial; text-decoration-style: initial; text-decoration-color: initial;"><div class="RJPOee EIJn2" style="animation: auto ease 0s 1 normal none running none !important; color: rgb(10, 10, 10);"><div jsaction="rcuQ6b:npT2md" jscontroller="JegcYe"><div class="ecCNFc" style="border-image: none 100% / 1 / 0 stretch; border-radius: 8px; font-size: 14px; background: none 0% 0% / auto repeat scroll padding-box border-box rgba(245, 248, 255, 0.5); margin-bottom: 20px; color: rgb(10, 10, 10); border: 0.8px solid rgb(169, 172, 170);"><div class="zYSUYd" style="display: flex; flex-direction: row; overflow: hidden; border-radius: 8px 8px 0px 0px;"><div class="FS7GEb" style="display: flex; flex-direction: column; flex-grow: 1; min-width: 38%; width: 518.4px;"><div class="dDrxod" style="height: 34px; display: flex; justify-content: space-between; align-items: center; background: none 0% 0% / auto repeat scroll padding-box border-box rgb(229, 237, 255); border-bottom: 0.8px solid rgb(169, 172, 170);"><div class="x7ndcb" style="padding-left: 16px; display: flex; align-items: center; color: rgb(10, 10, 10);">Code</div><div aria-live="polite" class="WDoJJe" style="margin-right: 4px; display: flex; align-items: center;"><button aria-label="Copy code to clipboard" class="hqI3tf B4zsNc" data-ved="2ahUKEwi1oIbsl5yRAxWPRmwGHWuHDVUQ9MILegQIAhAB" role="button" style="margin: 0px 2px; background: none; height: 34px; border: none; color: rgb(5, 40, 97); position: relative; top: 2px; outline: 0px;" tabindex="0" title="Copy"><span class="z1asCe wm4nBd" style="display: inline-block; fill: currentcolor; height: 20px; line-height: 20px; position: relative; width: 20px;"><svg aria-hidden="true" enable-background="new 0 0 24 24" focusable="false" height="24" viewbox="0 0 24 24" width="24" xmlns="http://www.w3.org/2000/svg"><g><rect fill="none" height="24" width="24"></rect></g><g><path d="M16,20H5V6H3v14c0,1.1,0.9,2,2,2h11V20z M20,16V4c0-1.1-0.9-2-2-2H9C7.9,2,7,2.9,7,4v12c0,1.1,0.9,2,2,2h9 C19.1,18,20,17.1,20,16z M18,16H9V4h9V16z"></path></g></svg></span></button></div></div></div></div><div class="QQjpRc" style="display: flex; flex-direction: row; overflow: hidden; border-radius: 0px 0px 8px 8px; background: none 0% 0% / auto repeat scroll padding-box border-box rgba(245, 248, 255, 0.5);"><div class="FS7GEb" jsname="zEXxAd" style="display: flex; flex-direction: column; flex-grow: 1; min-width: 38%; width: 518.4px;"></div></div></div></div></div></div>```
<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>
```

<div class="WaaZC" id="bkmrk-explanation%3A" style="color: rgb(10, 10, 10); font-family: 'Google Sans', Arial, sans-serif; font-size: 16px; font-style: normal; font-variant-ligatures: normal; font-variant-caps: normal; font-weight: 400; letter-spacing: normal; orphans: 2; text-align: start; text-indent: 0px; text-transform: none; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px; white-space: normal; background-color: rgb(255, 255, 255); text-decoration-thickness: initial; text-decoration-style: initial; text-decoration-color: initial;"><div class="RJPOee EIJn2" style="animation: auto ease 0s 1 normal none running none !important; color: rgb(10, 10, 10);"><div aria-level="3" class="rPeykc pyPiTc" data-hveid="CA8QAQ" data-ved="2ahUKEwi1oIbsl5yRAxWPRmwGHWuHDVUQo_EKegQIDxAB" role="heading" style="margin: 20px 0px 10px; font-size: 20px; font-weight: 600; line-height: 28px;"><span data-huuid="12453480655118761479">Explanation:</span></div></div></div><div class="WaaZC" id="bkmrk-%3Ctemplate%3E%3A%C2%A0-this-se" style="color: rgb(10, 10, 10); font-family: 'Google Sans', Arial, sans-serif; font-size: 16px; font-style: normal; font-variant-ligatures: normal; font-variant-caps: normal; font-weight: 400; letter-spacing: normal; orphans: 2; text-align: start; text-indent: 0px; text-transform: none; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px; white-space: normal; background-color: rgb(255, 255, 255); text-decoration-thickness: initial; text-decoration-style: initial; text-decoration-color: initial;"><div class="RJPOee EIJn2" style="animation: auto ease 0s 1 normal none running none !important; color: rgb(10, 10, 10);">- <div class="zMgcWd dSKvsb" data-il="" style="padding-bottom: 0px; padding-top: 0px; border-bottom: none;"><div data-crb-p=""><div class="xFTqob" style="flex: 1 1 0%; min-width: 0px;"><div class="Gur8Ad" style="font-size: 16px; font-weight: 500; line-height: 24px; overflow: hidden; padding-bottom: 4px; transition: transform 200ms cubic-bezier(0.2, 0, 0, 1); display: inline;"><span data-huuid="12453480655118759730">`<template>`: </span></div><div class="vM0jzc" style="color: rgb(10, 10, 10); font-size: 16px; line-height: 24px; display: inline;"><span data-huuid="12453480655118759147">This section defines the component's HTML structure. </span><span data-huuid="12453480655118758564">In this case, it's a `<button>` element.</span>
    - <span data-huuid="12453480655118760911">`@click="count++"`: This is a Vue directive that listens for the `click` event on the button and increments the `count` data property when triggered.</span>
    - <span data-huuid="12453480655118759745">`{{ count }}`: This uses text interpolation to display the current value of the `count` data property.</span>
    
    </div></div></div></div>
- <div class="zMgcWd dSKvsb" data-il="" style="padding-bottom: 0px; padding-top: 8px; border-bottom: none;"><div data-crb-p=""><div class="xFTqob" style="flex: 1 1 0%; min-width: 0px;"><div class="Gur8Ad" style="font-size: 16px; font-weight: 500; line-height: 24px; overflow: hidden; padding-bottom: 4px; transition: transform 200ms cubic-bezier(0.2, 0, 0, 1); display: inline;"><span data-huuid="12453480655118758579">`<script>`: </span></div><div class="vM0jzc" style="color: rgb(10, 10, 10); font-size: 16px; line-height: 24px; display: inline;"><span data-huuid="12453480655118757996">This section contains the component's JavaScript logic.</span>
    - <span data-huuid="12453480655118760343">`export default {}`: This exports a JavaScript object that defines the component's options.</span>
    - <span data-huuid="12453480655118759177">`data()`: This function returns an object containing the component's reactive data properties. </span><span data-huuid="12453480655118758594">Here, `count` is initialized to `0`.</span>
    
    </div></div></div></div>
- <div class="zMgcWd dSKvsb" data-il="" style="padding-bottom: 0px; padding-top: 8px; border-bottom: none;"><div data-crb-p=""><div class="xFTqob" style="flex: 1 1 0%; min-width: 0px;"><div class="Gur8Ad" style="font-size: 16px; font-weight: 500; line-height: 24px; overflow: hidden; padding-bottom: 4px; transition: transform 200ms cubic-bezier(0.2, 0, 0, 1); display: inline;"><span data-huuid="12453480655118761524">`<style scoped>`: </span></div><div class="vM0jzc" style="color: rgb(10, 10, 10); font-size: 16px; line-height: 24px; display: inline;"><span data-huuid="12453480655118760941">This section defines the component's CSS styles.</span>
    - <span data-huuid="12453480655118759192">`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.</span>
    
    </div></div></div></div>

</div></div><div class="WaaZC" id="bkmrk-using-the-component-" style="color: rgb(10, 10, 10); font-family: 'Google Sans', Arial, sans-serif; font-size: 16px; font-style: normal; font-variant-ligatures: normal; font-variant-caps: normal; font-weight: 400; letter-spacing: normal; orphans: 2; text-align: start; text-indent: 0px; text-transform: none; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px; white-space: normal; background-color: rgb(255, 255, 255); text-decoration-thickness: initial; text-decoration-style: initial; text-decoration-color: initial;"><div class="RJPOee EIJn2" style="animation: auto ease 0s 1 normal none running none !important; color: rgb(10, 10, 10);"><div aria-level="3" class="rPeykc pyPiTc" data-hveid="CC0QAQ" data-ved="2ahUKEwi1oIbsl5yRAxWPRmwGHWuHDVUQo_EKegQILRAB" role="heading" style="margin: 20px 0px 10px; font-size: 20px; font-weight: 600; line-height: 28px;"><span data-huuid="15949596350559074523">Using the component in `App.vue` (or another parent component):</span></div></div></div><div class="WaaZC" id="bkmrk-code-1" style="color: rgb(10, 10, 10); font-family: 'Google Sans', Arial, sans-serif; font-size: 16px; font-style: normal; font-variant-ligatures: normal; font-variant-caps: normal; font-weight: 400; letter-spacing: normal; orphans: 2; text-align: start; text-indent: 0px; text-transform: none; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px; white-space: normal; background-color: rgb(255, 255, 255); text-decoration-thickness: initial; text-decoration-style: initial; text-decoration-color: initial;"><div class="RJPOee EIJn2" style="animation: auto ease 0s 1 normal none running none !important; color: rgb(10, 10, 10);"><div jsaction="rcuQ6b:npT2md" jscontroller="JegcYe"><div class="ecCNFc" style="border-image: none 100% / 1 / 0 stretch; border-radius: 8px; font-size: 14px; background: none 0% 0% / auto repeat scroll padding-box border-box rgba(245, 248, 255, 0.5); margin-bottom: 20px; color: rgb(10, 10, 10); border: 0.8px solid rgb(169, 172, 170);"><div class="zYSUYd" style="display: flex; flex-direction: row; overflow: hidden; border-radius: 8px 8px 0px 0px;"><div class="FS7GEb" style="display: flex; flex-direction: column; flex-grow: 1; min-width: 38%; width: 518.4px;"><div class="dDrxod" style="height: 34px; display: flex; justify-content: space-between; align-items: center; background: none 0% 0% / auto repeat scroll padding-box border-box rgb(229, 237, 255); border-bottom: 0.8px solid rgb(169, 172, 170);"><div class="x7ndcb" style="padding-left: 16px; display: flex; align-items: center; color: rgb(10, 10, 10);">Code</div><div aria-live="polite" class="WDoJJe" style="margin-right: 4px; display: flex; align-items: center;"><button aria-label="Copy code to clipboard" class="hqI3tf B4zsNc" data-ved="2ahUKEwi1oIbsl5yRAxWPRmwGHWuHDVUQ9MILegQIKxAB" role="button" style="margin: 0px 2px; background: none; height: 34px; border: none; color: rgb(5, 40, 97); position: relative; top: 2px; outline: 0px;" tabindex="0" title="Copy"><span class="z1asCe wm4nBd" style="display: inline-block; fill: currentcolor; height: 20px; line-height: 20px; position: relative; width: 20px;"><svg aria-hidden="true" enable-background="new 0 0 24 24" focusable="false" height="24" viewbox="0 0 24 24" width="24" xmlns="http://www.w3.org/2000/svg"><g><rect fill="none" height="24" width="24"></rect></g><g><path d="M16,20H5V6H3v14c0,1.1,0.9,2,2,2h11V20z M20,16V4c0-1.1-0.9-2-2-2H9C7.9,2,7,2.9,7,4v12c0,1.1,0.9,2,2,2h9 C19.1,18,20,17.1,20,16z M18,16H9V4h9V16z"></path></g></svg></span></button></div></div></div></div><div class="QQjpRc" style="display: flex; flex-direction: row; overflow: hidden; border-radius: 0px 0px 8px 8px; background: none 0% 0% / auto repeat scroll padding-box border-box rgba(245, 248, 255, 0.5);"><div class="FS7GEb" jsname="zEXxAd" style="display: flex; flex-direction: column; flex-grow: 1; min-width: 38%; width: 518.4px;"></div></div></div></div></div></div>```
<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>
```

<div class="WaaZC" id="bkmrk-explanation%3A-1" style="color: rgb(10, 10, 10); font-family: 'Google Sans', Arial, sans-serif; font-size: 16px; font-style: normal; font-variant-ligatures: normal; font-variant-caps: normal; font-weight: 400; letter-spacing: normal; orphans: 2; text-align: start; text-indent: 0px; text-transform: none; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px; white-space: normal; background-color: rgb(255, 255, 255); text-decoration-thickness: initial; text-decoration-style: initial; text-decoration-color: initial;"><div class="RJPOee EIJn2" style="animation: auto ease 0s 1 normal none running none !important; color: rgb(10, 10, 10);"><div aria-level="3" class="rPeykc pyPiTc" data-hveid="CDEQAQ" data-ved="2ahUKEwi1oIbsl5yRAxWPRmwGHWuHDVUQo_EKegQIMRAB" role="heading" style="margin: 20px 0px 10px; font-size: 20px; font-weight: 600; line-height: 28px;"><span data-huuid="9756962595764140254">Explanation:</span></div></div></div><div class="WaaZC" id="bkmrk-import-buttoncounter" style="color: rgb(10, 10, 10); font-family: 'Google Sans', Arial, sans-serif; font-size: 16px; font-style: normal; font-variant-ligatures: normal; font-variant-caps: normal; font-weight: 400; letter-spacing: normal; orphans: 2; text-align: start; text-indent: 0px; text-transform: none; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px; white-space: normal; background-color: rgb(255, 255, 255); text-decoration-thickness: initial; text-decoration-style: initial; text-decoration-color: initial;"><div class="RJPOee EIJn2" style="animation: auto ease 0s 1 normal none running none !important; color: rgb(10, 10, 10);">- <span data-huuid="9756962595764138383">`import ButtonCounter from './components/ButtonCounter.vue';`: </span><span data-huuid="9756962595764140490">This line imports the `ButtonCounter` component.</span>
- <span data-huuid="9756962595764140608">`components: { ButtonCounter }`: </span><span data-huuid="9756962595764138619">This registers the `ButtonCounter` component, making it available for use within the `App` component's template.</span>
- <span data-huuid="9756962595764138737">`<ButtonCounter />`: </span><span data-huuid="9756962595764140844">This is how you use the imported component within your template, treating it like a custom HTML tag. </span><span data-huuid="9756962595764138855">Each instance of `<ButtonCounter />` will have its own independent `count` data</span>

</div></div>

# create a new vue instance

<div class="WaaZC" id="bkmrk-a-new-vue-instance-i" style="color: rgb(10, 10, 10); font-family: 'Google Sans', Arial, sans-serif; font-size: 16px; font-style: normal; font-variant-ligatures: normal; font-variant-caps: normal; font-weight: 400; letter-spacing: normal; orphans: 2; text-align: start; text-indent: 0px; text-transform: none; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px; white-space: normal; background-color: rgb(255, 255, 255); text-decoration-thickness: initial; text-decoration-style: initial; text-decoration-color: initial;"><div class="RJPOee EIJn2" style="animation: auto ease 0s 1 normal none running none !important; color: rgb(10, 10, 10);"><div class="rPeykc" data-hveid="CAUQAQ" data-ved="2ahUKEwjVy7Xtl5yRAxWBTGcHHWMAOkEQo_EKegQIBRAB" style="margin: 0px 0px 10px;"><span data-huuid="16543397681560561681">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. </span><span data-huuid="16543397681560563042">The instance is then mounted to a specific HTML element in your document using the `mount` method.</span></div></div></div><div class="WaaZC" id="bkmrk-here%27s-how-to-create" style="color: rgb(10, 10, 10); font-family: 'Google Sans', Arial, sans-serif; font-size: 16px; font-style: normal; font-variant-ligatures: normal; font-variant-caps: normal; font-weight: 400; letter-spacing: normal; orphans: 2; text-align: start; text-indent: 0px; text-transform: none; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px; white-space: normal; background-color: rgb(255, 255, 255); text-decoration-thickness: initial; text-decoration-style: initial; text-decoration-color: initial;"><div class="RJPOee EIJn2" style="animation: auto ease 0s 1 normal none running none !important; color: rgb(10, 10, 10);"><div class="rPeykc" data-hveid="CAQQAQ" data-ved="2ahUKEwjVy7Xtl5yRAxWBTGcHHWMAOkEQo_EKegQIBBAB" style="margin: 10px 0px;"><span data-huuid="16543397681560561668">Here's how to create a new Vue instance: </span><span data-huuid="831541306596727209">HTML Structure.</span></div></div></div><div class="WaaZC" id="bkmrk-create-an-html-file-" style="color: rgb(10, 10, 10); font-family: 'Google Sans', Arial, sans-serif; font-size: 16px; font-style: normal; font-variant-ligatures: normal; font-variant-caps: normal; font-weight: 400; letter-spacing: normal; orphans: 2; text-align: start; text-indent: 0px; text-transform: none; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px; white-space: normal; background-color: rgb(255, 255, 255); text-decoration-thickness: initial; text-decoration-style: initial; text-decoration-color: initial;"><div class="RJPOee EIJn2" style="animation: auto ease 0s 1 normal none running none !important; color: rgb(10, 10, 10);"><div class="rPeykc" data-hveid="CAwQAQ" data-ved="2ahUKEwjVy7Xtl5yRAxWBTGcHHWMAOkEQo_EKegQIDBAB" style="margin: 10px 0px;"><span data-huuid="16543397681560560281">Create an HTML file with a `div` element that will serve as the mounting point for your Vue application.</span></div></div></div><div class="WaaZC" id="bkmrk-code" style="color: rgb(10, 10, 10); font-family: 'Google Sans', Arial, sans-serif; font-size: 16px; font-style: normal; font-variant-ligatures: normal; font-variant-caps: normal; font-weight: 400; letter-spacing: normal; orphans: 2; text-align: start; text-indent: 0px; text-transform: none; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px; white-space: normal; background-color: rgb(255, 255, 255); text-decoration-thickness: initial; text-decoration-style: initial; text-decoration-color: initial;"><div class="RJPOee EIJn2" style="animation: auto ease 0s 1 normal none running none !important; color: rgb(10, 10, 10);"><div jsaction="rcuQ6b:npT2md" jscontroller="JegcYe"><div class="ecCNFc" style="border-image: none 100% / 1 / 0 stretch; border-radius: 8px; font-size: 14px; background: none 0% 0% / auto repeat scroll padding-box border-box rgba(245, 248, 255, 0.5); margin-bottom: 20px; color: rgb(10, 10, 10); border: 0.8px solid rgb(169, 172, 170);"><div class="zYSUYd" style="display: flex; flex-direction: row; overflow: hidden; border-radius: 8px 8px 0px 0px;"><div class="FS7GEb" style="display: flex; flex-direction: column; flex-grow: 1; min-width: 38%; width: 518.4px;"><div class="dDrxod" style="height: 34px; display: flex; justify-content: space-between; align-items: center; background: none 0% 0% / auto repeat scroll padding-box border-box rgb(229, 237, 255); border-bottom: 0.8px solid rgb(169, 172, 170);"><div class="x7ndcb" style="padding-left: 16px; display: flex; align-items: center; color: rgb(10, 10, 10);">Code</div><div aria-live="polite" class="WDoJJe" style="margin-right: 4px; display: flex; align-items: center;"><button aria-label="Copy code to clipboard" class="hqI3tf B4zsNc" data-ved="2ahUKEwjVy7Xtl5yRAxWBTGcHHWMAOkEQ9MILegQIDhAB" role="button" style="margin: 0px 2px; background: none; height: 34px; border: none; color: rgb(5, 40, 97); position: relative; top: 2px; outline: 0px;" tabindex="0" title="Copy"><span class="z1asCe wm4nBd" style="display: inline-block; fill: currentcolor; height: 20px; line-height: 20px; position: relative; width: 20px;"><svg aria-hidden="true" enable-background="new 0 0 24 24" focusable="false" height="24" viewbox="0 0 24 24" width="24" xmlns="http://www.w3.org/2000/svg"><g><rect fill="none" height="24" width="24"></rect></g><g><path d="M16,20H5V6H3v14c0,1.1,0.9,2,2,2h11V20z M20,16V4c0-1.1-0.9-2-2-2H9C7.9,2,7,2.9,7,4v12c0,1.1,0.9,2,2,2h9 C19.1,18,20,17.1,20,16z M18,16H9V4h9V16z"></path></g></svg></span></button></div></div></div></div><div class="QQjpRc" style="display: flex; flex-direction: row; overflow: hidden; border-radius: 0px 0px 8px 8px; background: none 0% 0% / auto repeat scroll padding-box border-box rgba(245, 248, 255, 0.5);"><div class="FS7GEb" jsname="zEXxAd" style="display: flex; flex-direction: column; flex-grow: 1; min-width: 38%; width: 518.4px;"></div></div></div></div></div></div>```
    
    <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>
```

<div class="WaaZC" id="bkmrk-javascript-file-%28app" style="color: rgb(10, 10, 10); font-family: 'Google Sans', Arial, sans-serif; font-size: 16px; font-style: normal; font-variant-ligatures: normal; font-variant-caps: normal; font-weight: 400; letter-spacing: normal; orphans: 2; text-align: start; text-indent: 0px; text-transform: none; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px; white-space: normal; background-color: rgb(255, 255, 255); text-decoration-thickness: initial; text-decoration-style: initial; text-decoration-color: initial;"><div class="RJPOee EIJn2" style="animation: auto ease 0s 1 normal none running none !important; color: rgb(10, 10, 10);"><div class="rPeykc" data-hveid="CBEQAQ" data-ved="2ahUKEwjVy7Xtl5yRAxWBTGcHHWMAOkEQo_EKegQIERAB" style="margin: 10px 0px;"><span data-huuid="831541306596726366">JavaScript File (app.js).</span></div></div></div><div class="WaaZC" id="bkmrk-create-a-javascript-" style="color: rgb(10, 10, 10); font-family: 'Google Sans', Arial, sans-serif; font-size: 16px; font-style: normal; font-variant-ligatures: normal; font-variant-caps: normal; font-weight: 400; letter-spacing: normal; orphans: 2; text-align: start; text-indent: 0px; text-transform: none; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px; white-space: normal; background-color: rgb(255, 255, 255); text-decoration-thickness: initial; text-decoration-style: initial; text-decoration-color: initial;"><div class="RJPOee EIJn2" style="animation: auto ease 0s 1 normal none running none !important; color: rgb(10, 10, 10);"><div class="rPeykc" data-hveid="CBQQAQ" data-ved="2ahUKEwjVy7Xtl5yRAxWBTGcHHWMAOkEQo_EKegQIFBAB" style="margin: 10px 0px;"><span data-huuid="7735074046416113987">Create a JavaScript file (e.g., `app.js`) and use `createApp` to define and mount your Vue instance.</span></div></div></div><div class="WaaZC" id="bkmrk-javascript" style="color: rgb(10, 10, 10); font-family: 'Google Sans', Arial, sans-serif; font-size: 16px; font-style: normal; font-variant-ligatures: normal; font-variant-caps: normal; font-weight: 400; letter-spacing: normal; orphans: 2; text-align: start; text-indent: 0px; text-transform: none; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px; white-space: normal; background-color: rgb(255, 255, 255); text-decoration-thickness: initial; text-decoration-style: initial; text-decoration-color: initial;"><div class="RJPOee EIJn2" style="animation: auto ease 0s 1 normal none running none !important; color: rgb(10, 10, 10);"><div jsaction="rcuQ6b:npT2md" jscontroller="JegcYe"><div class="ecCNFc" style="border-image: none 100% / 1 / 0 stretch; border-radius: 8px; font-size: 14px; background: none 0% 0% / auto repeat scroll padding-box border-box rgba(245, 248, 255, 0.5); margin-bottom: 20px; color: rgb(10, 10, 10); border: 0.8px solid rgb(169, 172, 170);"><div class="zYSUYd" style="display: flex; flex-direction: row; overflow: hidden; border-radius: 8px 8px 0px 0px;"><div class="FS7GEb" style="display: flex; flex-direction: column; flex-grow: 1; min-width: 38%; width: 518.4px;"><div class="dDrxod" style="height: 34px; display: flex; justify-content: space-between; align-items: center; background: none 0% 0% / auto repeat scroll padding-box border-box rgb(229, 237, 255); border-bottom: 0.8px solid rgb(169, 172, 170);"><div class="x7ndcb" style="padding-left: 16px; display: flex; align-items: center; color: rgb(10, 10, 10);">JavaScript</div><div aria-live="polite" class="WDoJJe" style="margin-right: 4px; display: flex; align-items: center;"><button aria-label="Copy code to clipboard" class="hqI3tf B4zsNc" data-ved="2ahUKEwjVy7Xtl5yRAxWBTGcHHWMAOkEQ9MILegQIFhAB" role="button" style="margin: 0px 2px; background: none; height: 34px; border: none; color: rgb(5, 40, 97); position: relative; top: 2px; outline: 0px;" tabindex="0" title="Copy"><span class="z1asCe wm4nBd" style="display: inline-block; fill: currentcolor; height: 20px; line-height: 20px; position: relative; width: 20px;"><svg aria-hidden="true" enable-background="new 0 0 24 24" focusable="false" height="24" viewbox="0 0 24 24" width="24" xmlns="http://www.w3.org/2000/svg"><g><rect fill="none" height="24" width="24"></rect></g><g><path d="M16,20H5V6H3v14c0,1.1,0.9,2,2,2h11V20z M20,16V4c0-1.1-0.9-2-2-2H9C7.9,2,7,2.9,7,4v12c0,1.1,0.9,2,2,2h9 C19.1,18,20,17.1,20,16z M18,16H9V4h9V16z"></path></g></svg></span></button></div></div></div></div><div class="QQjpRc" style="display: flex; flex-direction: row; overflow: hidden; border-radius: 0px 0px 8px 8px; background: none 0% 0% / auto repeat scroll padding-box border-box rgba(245, 248, 255, 0.5);"><div class="FS7GEb" jsname="zEXxAd" style="display: flex; flex-direction: column; flex-grow: 1; min-width: 38%; width: 518.4px;"></div></div></div></div></div></div>```
    const app = Vue.createApp({
        data() {
            return {
                message: 'Hello Vue!'
            };
        },
        methods: {
            greet() {
                alert(this.message);
            }
        }
    });

    app.mount('#app');
```

<div class="WaaZC" id="bkmrk-in-this-example%3A" style="color: rgb(10, 10, 10); font-family: 'Google Sans', Arial, sans-serif; font-size: 16px; font-style: normal; font-variant-ligatures: normal; font-variant-caps: normal; font-weight: 400; letter-spacing: normal; orphans: 2; text-align: start; text-indent: 0px; text-transform: none; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px; white-space: normal; background-color: rgb(255, 255, 255); text-decoration-thickness: initial; text-decoration-style: initial; text-decoration-color: initial;"><div class="RJPOee EIJn2" style="animation: auto ease 0s 1 normal none running none !important; color: rgb(10, 10, 10);"><div class="rPeykc uP58nb" data-hveid="CBkQAQ" data-ved="2ahUKEwjVy7Xtl5yRAxWBTGcHHWMAOkEQo_EKegQIGRAB" style="margin: 20px 0px 10px; font-size: 20px; font-weight: 600; line-height: 28px;"><span data-huuid="3525439003923448572"><span aria-level="2" role="heading">In this example:</span></span></div></div></div><div class="WaaZC" id="bkmrk-vue.createapp%28%7B...%7D%29" style="color: rgb(10, 10, 10); font-family: 'Google Sans', Arial, sans-serif; font-size: 16px; font-style: normal; font-variant-ligatures: normal; font-variant-caps: normal; font-weight: 400; letter-spacing: normal; orphans: 2; text-align: start; text-indent: 0px; text-transform: none; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px; white-space: normal; background-color: rgb(255, 255, 255); text-decoration-thickness: initial; text-decoration-style: initial; text-decoration-color: initial;"><div class="RJPOee EIJn2" style="animation: auto ease 0s 1 normal none running none !important; color: rgb(10, 10, 10);">- <span data-huuid="3525439003923450763">`Vue.createApp({...})` initializes a new Vue application instance.</span>
- <span data-huuid="3525439003923449493">The `data` option defines reactive data properties (e.g., `message`).</span>
- <span data-huuid="3525439003923448223">The `methods` option defines functions that can be called within the application (e.g., `greet`).</span>
- <span data-huuid="3525439003923451049">`app.mount('#app')` connects the Vue instance to the HTML element with the ID `app`</span>

</div></div></body></html>

# v-bind to bind multiple attributes

<div class="WaaZC" id="bkmrk-to-bind-multiple-att" style="color: rgb(10, 10, 10); font-family: 'Google Sans', Arial, sans-serif; font-size: 16px; font-style: normal; font-variant-ligatures: normal; font-variant-caps: normal; font-weight: 400; letter-spacing: normal; orphans: 2; text-align: start; text-indent: 0px; text-transform: none; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px; white-space: normal; background-color: rgb(255, 255, 255); text-decoration-thickness: initial; text-decoration-style: initial; text-decoration-color: initial;"><div class="RJPOee EIJn2" style="animation: auto ease 0s 1 normal none running none !important; color: rgb(10, 10, 10);"><div class="rPeykc" data-hveid="CAUQAQ" data-ved="2ahUKEwi52tT7mpyRAxUDSmwGHeZFIEIQo_EKegQIBRAB" style="margin: 0px 0px 10px;"><span data-huuid="9567516544162861815">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.</span></div></div></div><div class="WaaZC" id="bkmrk-example%3A" style="color: rgb(10, 10, 10); font-family: 'Google Sans', Arial, sans-serif; font-size: 16px; font-style: normal; font-variant-ligatures: normal; font-variant-caps: normal; font-weight: 400; letter-spacing: normal; orphans: 2; text-align: start; text-indent: 0px; text-transform: none; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px; white-space: normal; background-color: rgb(255, 255, 255); text-decoration-thickness: initial; text-decoration-style: initial; text-decoration-color: initial;"><div class="RJPOee EIJn2" style="animation: auto ease 0s 1 normal none running none !important; color: rgb(10, 10, 10);"><div aria-level="3" class="rPeykc pyPiTc" data-hveid="CAQQAQ" data-ved="2ahUKEwi52tT7mpyRAxUDSmwGHeZFIEIQo_EKegQIBBAB" role="heading" style="margin: 20px 0px 10px; font-size: 20px; font-weight: 600; line-height: 28px;"><span data-huuid="9567516544162862537">Example:</span></div></div></div><div class="WaaZC" id="bkmrk-consider-a-scenario-" style="color: rgb(10, 10, 10); font-family: 'Google Sans', Arial, sans-serif; font-size: 16px; font-style: normal; font-variant-ligatures: normal; font-variant-caps: normal; font-weight: 400; letter-spacing: normal; orphans: 2; text-align: start; text-indent: 0px; text-transform: none; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px; white-space: normal; background-color: rgb(255, 255, 255); text-decoration-thickness: initial; text-decoration-style: initial; text-decoration-color: initial;"><div class="RJPOee EIJn2" style="animation: auto ease 0s 1 normal none running none !important; color: rgb(10, 10, 10);"><div class="rPeykc" data-hveid="CAgQAQ" data-ved="2ahUKEwi52tT7mpyRAxUDSmwGHeZFIEIQo_EKegQICBAB" style="margin: 10px 0px;"><span data-huuid="9567516544162863259">Consider a scenario where you want to dynamically bind the `id`, `class`, and `title` attributes to an HTML element.</span></div></div></div><div class="WaaZC" id="bkmrk-code" style="color: rgb(10, 10, 10); font-family: 'Google Sans', Arial, sans-serif; font-size: 16px; font-style: normal; font-variant-ligatures: normal; font-variant-caps: normal; font-weight: 400; letter-spacing: normal; orphans: 2; text-align: start; text-indent: 0px; text-transform: none; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px; white-space: normal; background-color: rgb(255, 255, 255); text-decoration-thickness: initial; text-decoration-style: initial; text-decoration-color: initial;"><div class="RJPOee EIJn2" style="animation: auto ease 0s 1 normal none running none !important; color: rgb(10, 10, 10);"><div jsaction="rcuQ6b:npT2md" jscontroller="JegcYe"><div class="ecCNFc" style="border-image: none 100% / 1 / 0 stretch; border-radius: 8px; font-size: 14px; background: none 0% 0% / auto repeat scroll padding-box border-box rgba(245, 248, 255, 0.5); margin-bottom: 20px; color: rgb(10, 10, 10); border: 0.8px solid rgb(169, 172, 170);"><div class="zYSUYd" style="display: flex; flex-direction: row; overflow: hidden; border-radius: 8px 8px 0px 0px;"><div class="FS7GEb" style="display: flex; flex-direction: column; flex-grow: 1; min-width: 38%; width: 518.4px;"><div class="dDrxod" style="height: 34px; display: flex; justify-content: space-between; align-items: center; background: none 0% 0% / auto repeat scroll padding-box border-box rgb(229, 237, 255); border-bottom: 0.8px solid rgb(169, 172, 170);"><div class="x7ndcb" style="padding-left: 16px; display: flex; align-items: center; color: rgb(10, 10, 10);">Code</div><div aria-live="polite" class="WDoJJe" style="margin-right: 4px; display: flex; align-items: center;"><button aria-label="Copy code to clipboard" class="hqI3tf B4zsNc" data-ved="2ahUKEwi52tT7mpyRAxUDSmwGHeZFIEIQ9MILegQIAhAB" role="button" style="margin: 0px 2px; background: none; height: 34px; border: none; color: rgb(5, 40, 97); position: relative; top: 2px; outline: 0px;" tabindex="0" title="Copy"><span class="z1asCe wm4nBd" style="display: inline-block; fill: currentcolor; height: 20px; line-height: 20px; position: relative; width: 20px;"><svg aria-hidden="true" enable-background="new 0 0 24 24" focusable="false" height="24" viewbox="0 0 24 24" width="24" xmlns="http://www.w3.org/2000/svg"><g><rect fill="none" height="24" width="24"></rect></g><g><path d="M16,20H5V6H3v14c0,1.1,0.9,2,2,2h11V20z M20,16V4c0-1.1-0.9-2-2-2H9C7.9,2,7,2.9,7,4v12c0,1.1,0.9,2,2,2h9 C19.1,18,20,17.1,20,16z M18,16H9V4h9V16z"></path></g></svg></span></button></div></div></div></div><div class="QQjpRc" style="display: flex; flex-direction: row; overflow: hidden; border-radius: 0px 0px 8px 8px; background: none 0% 0% / auto repeat scroll padding-box border-box rgba(245, 248, 255, 0.5);"><div class="FS7GEb" jsname="zEXxAd" style="display: flex; flex-direction: column; flex-grow: 1; min-width: 38%; width: 518.4px;"></div></div></div></div></div></div>```
<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>
```

<div class="WaaZC" id="bkmrk-in-this-example%3A" style="color: rgb(10, 10, 10); font-family: 'Google Sans', Arial, sans-serif; font-size: 16px; font-style: normal; font-variant-ligatures: normal; font-variant-caps: normal; font-weight: 400; letter-spacing: normal; orphans: 2; text-align: start; text-indent: 0px; text-transform: none; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px; white-space: normal; background-color: rgb(255, 255, 255); text-decoration-thickness: initial; text-decoration-style: initial; text-decoration-color: initial;"><div class="RJPOee EIJn2" style="animation: auto ease 0s 1 normal none running none !important; color: rgb(10, 10, 10);"><div class="rPeykc uP58nb" data-hveid="CA8QAQ" data-ved="2ahUKEwi52tT7mpyRAxUDSmwGHeZFIEIQo_EKegQIDxAB" style="margin: 20px 0px 10px; font-size: 20px; font-weight: 600; line-height: 28px;"><span data-huuid="12631874522732610707"><span aria-level="2" role="heading">In this example:</span></span></div></div></div><div class="WaaZC" id="bkmrk-a%C2%A0div%C2%A0with-the-id%C2%A0ap" style="color: rgb(10, 10, 10); font-family: 'Google Sans', Arial, sans-serif; font-size: 16px; font-style: normal; font-variant-ligatures: normal; font-variant-caps: normal; font-weight: 400; letter-spacing: normal; orphans: 2; text-align: start; text-indent: 0px; text-transform: none; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px; white-space: normal; background-color: rgb(255, 255, 255); text-decoration-thickness: initial; text-decoration-style: initial; text-decoration-color: initial;"><div class="RJPOee EIJn2" style="animation: auto ease 0s 1 normal none running none !important; color: rgb(10, 10, 10);">- <span data-huuid="12631874522732613554">A `div` with the ID `app` serves as the root element for the Vue application.</span>
- <span data-huuid="12631874522732611356">A `button` element uses `v-bind="buttonAttributes"` to bind multiple attributes.</span>
- <span data-huuid="12631874522732613254">In the Vue instance's `data` option, an object named `buttonAttributes` is defined.</span>
- <span data-huuid="12631874522732611056">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.</span>
- <span data-huuid="12631874522732612954">Vue automatically applies these attributes to the `button` element when the component is mounted.</span>

</div></div><div class="WaaZC" id="bkmrk-this-approach-simpli" style="color: rgb(10, 10, 10); font-family: 'Google Sans', Arial, sans-serif; font-size: 16px; font-style: normal; font-variant-ligatures: normal; font-variant-caps: normal; font-weight: 400; letter-spacing: normal; orphans: 2; text-align: start; text-indent: 0px; text-transform: none; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px; white-space: normal; background-color: rgb(255, 255, 255); text-decoration-thickness: initial; text-decoration-style: initial; text-decoration-color: initial;"><div class="RJPOee EIJn2" style="animation: auto ease 0s 1 normal none running none !important; color: rgb(10, 10, 10);"><div class="rPeykc" data-hveid="CB4QAQ" data-ved="2ahUKEwi52tT7mpyRAxUDSmwGHeZFIEIQo_EKegQIHhAB" style="margin: 10px 0px;"><span data-huuid="12683186159934415888">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</span></div></div></div>