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

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.