4.84 out of 5
296 reviews on Udemy

MEVP Stack Vue JS 2 Course: MySQL + Express.js + Vue.js +PHP

VueJS, Command Line, Babel, NPM, Webpack, Vue JS CLI, Single-file Components, Vue.js Router, VueX, Axios, iView, Express
OnlyKiosk Tech
1,176 students enrolled
English [Auto-generated]
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

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

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.   

Getting Started

Road Map of the Current Stage
Getting to know what Vue.js is and how to install it

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

Create our first Vue.js program and display text using it

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. 

Controlling attribute value using Vue.js

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. 

PROJECT: create our first Vue.js APP

Road Map of the Current Stage
Creating the news reading block used by BBC

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. 

Generating contents automatically using the V-FOR directive

Road Map of the Current Stage
The drawback of our BBC news reading program and the solution: V-FOR directive

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

V-FOR in a slightly more complicated application scenario

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. 

Apply V-FOR to the BBC news reading program we created before

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. 

Getting to know PROXY

Road Map of the Current Stage
Have you found a problem?

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

Introduction to the concept of PROXY

In this lesson, you will learn what proxy is.

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

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

How to communicatedbetween VM.data and VM.methods

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

The V-ON directive -- Vue's answer to handling events

Road Map of the Current Stage
Introduction to the V ON directive

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

Conditional rendering: using V-IF, V-ELSE, and V-SHOW

Conditional rendering

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. 

V-MODEL: collecting user-submitted data

Introduction to V-MODEL

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

Using V-MODEL in projects

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

Lazy modifier and number modifier

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

Using v-model in other tags: textarea, radio button, checked box, etc.

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

Combining v-for and v-model and creating a list DYNAMICALLY

Creating a list dynamically

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

Computed and Filter

The difference between COMPUTED and FILTER

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.

Introduction to FILTER

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

Introduction to COMPUTED

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. 

Project: reversing letter order using COMPUTED

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. 

Two-way data exchange between DATA and COMPUTED

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

Controlling CSS using V-BIND

Controlling CSS Part 1

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 2

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.

Porject: remaining character calculator

Project analysis

In this lesson, we are going to create an APP that can calculate the character total for you. First, we need to do a program analysis. 

Creating the APP

In this lesson, we will show you how to create the remaining character calculator. The source code of the program is included. 

Vue Components

Introduction to Components

Component is one of Vue's most powerful and also best features. 

In simple words, component is a set of codes that can be repeatedly used. It allows us to write less but do more.

For dynamic websites like e-commerce, social media, email, component is a very good tech solution.

Using a component includes two steps: registration and installation.

There are two types of components you can register: global and local.

Global component can be used by all Vue instances. Local component can only be used by one specific Vue instance.

Components can only be installed in areas controlled by Vue. In other words, every component must have a parent DIV and a controlling Vue instance.

Just like a Vue instance, a component also have a data property. Its own data is stored here.

Apart from its own data, component can also exchange data with the outside world.

Sending data into a component requires props.

Sending data out of a component requires the emit method and self-defined event.

If we are using more than one component at a time, data exchange between components is also inevitable.

Simple data exchange between sibling components is achieved through central event bus.

Complicated data exchange between sibling components relies on VueX.

For small and simple projects, there is no need for VueX. The central event bus is already good enough.

Registering and installing our first component and component naming rules

In this lesson, we will try our first component. The component we use will be a global one. 

Register a local component

You do not always need a global component. Sometimes, a local component might fit your demand better. 

Sending data into a componnet

Introduction to props

The component we have tried so far is the simplest one. It does not need to exchange data with the outisde world. In this lesson, we will learn how to send data into a component. Sending data into a component requires Props. Prop is the door linking component with the outside world. 

To use a prop, we must first declare it in componet registration. 

After a prop has been declared, we can display it in component template. We can display prop as text as well as attirbute value. 

Prop value is assigned in the component tag. Therefore, the component tag is the interface between a component and the Vue instance.

Demonstration of sending data into component using props

We have learnt how prop works. Now, let's try it. We create a component and declare a prop. We send value into the component using the prop. 

Review of how to use props

By comparison, sending data into a prop is a complicated operation, especially for complete beginners. Therefore, we believe that it is very necessary to arrange a review session for you. 

Sending data out of a component

An analysis of how to send data out of a component

Using props, we can send external data into a component. Then we should also be able to send data out of a component. In this lesson, we will show you how to do that. 

