OpenCourser
Learn skills that shape your future
Visit OpenCourser.com
If 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
Minimum 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 18 areas:
If 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
Minimum 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 18 areas:
Vue JS Basics (Section 1-27)
Ajax (Section 28)
Connecting Vue to PHP and MySQL (Section 29)
Command Line Instrument (Section 30)
NPM (Section 31)
Babel (Section 32)
JS modular system, including module.exports, import, and export (Section 33)
Webpack (Section 33)
Vue CLI (Section 34)
Vue Single-file Components (Section 34)
Vue Router (Section 35)
VueX (Section 36)
Axios (Section 37, 38, and 39)
Vue UI Library: iView (Section 40)
Advanced JavaScript: scope, scope chain, JavaScript Garbage Collection, Closure, IIFE(Instantly Invoked Function Expression), THIS, etc.
Node.js and Express.js
Connecting Vue to Express and MySQL
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.
This lesson is about giving you a brief introduction of what Vue.js is and how to install 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.
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.
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.
You will learn how to use the V FOR directive in this lesson.
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.
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.
This lesson will first give you a review of everything we have learnt so far and use it to introduce PROXY to you.
In this lesson, you will learn what proxy is.
In this lesson, we are going to prove to you that PROXY also works on methods.
In this lesson, we will show you how to exchange data between vm.data and vm.methods
Using the v-on directive, we can monitor events.
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.
Using v-model, we can easily collect user-submitted data.
In this lesson, we will show you how to use v-model in projects.
Using lazy and number modifier, we can customize the performance of v mode to make it better suit our demands.
You can use the v-model directive on other tags like textarea, radio button, checkbox, etc.
In this lesson, we will show you how to create a list dynamically. You can add and remove list item in real time.
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.
In this lesson, we are going to learn how to use filter.
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.
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.
You can exchange info between vm.data and vm.computed. In this lesson, we will show you how.
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.
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.
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.
In this lesson, we will show you how to create the remaining character calculator. The source code of the program is included.
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.
In this lesson, we will try our first component. The component we use will be a global one.
You do not always need a global component. Sometimes, a local component might fit your demand better.
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.
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.
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.
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.
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.
Sometimes, sending one data at a time is just not enough. In this lesson, we will show you how to send several data simultaneously.
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.
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.
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.
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.
In this lesson, we are going to learn something called slots. It offers us more flexibility when dealing with components.
In this lesson, we are going to create a news program and use slots in it.
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.
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.
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.
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.
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.
In this lesson, we are going to learn how to customize the v mode directive to make it better suit our demands.
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.
In this lesson, we are going to learn how to generate transitioning effects using Vue.
Save
Includes practical coding exercises and projects.
Provides a strong foundation for beginners.
Covers a wide range of topics from front to back-end.
SaveOpenCourser helps millions of learners each year. People visit us to learn workspace skills, ace their exams, and nurture their curiosity.
Our extensive catalog contains over 50,000 courses and twice as many books. Browse by search, by topic, or even by career interests. We'll match you to the right resources quickly.
Find this site helpful? Tell a friend about us.
We're supported by our community of learners. When you purchase or subscribe to courses and programs or purchase books, we may earn a commission from our partners.
Your purchases help us maintain our catalog and keep our servers humming without ads.
Thank you for supporting OpenCourser.
