Complete Vuejs Course: Vue.js + Nuxt.js + PHP + Express.js
4.6 (483 ratings)
Course Ratings are calculated from individual students’ ratings and a variety of other signals, like age of rating and reliability, to ensure that they reflect course quality fairly and accurately.
2,454 students enrolled

Complete Vuejs Course: Vue.js + Nuxt.js + PHP + Express.js

VueJS, Command Line, Babel, NPM, Webpack, Vue JS CLI, Vue.js Router, VueX, Axios, iView, Express.js, Nuxt.js
4.6 (483 ratings)
Course Ratings are calculated from individual students’ ratings and a variety of other signals, like age of rating and reliability, to ensure that they reflect course quality fairly and accurately.
2,454 students enrolled
Created by OnlyKiosk Tech
Last updated 2/2020
English
English [Auto], Indonesian [Auto], 3 more
  • Polish [Auto]
  • Romanian [Auto]
  • Thai [Auto]
Current price: $69.99 Original price: $99.99 Discount: 30% off
5 hours left at this price!
30-Day Money-Back Guarantee
This course includes
  • 18 hours on-demand video
  • 9 articles
  • 68 downloadable resources
  • Full lifetime access
  • Access on mobile and TV
  • Certificate of Completion
Training 5 or more people?

Get your team access to 4,000+ top Udemy courses anytime, anywhere.

Try Udemy for Business
What you'll learn
  • Create front-end apps using Vue
  • Connect your Vue program to PHP and MySQL
  • Operate command line, Babel, NPM, and Webpack
  • Create single page applications using Vue, Vue single file components, and Vue router
  • Master vue router, vuex and axios
  • Master Ajax
  • Master Expressjs
  • Master Nodejs
  • Master Vuejs
  • Master Nuxtjs
Course content
Expand all 290 lectures 18:03:30
+ Getting Started
4 lectures 07:52
Road Map of the Current Stage
00:26

This lesson is about giving you a brief introduction of what Vue.js is and how to install it. 

Preview 02:49

In the last lesson, we have learnt how to install Vue.js. In this lesson, we will learn how to create a Vue program. We will start with the simplest one. We will create a Vue program and display a text value using it. The program may be simple but is very important. Therefore, make sure you have done enough practice after watching this lesson. 

Preview 03:09

Single-body HTML tags like IMG and INPUT rely on their attribute to work. We have already learnt how to control text value using Vue, in this lesson, we are about to find out how to control attribute value. 

Preview 01:28
+ PROJECT: create our first Vue.js APP
2 lectures 02:40
Road Map of the Current Stage
00:30

This lesson will show you how to create the BBC news reading block using Vue.js. Make sure you recreate the whole program all by yourself after watching this lesson. 

Preview 02:10
+ Generating contents automatically using the V-FOR directive
4 lectures 08:03
Road Map of the Current Stage
00:37

You will learn how to use the V FOR directive in this lesson.

The drawback of our BBC news reading program and the solution: V-FOR directive
02:13

In this lesson, we will explore a slightly more complicated situation. The value of the data property is still an array but each array element is an object. We are not interested in the object, we only want to display its property value. So how do we achieve this? Watch this lesson to find out how. 

V-FOR in a slightly more complicated application scenario
02:41

Now we have learnt how to use the V FOR directive. Let's apply it to the news reading program we created before and display all six news blocks simultaneously. 

Apply V-FOR to the BBC news reading program we created before
02:32
+ Getting to know PROXY
5 lectures 07:33
Road Map of the Current Stage
00:18

This lesson will first give you a review of everything we have learnt so far and use it to introduce PROXY to you. 

Have you found a problem?
02:28

In this lesson, you will learn what proxy is.

Introduction to the concept of PROXY
01:31

In this lesson, we are going to prove to you that PROXY also works on methods. 

PROXY also works on methods, meaning you can proxy a method
01:17

In this lesson, we will show you how to exchange data between vm.data and vm.methods

How to communicatedbetween VM.data and VM.methods
01:59
+ The V-ON directive -- Vue's answer to handling events
2 lectures 03:57
Road Map of the Current Stage
00:21

Using the v-on directive, we can monitor events. 

Introduction to the V ON directive
03:36
+ Conditional rendering: using V-IF, V-ELSE, and V-SHOW
1 lecture 04:56

Using conditional rendering, we can show and hide page elements based on pre-defined conditions. Compared with native JS and jQuery, Vue offers us a much more simple and elegant solution. 

Conditional rendering
04:56
+ V-MODEL: collecting user-submitted data
4 lectures 09:58

Using v-model, we can easily collect user-submitted data. 

Preview 01:38

In this lesson, we will show you how to use v-model in projects.

Using V-MODEL in projects
02:34

Using lazy and number modifier, we can customize the performance of v mode to make it better suit our demands. 

Lazy modifier and number modifier
01:29