Sending data out of component using $emit() and self-defined event

The emit method will send data to the designated self-defined event. The self-defined event is installed in the component tag. In the component tag, the self-defined event is connected with an inline method. The inline method will relay data sent by the emit method to Vue data. 

Just like using props, the inteface between component and Vue instance is still the component tag. 

Sending multiple values simultanesouly

Sometimes, sending one data at a time is just not enough. In this lesson, we will show you how to send several data simultaneously. 

Clean a dead corner: using original event on component tags

Before we carry, we got a dead corner to clea. By far, we have only been using self-defined event on component. But what if we want to use original events on component? What do you think will happen? 

Watch this lesson to find out. 

The truth of V-MODEL

The truth of the V-MODEL directive

We have learnt and used the V Model directive. In this lesson, we will discover its truth. You will be shocked. We will also learn a new special Vue variable: $events.

V model is actually a syntax augar. It is not a real directive. Vue develops it to facilitate our operation. In fact, v model equals to a combination of v on and v bind. 

Project: creating a price calculator

Project analysis

The Vue manual mentioned a calculator APP. For beginners, the manual is being too concise. So we decided to recreate this APP in a more detailed and progressive way. 

In this lesson, we will show you a program analysis. We will show you the whole picture first.

Creating the price calculator

In this lesson, we will create the calculator APP from ground zero. In the end, we will install v model in the component tag. Therefore, before starting the course, you are strongly recommended to review the class teaching the truth of the v model directive. 


Introduction to slots

In this lesson, we are going to learn something called slots. It offers us more flexibility when dealing with components. 

Using slots in news page

In this lesson, we are going to create a news program and use slots in it.

Named slots

The slot we have used does not have a name. This has greatly limited its application and power. Fortunately, Vue has prepared named slot for us. 

Named slots require us two use two attributes: name and slot.

Name is installed in the slot tag and slot in the contents to be displayed through the slot. 

Data exchange between sibling components: Central Event Bus

Data exchange between sibling components Part 1
  • We now know how to send data into and out of a component. In the future, you will usually use more than one component at a time. Data exchange between components is also ineveitable. 
    So how do components communicate with each other?  The answer is central event bus and VueX. Central event bus is for simple data exchange. VueX is for complicated ones. 
Data exchange between sibling components Part 2

Central event bus is an object. We mainly use its two methods for data exchangfe between compoents: emit and on.

Emit is for triggering self-defined event and on is for monitoring self-defined events. 

When the self-defined event is being triggered, the emit method will also send user-submitted data to it. The on method will receive that data and hand it over to the corresponding property in component data. 

Creating a news reading and editing APP

Program analysis

In this lesson, we are going to combine everything we have learnt and create a complicated app. We can use this APP to read and edit news contents. 

Generate formatted data and time

We need to display edited time in our APP. Therefore, in this lesson, we are going to show you how to generated formatted date and time. 

Working on the project Part 1
Working on the project Part 2

VUE.JS: New contents added by Vue 2.3: .sync modifier and model option

The .sync modifier

Vue 2.3 has brought us a new feature. It is called the sync modifier. Want to know what it is? Watch this lesson to find out. 

Custom v-model

In this lesson, we are going to learn how to customize the v mode directive to make it better suit our demands. 

Scoped slots

Introduction to scoped slots

In this lesson, we are going to learn a new type of slots: scoped slots. Want to know what it is? Watch this lesson to find out. 

Demonstration of using scoped slots
Using scoped slots on lists

Component misellaneous

is, keep-alive, and v-once
Retrieving the object representing the component using ref

Vue API and reactivity in depth

APT Part 1
API Part 2
API Part 3
API Part 4
API Part 5
Try something interesting
API Part 6
API Part 7
API Part 8
API Part 9
API Part 10
API Part 11
API Part 12
API Part 13

Transition Effects

You can view and review the lecture materials indefinitely, like an on-demand channel.
Definitely! If you have an internet connection, courses on Udemy are available on any device at any time. If you don't have an internet connection, some instructors also let their students download course lectures. That's up to the instructor though, so make sure you get on their good side!
4.8 out of 5
296 Ratings

Detailed Rating

Stars 5
Stars 4
Stars 3
Stars 2
Stars 1
30-Day Money-Back Guarantee


16 hours on-demand video
7 articles
Full lifetime access
Access on mobile and TV
Certificate of Completion
Support Buy $0