Ex No: 10 ADDITION USING CLICK EVENT IN VUE.JS
Aim: To perform addition using click event in Vue.js.
Procedure
Step1: Install Node Package Manager (npm) in the system.
Step2: Create New Vue.js project using "npm create vue@latest".
Step3: Open the created project folder and install the dependencies using "npm install".
Step4: Create two components "AppTitle.vue" and "CalcElm.vue" place the components in projects src>components folder.
Step6: Include the created components in "App.vue" file and provide proper template and CSS to show the compnents.
Step7: Run the code using "npm run dev".
Source Code

App.vue


<script setup>
import { ref } from 'vue';
import AppTitle from './components/AppTitle.vue';
import CalcElm from './components/CalcElm.vue';
</script>

<script>
export default {
  components: {
    AppTitle,
    CalcElm
  }
}
</script>

<template>
  <header>
    <AppTitle title="Add Two Numbers" class="css-title"/>
  </header>
  <main>
    <div>
      <CalcElm />
    </div>
  </main>
  <footer>
    <AppTitle title="Developed by K. Anbarasan" class="css-footer" />
  </footer>
</template>

<style scoped>

main{
  height: 200px;
 }
 main >div{
  padding: 10px;
 }

@media (min-width: 1024px) {
 main{
  height: 400px;
 }
}
</style>

AppTitle.vue


<script setup>
defineProps({
  title: {
    type: String,
    required: true
  }
});
</script>

<!-- MyComponent.vue -->
  <template>
    <div>
      <h1>{{ title }}</h1>
    </div>
  </template>
  
  
  <style>
  .css-title {
    text-align: center;
    display: block;
    height: 100px;
    width: auto;
    background-color:darkturquoise;
    color: red;
    text-decoration: underline;
    border-radius: 10px;
  }
  
  .css-footer {
    text-align: center;
    display: block;
    height: 100px;
    width: auto;
    font-size: 10px;
    background-color:rgb(206, 227, 228);
    color: red;
    text-decoration: underline;
    border-radius: 10px;
  }
  </style>

CalcElm.vue


<script>
export default {
  data() {
    return {
      sum: "",
      num1: "",
      num2: "",
    };
  },
};
</script>

<template>
    <div class="inp">
        <label for="a" >Enter Number 1: </label> 
        <input type="number" id="a" v-model="num1">
    </div>
    <div class="inp">
        <label for="b" >Enter Number 2: </label> 
        <input type="number" id="b" v-model="num2">
    </div>
    <div class="btn">        
        <button @click="sum = num1+ num2">
            Add
        </button>
    </div>
  <h1>Result is {{ sum }}</h1>
</template>


<style scoped>
.inp{
    padding: 10px;   
}
.inp input{
    border-radius: 5px;
    height: 30px;
}
button {
  text-align: center;
  padding: 10px 20px;
  background-color: #4CAF50; /* Green color */
  color: white;
  border: none;
  border-radius: 5px;
  cursor: pointer;
}

</style>
Result: Thus vue.js application is created to perform addition using click event.