Udemy
    •  
    •  
    •  
    •  
    •  
    •  
    •  
    •  
Subscribe
Turn what you know into an opportunity and reach millions around the world.
Learn More
Your cart is empty.
Keep shopping
Introduction to Vue Js framework
Rating: 4.4 out of 5(104 ratings)
5,543 students

Introduction to Vue Js framework

Programming with reactive javascript
Created byRafael Rend
Last updated 8/2021
English
EnglishEnglish

What you'll learn

  • Introduction to Vue Js framework
  • Programming with reactive javascript
  • Know vue's main directives
  • Make api request

Explore related topics

Course content

2 sections • 8 lectures • 49m total length

  • Comparing classic javascript Vs Vue Framework4:01

    Compare classic javascript with the Vue framework, highlighting reactive programming and easier HTML manipulation. See a simple example that toggles a div with show and hide using both approaches.

  • Install vue, Vue Object, v-on, v-if6:44

    Learn how to set up Vue, create a Vue instance, and bind data and methods using v-if and v-on to make html elements react to state changes.

  • Increasing V-if example2:28

    Explore how Vue uses reactive data and the v-if directive to conditionally render elements, toggling a SHOW_DIV variable to show or hide buttons with true/false and negation.

  • v-model directive3:05

    Explore the v-model directive for two-way data binding in form elements (input, textarea, select, radio, checkbox) and learn how v-html renders the same value in Vue.js.

  • directives: v-for e v-html4:52

    Render table rows from a dynamic list with v-for, binding each row to item.name and its index, and add items via input and a button.

  • Removing an item of array1:10

    Learn to remove an item from an array in a Vue.js app by creating a remove(index) function using list.splice(index, 1) and a per-row button with v-on:click.

  • watch and v-bind3:11

    Learn how to use vue's watch to observe data property changes and deploy v-bind and v-model with v-for for dynamic selects, binding values and triggering reactive counters.

Requirements

  • HTML knowledge

Description

Let's learn Vue JS Javascript framework, which is a powerful tool to creating reactive components for modern web interfaces.

This quick and free course, aims to show you some of the (many) features that this framework has to offer. And it will be your "open door" to programming with reactive javascript.

To get to know Vue at this first moment, you won't need any special installation. Just an HTML page with a SCRIPT url to Vue library. There are 3 ways to install vue: cli, webpack or just script url. Right this moment , in order to practice and know Vue, let's use last (and less resources) way.

Let's know about

main directives: v-if, v-for, v-bind, v-model, v-on, v-html;
object vue sections (methods, data, mounted, watch),

And, at finish, practical example using requests to server api. Let's use a real and free api to view objects from a museum.

Who is this course for:

Web developers or enthusiasts who want to learn web programming.

Next steps I am preparing (soon):

Another advanced Udemy Vue course, making a real web application of a dashboard with graphs, table list data, upload files, server api integrations, authentication with login and password.

I hope you enjoy. See you soon!

Who this course is for:

  • Begginer front-end developers

Report abuse