Teach on Udemy

Turn what you know into an opportunity and reach millions around the world.

Learn More

Your cart is empty.

Keep shopping

Vue.js 2 for absolute beginners

Name: Vue.js 2 for absolute beginners
Rating: 4.5 (11 reviews)

Learn Vue.js by building components and connected apps

Created byMichel Martin

Last updated 10/2020

English

English [Auto],

What you'll learn

Create responsive user interfaces
Add features to an existing web project
Create SPA web applications (single page)
Create mobile apps (Android and iOS)
Acquire knowledge to properly program in Vue js 2 (methods, computed properties, data binding, directives, etc.)
Learn how to create a components hierarchy
Use the Vue-Cli interface (application creation, render methods, JSX, functional components).
Facilitate communication between components with the Vuex state manager, or with observables.
Create plugins for Vue JS
Use mixins, custom directives and NuxtJS

Course content

7 sections • 92 lectures • 8h 47m total length

Vue.js Key Principles2:15
discover the key principles of Vue.js 2 for absolute beginners, learning to add functionality to existing projects, create single-page apps and mobile apps, and appreciate its powerful, easy setup.
Preparing your development environment6:13
Prepare your Vue.js 2 development environment by installing Visual Studio Code, getting started with a CDN, creating a clean project folder, and setting up a live-reload server with npm.
Vue.js MVVM pattern2:38
Explore the mvvm pattern in Vue.js 2, defining the model, view, and view model, and learn how two-way data binding connects data to the user interface.
A first Vue.js project4:09
Define data in the Vue.js 2 model and render it in the view with interpolation. Display a string and a timestamp in milliseconds since epoch.
A second Vue.js project3:16
Learn how to insert JavaScript functions into Vue interpolations, reverse a string with split, reverse, and join, and display the current time by extracting hours, minutes, and seconds.
Your first exercise3:08
Practice displaying data with interpolation and a ternary operator by binding a model property to the view, showing true or false based on the Intr value.
Computed properties3:13
Learn to use computed properties in Vue.js 2 to move complex logic from the template into the view model, then practice a time computed property displayed via interpolation.
Computed properties vs Methods1:36
Compare computed properties and methods in Vue.js 2, showing that computed properties re-evaluate only when dependencies change, making them more efficient; methods run on every call.
Data binding4:25
Bind a model property to an XHTML attribute using the rebind prefix to display an image. Define the image address in the model and verify the binding in the browser.
Accessing text nodes5:46
Learn how Vue.js 2 binds a person object's first name, last name, and age to the view using v-text and v-html directives, including a timed data update.
A Vue.js clock4:17
Build a Vue.js clock by binding hours, minutes, and seconds in a view model, update with setInterval using a date object, and format two-digit values.
Using Vue.js Devtools2:21
Install and enable the Vue.js devtools extension in Chrome, Firefox, and Edge, then open the Vue tab with F12 to inspect root component and its dynamic hours, minutes, and seconds.
Two-way binding6:43
Explore two-way binding with Vue.js 2 using the v-model directive to connect input, select, and textarea to the model, observe automatic updates between view and model.
Using v-model and v-bind directives4:11
Learn to bind inputs to the model using v-model and v-bind in a Vue.js 2 app, linking text boxes and updating the second box to uppercase on key events.
An array in the Model4:33
Learn to bind an array to the Vue.js 2 model to track checkbox and radio button selections, display chosen languages in a paragraph, and practice with a short exercise.
The v-html directive4:53
Display raw HTML in Vue.js with the v-html directive by interpolating model content into the view. Render an image and an HTML table from a content array to show updates.
Event handlers3:16
Define event handlers using the v-on directive in Vue.js 2, binding to events and executing code or functions; increment a counter on button clicks and display it with interpolation.
Using the methods section3:22
Bind inputs with v-model to name and define an event handler. Use the view model with the methods property on button click to display Hi plus the entered name.
Event handlers with arguments2:42
Learn to pass arguments to an event handler in Vue.js by using buttons that show a message box with 'Hi' or 'Good morning' followed by the entered name.
Using $event in an event handler4:54
Learn to pass the $event object to a Vue.js event handler to access mouse coordinates on image hover, updating a view model's x and y properties and displaying them.
Using preventDefault() and stopPropagation() JavaScript functions8:54
Master how preventDefault and stopPropagation control event behavior in a Vue.js context. Use a practical nested-element example to prevent page reload and display the square of a number without refreshing.
stop and prevent event modifiers7:14
Learn how to use Vue.js 2 stop and prevent modifiers to control event propagation and default actions, and practice image resizing with left and right click modifiers.
Using arrays in the Model4:14
Build a simple Vue.js app that collects known programming languages in an input, pushes each entry into a model array on button click, and displays the list with interpolation.
Viewing languages in a bulleted list7:20
Learn to render a bulleted list in Vue.js 2 with v-for, display languages from an array, use index for each item, and delete items with splice.
Dynamic arguments6:06
Demonstrates dynamic arguments in Vue.js 2 using v-on and v-bind with UN and REBIND directives to toggle images based on radio button choices and click or double-click events.
Browsing JSON objects with a v-for directive3:29
Learn to use the v-for directive to iterate over an array of objects, display each person's first name, last name, and age with interpolations, and practice with a hands-on exercise.
Keyboard events4:37
Demonstrates handling keyboard events in Vue.js 2 to convert a text field input to uppercase on enter or button click, using v-model binding and an event handler.
The v-cloak directive1:26
Apply the v-cloak directive to prevent uncompiled expressions from flashing as double braces, ensuring clean interpolation in Vue.js pages.
The v-once directive3:28
Explore how the v-once directive renders an element once, preventing updates, and compare it with rendering without v-once while incrementing a number (default 15) via a Vue instance.
Conditional classes8:01
Learn to conditionally style in Vue.js 2 by binding a class to a model boolean and manage language items with checkboxes.
Using several classes in an item5:20
Learn to apply multiple classes to text in Vue.js 2 by binding conditional classes to bold, italic, and underline using checkboxes and boolean model properties.
Modifying inline styles7:49
Modify inline styles in html tags by binding a style object with the rebind style directive in vue.js 2, linking color and size to two dropdowns for live text updates.
Displaying HTML conditionally9:39
Learn to display HTML conditionally in Vue.js 2 using v-if, v-else, and v-show, with a hands-on exercise building a to-do list where checkboxes toggle item text based on state.

