testing

testing

11-Jan-2025
| |
Image Carousel

logo icon Rocker Dashboard Application UI Elements Front News Coding Tutorial Source Code Youtube Videos Payments HTML Pages NewsLetter Components Content Icons Forms & Tables Forms Tables Pages Authentication User Profile Timeline Errors FAQ Pricing Charts & Maps Charts Maps Others Menu Levels Documentation Support Type to search... 7 8 user avatar Pauline Seitz Web Designer Manage Category Add Details Post Name Post slug Image No file chosen Keywords Vue.js 3, Create components, Vue components, Single File Components (SFC), Component structure, Component options, Component , pass data in vue js , pass functions from components in vue js 3 , pass data and functions from components in vue js 3 methods in vue js 3 , what are methods in vue js 3 , how to create methods in vue js 3 video url (only unique id) WcS0shhdXbw Category only select (is_trending or is_featured) Is Tranding Is Featured Desc

Hello developers in this tutorial we will discuss about how to create methods in vue js 

Table of Contents

S.no Contents-topics
1 What are Methoabc
2 Setup new Vue js project
3 Create new Vue js file 
4 Router file
5 Run the Code
6 Output

1:What are Methods

Methods are similar to function in javscript as similar while we are using functions in javascript  , to perform any piece of code by means of any action is known as methods in vue js.

2:Setup new Vue js project

For setting up new vue js project pls consider link given below

3:Create new Vue js file

Create a new vue js view file src/views/Methods.vue 
code for Methods
.vue : Copy

<template>
    <h2>Welcome to DeveloperCodez</h2><br/>
    <h2>Methods</h2><br/>
    <button v-on:click="showAlert">Click to Show Alert</button><br/>
    <button v-on:click="showValue(20)">Click to Show Value</button>
</template>
<script>
export default{
    name:'Methods',
    methods:{
        showAlert( )
        {
           alert("This is Called by functions") ;
        },
        showValue(val)
        {
           alert("Value is "+ val);
        },
    }
}
</script>

4:Router File

If your project don't have default router file consider below post for how to create custom route file in vue js

code for route.js :Copy

i
import { createRouter, createWebHistory } from 'vue-router'
 
import Methods from '../views/Methods.vue'
 
const router = createRouter({
  history: createWebHistory(import.meta.env.BASE_URL),
  routes: [
    {
      path: '/',
      name: 'Methods',
      component: Methods
    },
   
  ]
})
 
export default router

5:Run the project

To check and run the project simply hit npm run dev on the cmd 

6:Output

 

Copyright © 2021. All right reserved. Theme Customizer Theme Styles Light Dark Semi Dark Minimal Theme Header Colors Sidebar Colors

Tags: testing,sql , what is sql , how to install sql,
0 Comments (Please let us know your query)
Leave Comment
Leave Comment
Articles from other Categories
Load More

Newsletter