Vue Methods
Vue Methods
What are Vue Methods?
Vue methods are regular JavaScript functions that:
Respond to events (
click,submit,keyup, etc.)Perform calculations
Update data
Execute business logic
They are defined inside the methods option of a Vue app or component.
Basic Syntax
Example-1: Simple Method
- The method runs when the button is clicked.
Example-2: Method with Data
- Methods can modify reactive data using
this.
Example-3: Passing Parameters
Example-4: Using $event
$eventgives access to the native DOM event.
Example 5: Methods in Template Expressions
- This method runs every time the component re-renders.
Methods vs Computed Properties (Very Important)
| Feature | Methods | Computed |
|---|---|---|
| Execution | Every render | Cached |
| Performance | Lower | Higher |
| Use for | Actions / events | Calculated data |
| Parameters | Yes | No |
Use methods for:
Click handlers
API calls
Form submission
Use computed for:
Derived data
Filtering
Calculations based on state
Methods with Forms
Calling Methods from Another Method
Common Mistakes
Using arrow functions:
Correct:
Best Practices
- Keep methods simple and readable
- Use clear names (
handleSubmit,incrementCount) - Avoid heavy logic in templates
- Prefer computed for repeated calculations
Summary Table
| Task | Use |
|---|---|
| Handle click | Method |
| Submit form | Method |
| Update data | Method |
| Derived value | Computed |
| Event logic | Method |
Conclusion
Vue methods are the action handlers of your application.
They connect user interaction with application logic and are essential for building interactive Vue apps.