Your first global component4:45
Learn how to create and reuse global components in Vue.js 2, using the static component method, templates, and kebab- or Pascal-case naming to build modular, reusable views.
Your first local component2:51
Define a local Vue.js 2 component with a template and script, register it via the components property, and render multiple instances in the view to display three local high components.
Adding data to components5:58
Learn to add data to global or local Vue components by defining a data function that returns an object, and see a local component display a random number with template interpolation.
Adding methods to components5:58
Add data and methods to global or local Vue.js 2 components, define a local Arenda Dash that shows a random 1–100, and create a counter component with a clickable button.
Transmitting data to child components with props4:50
Learn how to pass data to child components in Vue.js 2 using props, define attributes, access and interpolate them in templates, and switch between local and global components.
Accessing props in the model9:07
Learn how to access a component prop named text in a Vue.js 2 app, display it in uppercase, and pass a max prop to generate random numbers across multiple instances.
Transmitting data from the app's Model to child components3:31
Bind a message prop from the app's model to a child component in Vue.js via an attribute, then retrieve it with props and render it with interpolation.
Local vs Global3:31
Learn why local components in Vue.js 2 reduce download size and improve performance compared to global components. See how to choose and declare only needed components to optimize your app.
Custom events7:54
Learn how to use custom events in Vue.js 2 by emitting events from a child and listening in the parent with v-on to update the parent total from three counters.
Lifecycle hooks9:47
Discover Vue.js lifecycle hooks, including the created hook, to fetch three random users with axios from the random user API and bind the data to the view.
Defining an app as a components hierarchy7:47
Build a Vue.js 2 app with local components one and all to fetch ten random users via axios and display each user's photo, name, e-mail, and phone using props and v-for.
A global components hierarchy2:00
Transform local Vue components into global components through a guided exercise, naming one and all, and verify the same results in the browser.
Sending data to a component with slots5:46
Discover how to pass data to a Vue component using slots, focusing on simple slots and default content. See how inner content fills the slot and how props retrieve attributes.
Named slots1:50
Learn how named slots work in Vue.js 2 by using the VP slot directive in the template tag, assigning the name text to a slot, and using a default slot.
Scoped slots6:33
explains how vue.js 2 scoped slots let a parent pass data to a child via props and slots, with examples of named slots binding data and rendering article titles.
Filters8:48
Explore how to use Vue.js filters in interpolations and directives, defining local and global filters to transform input text, including a capitalization example that makes each word's first letter uppercase.
Computed properties8:37
Explore computed properties in Vue.js 2, keeping logic out of templates. Implement a reverse text computed property and a computed property that joins first and last names.
Watchers8:09
Explore how Vue.js 2 watchers detect changes to model property. See counter that increments and resets at ten, and a text watcher that shows a message when 'here' is detected.
Watchers and asynchronous requests5:23
Learn how watchers trigger on text input to show a keystroke in progress message and automatically hide it after 3 seconds using a boolean display property and a setTimeout.
Animations and transitions6:17
Apply transitions for inserting and removing elements with css classes and optional libraries, demonstrating input and output transitions by fading a button-controlled image out over five seconds and back in.
Enter and leave transitions with Vue.js7:07
Learn to implement enter and leave transitions in Vue.js by wrapping the image in a transition tag with a name, and a button toggles visibility via v-if.
Transitions and conditional display4:09
Demonstrates transitions and conditional display in Vue.js 2 by showing the maiden name fields with a two-second opacity transition when Mrs is selected and hiding them when Mr is chosen.
Non-simultaneous enter and leave transitions7:32
Explore non-simultaneous enter and leave transitions in Vue.js 2, using in-out and out-in modes to toggle text with a button, controlled by a label property and transition classes.
Transitions between HTML elements5:42
Explore transitions between HTML elements in Vue.js 2 by animating text changes with a transition component, key attributes, and button clicks driving sequential title displays.
List transitions7:04
Learn to apply list transitions in Vue.js 2 with a transition-group and keys for two-second opacity adds and removals. Practice a refugees app with fruits array using v-model and v-for.
Enter and leave transitions with animate.css4:50
Learn to apply enter and leave transitions in Vue.js 2 with animate.css, using a transition component and a boolean toggle to trigger hinge enter and bounce out right.
JavaScript animations10:38
Learn to implement JavaScript animations with the velocity library in a Vue.js app, using a transition component and an action function to animate translate, font size, and opacity.

