Categories
javascript vuejs

Vue.js – Event Handling using v-on directive

Hey guys πŸ‘‹πŸ»,
In this post, let us talk about Event Handling in Vue.js using the v-on directive.

For this post we will understand
βœ” Event Handling using v-on
βœ” One Code Example

Event Handling

For user interactions we can use a special directive called as v-on to attach event listeners that perform some code or invoke methods on our Vue instances. Let us see an example :

Example

Let us define some logic to reverse text on the click of some button. So the steps are :

  1. Create a text data property
  2. Define a reverseText method to reverse the text.
  3. Render it in the template.

Let us see the code for same :

So to attach an event on the button, we use the v-on directive and listen for the click event for the buttons – one is to reverse the text and other two buttons are for incrementing and decrementing some counter reactive property. Let us define the script where we house all our business logic for the component.

So this was all I wanted to cover about Event Handling.

Thanks for reading.
Don’t forget to leave a like if you loved the article. Also share it with your friends and colleagues.

Alt Text

Categories
javascript vuejs

Vue.js – Introduction

Hey guys πŸ‘‹πŸ»,
In this post, I will be starting with a new series and it is on Vue.js. So in this first post, let us talk cover the Introduction to Vue.js

For this post we will first understand Props
βœ” What is Vue.js ?
βœ” How to Get Started ?
βœ” Declarative Rendering

What is Vue.js?

Vue.js is a progressive JavaScript Frontend Framework for building modern, sleek and performant user interfaces. It is a very popular framework for building frontend applications just like Angular and React.js

How to get started ?

You can use Vue.js for building small widgets for your multi-page applications. For this you just need the CDN. For more complex applications, use the Vue CLI

Declarative Rendering

Vue.js provides a reactivity system that allows us to render content in a declarative manner right within the template using the mustache {{}} syntax.

Let us define the script where we house all our business logic for the component.

So this was all for the introduction. This is how we can create a basic Vue.js 3 application. We made the app reactive by connecting the data and the DOM.

Thanks for reading.
Don’t forget to leave a like if you loved the article. Also share it with your friends and colleagues.

Alt Text

Categories
html javascript vuejs web development

✨Top 5 resources to learn Vue.js [in no particular order]

✨Top 5 resources to learn Vue.js

Hey everyone πŸ‘‹πŸ»,

In this article, I will be mentioning the top 5 resources that I highly recommend if you want to learn Vue.js.

PS : I am not an affiliate of any of these resources/courses. These are just some of my personal recommendations if you are looking to learn Vue.

Introduction

Alt Text

Vue is a progressive framework for building user interfaces. Unlike other monolithic frameworks, Vue is designed from the ground up to be incrementally adoptable. The core library is focused on the view layer only, and is easy to pick up and integrate with other libraries or existing projects.

Here are the top 5 recommendations (in no particular order) of the courses that you should definitely check out for learning Vue.

1. Build Web Apps with Vue 3 and Firebase by Shaun Pelling a.k.a The Net Ninja (rated 4.8)

image

Shaun is a gifted teacher. He knows how to explain stuff in a very easy and lucid manner. This course will definitely take your knowledge to the next level if you are looking to learn this specific technology.

Here is what this course covers

Learn how to create Vue 3 applications from the ground-up

Get in-depth knowledge of Vue features like the Vue Router, Vue CLI, Options API, Composition API, Teleport etc

Get hands-on & in-depth experience using the latest Vue 3 features (such as the Composition API)

Learn how to use Firebase as a back-end to your Vue applications (as a database, authentication service, hosting etc)

Build & deploy 4 real-world web apps with Vue & Firebase
Learn how to implement an authentication system into your Vue js apps using Firebase Auth

Become a Vue 3 ninja!

Course Link :

https://www.udemy.com/course/build-web-apps-with-vuejs-firebase

2. Vue.js – The Complete Guide by Maximilian Schwarzmuller ( rated 4.8)

image

This course as the name can probably tell you covers the internals of Vue in great detail. The course starts from the very basics like What Vue.js is and how it works and later on moves to more complex and advanced topics

Here is what this course covers

What is VueJS and Why would you use it?

The Basics (including the basic Syntax, Understanding Templates and much more!)

How to Output Reactive Data & Listen to Events

Interacting with DOM (Rendering Lists, Conditionally attaching/ detaching Elements …)

Setting up a Development Environment and Workflow

Using Components (and what Components are to begin with)

A Deep Dive Look Behind the Scenes of Vue

Binding to Form Inputs

Sending Http Requests to Backend APIs

Authentication & Vue

How to make your App more Beautiful with Animations and Transitions

How to create an awesome Single-Page-Application (SPA) with Routing

How to improve State Management by using Vuex

How to Deploy the App

and more …

Course Link :

https://www.udemy.com/course/vuejs-2-the-complete-guide

3. Vue Mastery

This is a complete path for learning Vue.js from some prominent industry experts pertaining to the technology.

image

image

Here is what this course covers

Their courses are distributed in form of paths. You may want to try them out as well.

image

Course Link :

https://www.vuemastery.com/courses

4. VueSchool.io

image

Here is what this course covers

image

You may want to try their complete suite of courses to enhance your Vue.js Knowledge. So down below, you can find the link for their website :

Course Link :

https://vueschool.io/courses

5. Vue.js Documentation (a must thing to refer)

image

Docs link :

https://v3.vuejs.org/

So this is it for this article. Thanks for reading.
Don’t forget to leave a like if you loved the article. Also share it with your friends and colleagues.