You can use the v-model directive on other tags like textarea, radio button, checkbox, etc. 

Using v-model in other tags: textarea, radio button, checked box, etc.
04:17
+ Combining v-for and v-model and creating a list DYNAMICALLY
1 lecture 02:18

In this lesson, we will show you how to create a list dynamically. You can add and remove list item in real time. 

Preview 02:18
+ Computed and Filter
5 lectures 11:08

Most of the time, user-subimtted data is like a raw material. We need to furthur process them before using. Vue has offeres us two options in this regard: filter and computed.

Filter is for simple data formatting and filtering. Computed is for complicated data process.

The difference between COMPUTED and FILTER
00:52

In this lesson, we are going to learn how to use filter. 

Introduction to FILTER
02:29

In this lesson, we are going to learn how to use computed. We will create a program that can automatically reverse the order of user-submitted data. 

Introduction to COMPUTED
02:36

In this lesson, we are going to create a program that reverses the letter order of user-submitted data. This example can show you the power of computed. 

Project: reversing letter order using COMPUTED
01:53

You can exchange info between vm.data and vm.computed. In this lesson, we will . show you how. 

Two-way data exchange between DATA and COMPUTED
03:18
+ Controlling CSS using V-BIND
2 lectures 09:33

In our previous lesson, we have alrady learnt how to use the v bind directive. We knew that the v bind direcitve can be used to set values for attributes. 

Class and Style are also attributes. Can control them using the v bind directive? If we can , this means we can control CSS using Vue.

So can we do this or not? Watch this lesson to find out.

Controlling CSS Part 1
07:17

Lucky for us, we can control the CLASS attirbute using the v bind directive. We can set three values to the class attribute: direct value, array value and JSON value. 

This has opened a door of great potential for us. Becuase we can control whether a class wil be added or not by setting properties values in Vue data or Vue computed.

Controlling CSS Part 2
02:16
Requirements
  • Basic JavaScript knowledge is needed
  • You should know what is a class and how to instantiate it into an object
  • You should know how to use object properties and methods
Description

If all you still think jQuery can completely replace JavaScript and want to learn Vue.JS, then this course is PERFECT for you because you will learn EVERYTHING you need here. 

Minumum Requirement: 

This course is designed for students with zero ES6 foundation, BUT you do need to know basic ES5. If you know how to set background color for a DIV using native JavaScript and jQuery, then you are good to go. 

    <div class='div' id='one'>Set a background color...</div>

Course Contents: 

This course has 46 sections and covers 17 areas:

  1. Vue JS Basics (Section 1-27)

  2. Ajax (Section 28)

  3. Connecting Vue to PHP and MySQL (Section 29)

  4. Command Line Instrument (Section 30)

  5. NPM (Section 31)

  6. Babel (Section 32)

  7. JS modular system, including module.exports, import and export (Section 33)

  8. Webpack (Section 33)

  9. Vue CLI (Section 34)

  10. Vue Single-file Components (Section 34)

  11. Vue Router (Section 35)

  12. VueX (Section 36)

  13. Axios (Section 37, 38, and 39)

  14. Vue UI Library: iView (Section 40)

  15. Advanced JavaScript: scope, scope chain, JavaScript Garbage Collection, Closure, IIFE(Instantly Invoked Function Expression), THIS, etc. 

  16. Node.js and Express.js

  17. Connecting Vue to Express and MySQL

  18. Nuxt.js

Note: The Vue version taught in this lesson will be 2.0+

Content Description:

Your VueJS study is made of two stages.

In stage one, you will learn Vue basics like Vue instance, directives, components, etc.   

In stage two, you will learn Vue single file component, Vue router, VueX and a Vue UI library called iView.

Between stage one and two, you will learn command line, npm, Babel, and Webpack. You need these skills to take the leap from stage one to stage two.   

By the way, skills you learn between stage one and stage two are not just for Vue. You will also need them when you are learning other modern JS-based frameworks. 

A frontend program alone is useless until it is connected to backend program and database.   

We will teach you how to connect Vue to PHP and MySQL via Ajax and Ajax-based techs like Axios. 

Throughout the course, you will be working on several projects so that you will always have a chance to practice and apply what you have learnt.   

Who this course is for:
  • Anyone who wants to learn how to create front-end APPs using Vue
  • Anyone who wants to learn how to use command line instrument
  • Anyone who wants to learn how to use NPM
  • Anyone who wants to learn how to use Babel
  • Anyone who wants to learn how to use Webpack
  • Anyone who wants to develop single page applications using dot vue files
  • Anyone who want to learn how to use vue router, vuex and axios
  • Anyone who wants to learn how to use Express and nodejs
  • Anyone who wants to learn how to develop apps using Vuejs, PHP and MySQL
  • Anyone who wants to learn how to develop apps using vuejs, Expressjs and MySQL
  • Anyone who wants to learn Nuxtjs