Creating a SPA with vue-router14:25
Explore building a single-page app with vue-router, define three routes, and render pages via components using router-link and router-view.
Active link appearance3:29
Explore how to style the Vue router link active state with a stylesheet and a custom _active class, highlighting active pages one, two, and three.
Vue Router Navigation Guards5:19
Learn how Vue Router navigation guards control navigation, using global beforeEach and afterEach guards, and per-route or in-component guards, with next, from, and to to manage route changes.
Per-route Navigation guards1:29
Learn how to implement per-route navigation guards in Vue.js 2 by defining beforeEnter in the route or using beforeRouteEnter, beforeRouteUpdate, and beforeRouteLeave in components to control page transitions.
Routing5:52
Apply page transitions in a Vue.js 2 app by wrapping router-view in a transition component, setting a name and mode, and defining enter and leave opacity classes.

First steps with Vue-Cli5:35
Set up your first vue.js project with the vue-cli, create a component-based app, install dependencies, choose runtime plus compiler, and run npm run dev to view at localhost:880.
App architecture5:37
Explore the architecture of a Vue.js 2 app, from index.html and main.js to reusable single-file components with template, script, and style, including the Halo world component and logo.
Creating and editing an app with Vue-Cli11:03
Learn to create and edit a Vue CLI app by scaffolding a project, defining an app component, and rendering a registered component that displays a table of people.
A second app with Vue-Cli10:08
Create a new Vue app using Vue CLI, add a users component, fetch users from JSONPlaceholder with axios in the created hook, and render them in a Bootstrap table.
Render Methods6:28
Define render functions in Vue.js 2 by converting templates into a render function that uses createElement and slots, including named title and bottom slots and the default slot.
Templates vs render methods & JSX5:20
Discover when to use templates versus render methods in Vue.js 2, title component that renders h1, h2, or h3 based on a level attribute, and compare templates with render functions.
Vue-Cli and JSX10:24
Learn to set up a vue cli project, write components with GSA, Gothics, and JSX, replace templates with a render function, and run the app locally via npm.
Functional components3:29
Learn how to create Vue.js 2 functional components using the render function, including a stateless component marked as functional that returns a simple button with a click me label.
Two parameters in the render() function3:04
Learn how render functions accept two parameters—the create element function and the context object—to access props, children, slots, and parent data in functional components without this.
Transmitting events from a functional component4:16
Learn how to escalate a button click from a functional component to its parent by passing a click listener in render, enabling the parent to handle the event.

First steps with Vuex8:28
Learn to manage app state with View X store and mutations to increment and decrement a counter, while a computed function displays the current value.
Accessing store methods from components7:42
Learn how to access store methods from components in a Vue.js 2 app, modify stock via mutations, and build simple sale and provision components to manage salad inventory.
Accessing store state from components2:05
Learn two techniques to access store state from Vue.js 2 components: log store.state values directly from methods, and inject the store into all components via the Vue instance.
Vuex plugins section2:30
Explore the Vuex plugins section, using a store plugin to subscribe to mutations and state changes, triggering console logs on initialization and after each mutation.
Vuex alternatives7:36
Discover how to replace a Vuex store with a minimalist observable state in Vue.js 2, using reactive objects, computed properties, and simple methods to increment and display a counter.
Vuex and forms8:39
Learn how to store and share text field data in a vuex store using state, mutations, and commits, with input handling and two-way binding through getters and setters.
Validating a form in VueJS13:54
Learn how to validate a Vue.js 2 form using v-model bindings, a dedicated validation method, and an errors array, with real-time checks for name and email.

Mixins4:29
Define a local halo mixin with a created hook that logs 'local mixin says hello'. Create a component that uses this mixin to display the text in the browser.
Global Mixins4:16
Transform a local mixin into a global mixin in Vue.js 2 using a static view mixin and created hook to log hello via halo, noting global scope caveats.
Plugins9:53
Learn to create and use Vue plugins with install, adding global methods, directives, and mixins, then practice a sample plugin that logs mounted events and registers a global component.
Custom directives4:14
Learn how to create a custom directive in Vue.js 2 by defining a v-blue-h1 directive with bind and inserted hooks, binding model message to display header on light blue background.
Using arguments in custom directives6:18
Learn to use arguments in custom directives in Vue.js 2 for absolute beginners, including binding arguments, creating multi-parameter directives like v-h1, v-hcolor, and rendering dynamic titles with styles.
Using typed props for a more robust code5:16
Learn how to type Vue props by replacing the props array with an object, defining number and string props, and binding them to a model to create robust components.
Nuxt JS10:36
Create a next-gen project with npm, run the server at localhost:3000, then build three linked pages in the pages folder using the next link component and lorem ipsum content.
Mobile App development9:15
Explore mobile app development with the View Netiv framework, learn drag-and-drop components, edit code, and test on iOS and Android via the native script playground.
Using Visual Studio Code to develop Mobile apps4:48
Learn to build mobile apps in Visual Studio Code with NativeScript, install the latest NativeScript SDK version 5.0.0 globally, and preview on a device using the NativeScript Playground QR code.

Requirements

A basic knowledge of HTML5, CSS and JavaScript is preferable to be comfortable in this training.

Description

This video training was designed for JavaScript programmers who want to learn how to use the Vue.js 2 framework. Unlike other JavaScript frameworks, Vue.js can be adopted as and when required. It can also coexist with existing JavaScript logic without interfering with it.

You will use Vue.js to:

Create responsive user interfaces from scratch
Add features to an existing Web project
Create SPA web applications
Create applications for mobiles (both Android and iOS)

Today Vue.js is a very popular framework. Certainly because it is easy to set up, offers very good performance and can be used more or less extensively, depending on what is needed.

When I started creating this video training course, I had two choices:

Create a common thread and gradually integrate the different concepts learned throughout the training.
Create independent examples to easily and quickly learn the different concepts of Vue.js.

I am a face-to-face trainer and I was able to experiment these two approaches. Although the first has its fervent followers, the second gives better results in terms of learning, because each example can be chosen in an extremely precise way, without having to follow a logic of global integration which could neglect certain aspects of what needs to be learned. It is therefore this second approach that was adopted.

Each topic is approached independently and illustrates a particular aspect of Vue.js: computed properties, data binding, directives, event management, conditional classes, props, custom events, lifecycle hooks, etc. etc ..

Many exercises are available to you. When you are asked to stop scrolling the video, play the game: stop the video and code as you like, starting with a standard skeleton or a blank page. You will see that by doing so, your learning curve will be very fast. When you have finished coding, you can resume scrolling the video: a correction will be offered.

This training is very comprehensive. Here are some of the topics covered:

Standard view and ViewModel programming: methods, computed, data binding, bidirectional binding, directives (v-model, v-bind, v-html, v-for, v-cloak, v-once, v-if and many others).
Local and global components, communication between components and the ViewModel, prioritization of an application using components, slots, filters, watchers, transitions and animations.
SPA applications (routing, navigation guards).
Vue-Cli command line interface (application creation, render methods, JSX, functional components).
Vuex state manager, Vue.observable, plugins.
Mixins, personalized directives, NuxtJS, mobile applications.

All the source codes of the training are available.

I can only advise you one thing: experience the code for yourself, code and progress at your own pace. Little by little, Vue.js will seem more and more familiar to you and you will appreciate its power and flexibility.

So ... Happy coding!

Who this course is for:

JavaScript programmers who want to learn how to use the Vue JS 2

Vue.js 2 for absolute beginners

What you'll learn

Explore related topics

Course content

FIRST STEPS WITH VUE JS33 lectures • 2hr 35min

VUE JS COMPONENTS27 lectures • 2hr 46min

SPA – SINGLE PAGE APPLICATIONS5 lectures • 31min

VUE CLI10 lectures • 1hr 5min

VUEX STATE MANAGEMENT PATTERN7 lectures • 51min

GOING FURTHER WITH VUE JS9 lectures • 59min

Quiz and Source Code1 lecture • 1min

Requirements

Description

Who this course is for: