Vue.js 2 Academy: Learn Vue Step by Step | Chris Dixon | Skillshare
Drawer
Search

Playback Speed


  • 0.5x
  • 1x (Normal)
  • 1.25x
  • 1.5x
  • 2x

Vue.js 2 Academy: Learn Vue Step by Step

teacher avatar Chris Dixon, Web Developer & Online Teacher

Watch this class and thousands more

Get unlimited access to every class
Taught by industry leaders & working professionals
Topics include illustration, design, photography, and more

Watch this class and thousands more

Get unlimited access to every class
Taught by industry leaders & working professionals
Topics include illustration, design, photography, and more

Lessons in This Class

    • 1.

      Welcome!

      2:29

    • 2.

      What is Vue.js and why should I use it?

      2:16

    • 3.

      Visual studio installation

      1:51

    • 4.

      Section Intro: Vue Basics

      0:30

    • 5.

      Download project starter

      2:32

    • 6.

      Installing Vue.js

      3:05

    • 7.

      The Vue instance & the data object

      7:28

    • 8.

      Templates & the virtual DOM

      3:31

    • 9.

      Two way data binding with v-model

      3:08

    • 10.

      Event handling & methods

      5:46

    • 11.

      List rendering

      2:54

    • 12.

      Conditional rendering in Vue

      5:19

    • 13.

      Binding elements to attributes

      4:11

    • 14.

      Binding styles

      4:48

    • 15.

      Vue shorthand syntax

      2:42

    • 16.

      Outputting text & HTML

      6:25

    • 17.

      V-if vs v-show

      3:10

    • 18.

      Using Javascript expressions

      4:22

    • 19.

      Section Outro: Vue Basics

      0:32

    • 20.

      Section Intro: A Deeper Look At Vue

      0:39

    • 21.

      Adding a progress bar

      7:46

    • 22.

      Computed properties

      8:57

    • 23.

      Watchers

      3:50

    • 24.

      Key events & modifiers

      3:21

    • 25.

      Filters

      6:08

    • 26.

      More on looping: keys & index numbers

      5:27

    • 27.

      Using multiple Vue instances

      6:25

    • 28.

      Looping with objects

      6:56

    • 29.

      Adding our navigation links & keys

      6:16

    • 30.

      Accessing Vue instances externally

      4:32

    • 31.

      Vue instance properties & methods

      4:50

    • 32.

      Referencing elements with ref

      4:45

    • 33.

      Using string templates

      7:06

    • 34.

      The Vue lifecycle

      5:40

    • 35.

      Vue lifecycle hooks in action

      6:51

    • 36.

      Section Outro: A Deeper Look At Vue

      0:39

    • 37.

      Section intro: Build tools & Workflow

      0:37

    • 38.

      Installing Node & NPM

      4:08

    • 39.

      Scaffolding projects with the vue-cli

      8:06

    • 40.

      Exploring our project layout and build tools

      9:26

    • 41.

      Using the data object with single file templates

      7:49

    • 42.

      Section outro: Build tools & Workflow

      0:19

    • 43.

      Section intro: Introduction to Components

      0:41

    • 44.

      What are components?

      5:07

    • 45.

      Registering global components

      10:57

    • 46.

      Registering local components

      5:26

    • 47.

      Creating single file components

      8:37

    • 48.

      Adding the card front component

      9:07

    • 49.

      Emit data to parent components

      9:21

    • 50.

      Dynamic components

      2:49

    • 51.

      Creating the additional card components

      5:53

    • 52.

      Creating the text input component

      9:40

    • 53.

      Receiving data from the text input

      4:38

    • 54.

      Creating the text output component

      3:38

    • 55.

      Passing data with props

      5:37

    • 56.

      Keeping components alive

      2:26

    • 57.

      Scoping CSS styles

      7:40

    • 58.

      Prop validation

      5:01

    • 59.

      Passing prop data to a style object

      3:19

    • 60.

      Introduction to slots

      9:38

    • 61.

      Slot scope & fallback content

      4:57

    • 62.

      Named slots

      3:30

    • 63.

      Section outro: Introduction to Components

      0:42

    • 64.

      Section intro: Components Continued & Firebase Storage

      0:37

    • 65.

      Setting up Firebase

      6:55

    • 66.

      Creating the ImageUpload component

      6:40

    • 67.

      Uploading images to firebase

      9:44

    • 68.

      Image preview thumbnail

      4:11

    • 69.

      Upload progress bar & $emit file data

      8:54

    • 70.

      Image output component

      9:09

    • 71.

      Downloading images from Firebase

      6:15

    • 72.

      Set image button

      7:20

    • 73.

      Text options menu: font sizes

      8:00

    • 74.

      Text options menu: text alignment

      5:03

    • 75.

      Text options menu: font style & weight

      9:56

    • 76.

      Remove image button

      4:21

    • 77.

      Passing data with callbacks

      6:40

    • 78.

      Making images draggable

      5:48

    • 79.

      Finishing the CardInsideLeft component

      4:50

    • 80.

      Finishing the CardInsideRight component

      2:48

    • 81.

      Finishing the CardBack component

      3:39

    • 82.

      Introduction to the event bus

      7:26

    • 83.

      Sending events to the event bus

      6:51

    • 84.

      Receiving events from the event bus

      13:05

    • 85.

      Adding mixins

      6:51

    • 86.

      Section outro: Components Continued & Firebase Storage

      0:35

    • 87.

      Section intro: Transitions & Animations

      0:31

    • 88.

      Transition classes

      2:58

    • 89.

      Adding CSS transitions

      6:47

    • 90.

      Adding CSS animations

      5:58

    • 91.

      Component transitions & transition modes

      3:23

    • 92.

      Javascript hooks introduction

      2:03

    • 93.

      Javascript hooks in action

      8:51

    • 94.

      Mixing animations & transitions

      4:59

    • 95.

      Custom transition classes

      3:14

    • 96.

      Initial render transitions

      3:07

    • 97.

      Element transitions & keys

      4:45

    • 98.

      Group transitions

      5:43

    • 99.

      V-move class & dynamic transition names

      4:06

    • 100.

      Section outro: Transitions & Animations

      0:32

    • 101.

      Thank you

      1:06

    • 102.

      Follow me on Skillshare!

      0:23

  • --
  • Beginner level
  • Intermediate level
  • Advanced level
  • All levels

Community Generated

The level is determined by a majority opinion of students who have reviewed this class. The teacher's recommendation is shown until at least 5 student responses are collected.

2,103

Students

2

Projects

About This Class

*** UPDATE!

Vue 3 has been released and this class has been replaced with a new one to cover this new version:

https://www.skillshare.com/classes/In-Depth-Vue-3-For-Beginners/1881663970

***

Take your HTML, CSS & Javascript skills to the next level by learning one of the hottest Javascript frameworks available today, Vue.js!

If you are unfamiliar with vue.js, or Javascript libraries and frameworks in general, some of the questions you may be asking is:

What is Vue.js?

And why should I learn it in the first place?

Vue.js is a really fun and easy to use Javascript framework for building user interfaces

The core of the framework is very lightweight and fast, and it can be used in projects of any size

From easily dropping it into an existing website or application to just control a part of it such as adding new components,

Right through to medium or large single page applications

Considering the lightweight size of the vue.js core, it is still packed full of features which you will learn about during this course.

During this course you will build 2 fun, exciting and challenging projects, to apply everything you will learn instantly.

We begin with a guest list app where users can add their name to an event guest list. This is a simple app but will guide you through all of the vue.js essentials such as:

  • Two way data binding
  • Event handling
  • Templates and the Virtual DOM
  • List & conditional rendering
  • Binding attributes & styles
  • The Vue instance 
  • Javascript expressions
  • Instance properties: Data, Computed, Watchers, Methods, Filters etc
  • Looping & filters
  • Refs and other instance properties and methods
  • Vue lifecycly
  • Plus much more!

You will then build on this knowledge, by building a greeting card application, where the user can create and edit their own custom greeting card. They can add their own text and images to create a personalised card.

This project introduces more concepts such as:

  • Components (local, global and single file)
  • The Vue CLI for scaffolding projects with build tools such as Webpack & Babel
  • Installing Node & NPM
  • Passing data with $emit 
  • Storing & retrieving images from Firebase
  • Props and prop validation
  • Slots and slot scope
  • Binding to menu options to change fonts & styles
  • Event bus
  • Mixins
  • Plus much more!

So are you ready to learn one of the hottest and most upcoming Javascript frameworks available?

Join me now and I look forward to having you on board!

Meet Your Teacher

Teacher Profile Image

Chris Dixon

Web Developer & Online Teacher

Top Teacher

Hello, My name is Chris and I am a Web Developer from the UK. I am an experienced trainer leading web development bootcamps and also teaching online courses.

My main areas of interest are Vue.js, WordPress, Shopify, Javascript, eCommerce, and business. I am passionate about what I do and about teaching others. 

Whatever your reason for learning to build websites you have made an excellent career choice.

My personal motivation was to become my own boss and have more freedom and flexibility in my life. I also enjoy the technical challenge it provides and the way it constantly evolves. I built my first website back in 1999 and I have watched the web evolve into what it is today.

I try to make my courses enjoyable and try to remember what it was like wh... See full profile

Level: Intermediate

Class Ratings

Expectations Met?
    Exceeded!
  • 0%
  • Yes
  • 0%
  • Somewhat
  • 0%
  • Not really
  • 0%

Why Join Skillshare?

Take award-winning Skillshare Original Classes

Each class has short lessons, hands-on projects

Your membership supports Skillshare teachers

Learn From Anywhere

Take classes on the go with the Skillshare app. Stream or download to watch on the plane, the subway, or wherever you learn best.

Transcripts

1. Welcome!: Welcome to the Vue.js Academy course. I'm excited to have you with me. My name is Chris, and I'm a web developer and also an experienced online course creator, teaching thousands of satisfied students. Vue.js is one of the most up and coming JavaScript frameworks available today. It's also one of the most fun to learn and it's packed with lots of amazing features enabling you to build both small websites right through to complex single-page applications. So why choose this course over other Vue.js courses available? Well, this course takes a project-based approach. We will see exactly how each concept you will learn immediately fits into real projects. The course is beginner friendly too. We start by building a guest list application where we'll start off with the basics. I have provided a [inaudible] starter template for the first project so we can dive straight into learning what Vue.js has to offer. During this project, you become confident with how Vue works, and also the core concepts such as binding data, methods, computer properties, and so much more. You will also learn about the Vue life cycle stages we can tap into. Project 2 builds on what we've already learned so far. We introduce you to build tools and also improve our workflow by using the latest technologies such as the Vue CLI, Webpack, and Bubble too. This project will be a greeting card application where the user can edit and create their own personalized greeting card. Along with this being a fun project to build, you will learn so many techniques, such as using components and how to pass data between them along with integrating your app with Firebase for image storage. Also, we will cover adding animations and transitions to your apps to make sure they really stand out. Everything you learn will be immediately put into practice in the projects to really give you a better understanding of how they all fit into real applications. What are you waiting for? Hit the Sign Up button now and learn one of the hottest JavaScript frameworks available today. 2. What is Vue.js and why should I use it?: If you are unfamiliar with vue.js or JavaScript libraries and frameworks in general, some of the questions you may be asking is, what is vue.js and why should I learn it in the first place? Well, vue.js is a really fun and easy to use JavaScript framework for building user interfaces. The core of the framework is very lightweight and fast, and it can be used in projects of any science from easily dropping it into an existing website or application to just using it to control a small part, such as adding a new components, right through to medium or large single-page applications. Considering the lightweight size of the vue.js core, it is still packed with lots of features which you will learn about during this course. The core can also be extended to add more features, such as frontend routing and state management. If you've built websites before, you should already be familiar with HTML, CSS, and JavaScript, which are the building blocks of vue.js applications. This means you can make use of your existing skills to [inaudible] up and learning even faster. Vue.js handles the view layer only, meaning you're free to integrate it with any of the libraries backends, making it really easy and flexible to adopt. If you've used other frameworks or libraries such as React, a lot of the core concepts will be familiar, such as using a virtual DOM and building reusable components. React is also great to use too, but to my opinion, vue.js is a lot easier to get started with, and is also being seen to outperform React on certain performance tests. These are just some of the reasons why vue.js has seen a huge rise in popularity and also looks at to become an even bigger player in the future. Now, we know some of the benefits of using vue.js, now let's get Visual Studio code setup, so we can jump straight into building our first project. 3. Visual studio installation: For this course, we will need a few things to get up and running. First, we need a text editor. You may already have a preference or one that you already use. For this course, I'll be using Visual Studio Code, which is ideal for JavaScript coding, and also has a built-in terminal which we'll need later in the course. You can use any text editor you like but here are some popular texts editor options, such as Atom, Brackets, WebStorm, and of course, Visual Studio Code. If you already have one of those and have a web browser, feel free to move on to the next video. If not, I would recommend that you go over to code.visualstudio.com and follow the download instructions for your platform. Once you've done this, comeback and we'll add some plug-ins to help them working with Vue.js. Once the installation is completed, I'm going to add a plug-in to add Vue.js to code snippets and also some syntax highlighting. If you open up your text editor and click on the extensions icon at the bottom of the options, you'll see I already have Vue 2 Snippets installed. To install this, you can click on the search bar and search for Vue 2. What I'm going to use is Vue 2 Snippets, which is by [inaudible] , then click on the install button and you're good to go. Finally, you will also need a web browser. I would recommend Chrome by Google, but you can use any web browser you like. This is it for the initial setup. Now let's jump into building our first Vue.js application. 4. Section Intro: Vue Basics : As with all my courses, I like to waste no time in getting our hands dirty and actually building real projects. This course is no different and we're going to get started by building a guest list application, where the user can register their interests in an event and have the name added to the guest list. The project will be relatively simple, but we'll cover all the basics. You will need to get started building vue.js-ups. Let's go ahead and get started. 5. Download project starter: Attached this video is a starter project which we're going to use to jump straight into vue js. I want to download mine and place it onto the desktop for easy access. But you can place yours anywhere. Just as long as it's convenient for you. Now you should already have your text editor all set up. I'm going to open Visual Studio Code and then once it opens, I'm going to drag the project starter over into the text editor. Then let's take a little look at what's included. If we open up the index.html, it's just a basic HMO's data. In head section we just have some basic meta tags, the title. We also have some links to bootstrap. We are just going to use this for some basic styling and layout. The body of the project starts with a main div, which has an id of app. This is going to be the main container and we'll take a look at this in more detail when we look at the view instance. Well then, you just have some basic rows and containers and some information about the guest list. If we open up the project folder and then if we double-click on index.html. You can then see the basic structure of what we have. We have a row which has some information about the events, such as the event date, the event title and a description. We also have a text input where the user can add their name and then submit it to add it to the guest list. Then below that we have another row and then an overall below this, which is going to be the place where all the names are added to. At the moment it says no names added yet. But we'll add the functionality throughout this section to make this work. Over in the app.css we just have some basic styling just to make it look a little bit nicer. The app.js is empty for now. But this is the place where we'll add the view JS functionality as we go through this section. This is just a basic overview of what's included with the project as a start-up package. This will become a lot more familiar as you go through this section. Next up we'll look at how to install vue js and how to add it to the starter projects and then we'll begin working inside this app.js by taking a look at the view instance. 6. Installing Vue.js: In the last video, we should have downloaded the project starter, which I've placed on my desktop for easy access. You should also have a text editor ready to use. In my case, I'm using Visual Studio Code. In this video we're going to show you a few examples of how we can get started with installing Vue.js. I'm going to go over to my web browser and I'm going to be using Chrome for the rest of this course. Then we're going to go over to Vue.js.org, which is the official website for Vue.js. If you click on the guide on the top right-hand corner, and then once it loads up, you should see a navigation menu on the left. To begin, we need to go on to the installation menu, and he will provide you with some options of how to get started. The first one is how to include Vue.js Within script tags, so we can click on either the development version or the production version. The development version has the debug mode and also the warnings. The production version doesn't have these and it's minified. All we need to do is click on one of these buttons and then we get the download, then we can save these files inside of our application and link to them using script tags. This technique is just the same as including any of your scripts such as j-query. Another option is to use the CDN link, we shall be using for this project. This is a link where the Vue.js library is hosted externally. If we click on the recommended link there, wouldn't taken to a hosted version of Vue.js, and this is the latest version. Will come back to this just in a moments. The next option is using NPM or the Node Package Manager. We will be using NPM In the next project, but for now I just want to keep things simple, we'll focus on Vue. js and then in the basics. There's also the Vue.cli, which is an easy way to scaffold out Vue.js projects. Again, we'll use this later on, but for now I'm just going to go up to the CDN link and then click on the link, and then we need it copy this URL link. Then if we go back over to your text editor and then open up the projects. If we go over to the index.html, when it go to the head section just below the title, and then add in the script tags, and then we can add the source attributes and then paste in the link to the Vue. js library, and then save that. That's how quick and easy is to add Vue.js as a CDN link. With Vue.js now added to our app, we'll now move on to the next video where we'll take a look at adding the Vue.instance. 7. The Vue instance & the data object: Now we have access to the Vue.js library by using ECD and link. We can now begin working with inside of our app.js file. App.js is included in starts project. You should already have download it. This file you can name anything you like. So you're free to choose if you prefer. We will begin by accessing the view object, and this allows us to create a new view instance by typing New View, followed by the parenthesis and a semicolon. This new view instance is going to basically control our application and the HTML data to be rendered to the screen. We then need to pass in a options objects, which contains various options, which we'll explore throughout this course, such as HTML view, which HTML element we wanted to mount to. It also contains all of our methods and data. First, let's take a look at el. This keyword tells you which HTML element to control. In our case, we want to control the index.html page. So I'm going to use the main surrounding div container, which would give a AID of up. So we can set the string value of el to be equal to up with the hash prefix because it's AID. This is just like a CSS selector. So if we wanted to control a div with a class instead of an ID, we'll just replace the hash with a dot. Now we've selected our elements. We want to be working with the data property. This contains an object which stores all of the data we want to use inside of this view instance. At the moment, all of the data inside our app is just plain HTML, which Vue.js Clooney has no control over. For example, all the data about the listed events, such as the event dates, the event title, and event description is hand coded. We can change this by adding it to the data object inside of our view instance. So I'm going to begin transferring this hand-coded information over to our date property. So let's begin by including dates. So select the date from there, put it out HTML. Then if we go over to our dates property, we can set a name for this dates. So I want to call mine eventDate followed by the column, and then inside of a string, we can add the date inside of there. We can then do the same with the event title. So back over in the index page, if you put the name of Summer Festival, and then inside of our data, back over in our app.js, and then next we'll call this the eventTitle. Then just as before with our days as a string. So pasting this between the quotations. Then finally, we will also do the same for the event description. So go over to the index page, put the event description, and then just under the eventTitle, we'll create the eventDescription data name, and then paste this in as a value. So now we need a way of adding this data back into our HTML. To insert this data into our code, we do it with a special template syntax of double curly braces. You will also see this referred to as mustache syntax or text interpolation. This is how we link our data with the DOM. This also means that the data is reactive and will be updated when there is a change with the data. Inside of these curly braces, we can add the name of the date property which we just created. So let's start with the eventDates in the place of where we put out the date just before. So let's save that and refresh the browser, and now we can see the date is appearing back on the screen. So this date is now working because it's inside of the double curly braces. So Vue.js knows to look for this property name inside of the date object which we just created. It will also be updated whenever the value of eventDate is changed. So what I'd like you to do now is do exactly the same for the eventTitle and also the eventDescription. So pause and give that a go. If it's something you don't feel comfortable with, just yet, don't worry. I'll continue now by adding the eventTitle. So do the same just as before. In place of the title, we'll add the double curly braces and then add the eventTitle. Finally, in a place where we put the eventDescription will also add the eventDescription into there. So save that and we'll do a final refresh just to check it's all working okay. So it's not looking great. We've got the dates, the title, and also the description, if [inaudible] back on the page. But this time we have Vue.js controlling the data. So finally, I just want to finish off with one last thing. Because these free data properties are related, I am going to group them together inside of their own events object. This is totally optional, but it makes sense especially if we extend up by creating more than one events. So back inside the data property, we want to create the events object. Then I'm going to cut the eventDate, the eventTitle and eventDescription, and then make sure these pasted inside of the new event object. Now back over in the browser, if we do a refresh, we see that the data disappears. This is because we need to tell Vue that these properties and now inside of an object called events. So it just means make one more change inside the index page. So all we need to do is our events in front of eventDates, the same with eventTitle, and then finally the same with eventDescription. So hit save. Now if we go back over to the browser and gives a refresh, we should see that all our data is back on the screen. So now we've created our Vue instance and looked at how to use the data object to control a text inside of our application. Next up, we'll take a look at how Vue JS handles templates and utilizes the virtual DOM. I'll see you there. 8. Templates & the virtual DOM: In the last video, we looked at how to create a Vue instance and also how to add reactive data to our app. How does Vue js manages data to make it reactive and update our page when there is a change? But let's take a little look at what goes on in the background. If we go to the browser developer tools inside of Chrome, we can access these with a right-click and then select "Inspect". If will then select the Div with the class of card block, we can take a little look at the contents and we can see that the event title, the event dates, and the event description is added between P-tags or headings. So the HTML output is different to what we have typed inside of the Editor. We don't have any of the double curly brace syntax and we cannot see the names of our data properties, such as event title. This is because Vue.js takes our HTML code and creates a template based on it behind the scenes. This templates, which is created is unused to render to the DOM with valid HTML code. Using a template instead of directly updating the DOM with our code also provides additional benefits. When our data, for example, is updated inside of the app, Vue then works out which parts of the template is changed. Since Vue is aware of exactly which part is changed, it will only re-render this change part of the template. So by only re-rendering the minimum amount of code to the real DOM. This has the effect of making our Vue.js applications really fast as manipulating the DOM is typically one of the most expensive operations to perform. If you're not familiar with the DOM, it stands for Document Object Model. It's a structured representation of a documents. In our case, the document being the webpage. In most simple cases, the DOM, which is created, looks like our HTML code, which were right and here we see a typical visual representations of the DOM, which is like a tree of objects starting with the HTML elements on the top and then we have the head section and the body section, and then all of our nested elements contained within the head section of the body section. So this should look familiar to you if you've had some HTML experience. Because obtained need DOM elements takes time, Vue.js also uses what is called the virtual DOM. These templates which Vue. js creates a compiled into virtual DOM render functions. The virtual DOM is like a copy of the real DOM and this allows view behind the scenes to compare the real DOM with the virtual DOM and only updates where and when is necessary. So don't worry too much if you don't quite understand what this all means for now. We get plenty of practice with how Vue works and how it renders templates as you go for the course. So this is how Vue.js works with templates and also the virtual DOM. I just wanted to give you a little background into what is going on behind the scenes when we're writing our code. Next up, we'll look at two-way data mining using a V model directive. 9. Two way data binding with v-model: We have looked at creating our Vue instance and added the data objects. I want to set a new data property, but this time I'm going to use it with a view directive called v-model. Directives have a -v prefix, and you will see them a lot throughout this course. The special attributes provided by Vue.JS, which add special reactive behavior to the DOM using v-model sets up two-way data binding. If you are unfamiliar with two-way data binding, it just means that the data can be passed both ways. In the examples we've looked at so far, we can update the properties inside of the data objects, and then these changes are then passed to the Vue. With two-way data binding, we can still do this, but we can also update the Vue elements such as input fields and this then updates the value of our data. Vue.JS makes this two-way data flow really simple, by providing us with this directive called v-model. Let's begin by setting v-model on our text input fields. If you go over to our index.html page, and then locate our text inputs, we can add v-model and then set the name of the data property want to bind to. So in our case, "newNameText". Next we need to set newNameText as a property in the data objects. This way, we can set the initial value if we want to, and because it's two-way data mining we can also update the value with the input field. So over in app.js outside the events object add our property of newNameText: So I'm going to set the initial value of newNameText to be equal to an empty string. We can add an initial value inside of that if we want to. So to see the value of newNameText we just need to go over to the index.html page, and then use the double curly brace syntax to output the newNameText. Now if we type anything inside the input field, we see the value of newNameText updated immediately. This is how we can use two-way data binding with Vue.JS. One important thing to remember is that Vue.JS does not care about the placeholder or initial value of the input fields. The data inside of the Vue instance will always be a priority and considered correct over the input fields initial value. We will cover using v-model weighed over input types and text areas later on in the course. For now though, let's move on and take a look at event handlers and how we can take the names added to this input field and push them to an array. 10. Event handling & methods: Now we've looked at two-way data binding. I want to now move on to capturing the value entered into the input fields and then push it to an array. This array will hold all the names entered into the input field and then we can list all of these names inside of the attendance section below. We want to go to the app.js and create our empty array. I'm going to add a new data property called guest name and initially we're going to set this to an empty array. Now this is created over in index.html. Now we need to create an event handler to push the names to this array. Once the submit button has been pressed, in vue.js, we use the V on Directive to listen to DOM events. These DOM events and not specific to view.js. We can use any of the DOM events normally available to us, such as onClick, keyup, keydown, and many, many more. Again, just like in the last video where we use V-model, this directive also has the v dash prefix. Next we locate our form elements and then as an attribute, we can add our V on Directive. First we add V on, and then after the colon we add the name of the event handler we want to trigger. In our case, we're going to listen for the submit event and then we add the name of the method which we want to run once the form has been submitted. After the name of the events, in our case of myths, we can also add event modifiers. A common event modifier is to prevent the defaults. If you use JavaScript for working with inputs and forms of all, you may have already used event dot prevent default. This stops the default behavior, which for the submit button is to refresh the page. Few just makes this really easy for us to address behavior to our event handlers simply by adding it after the event handler name just like this. Prevent the default we'll stop our data from being lost when the page is refreshed. This also over event modifiers too, which we'll cover later on in this course. For now we've added form submitted as the name of our method, but not yet created it inside of our view instance. Let's do this now over in the app dot js. Just like when we added the data property objects inside of the view instance, we can also use the reserved methods keyword. Methods also takes in an object, so we'll open up a set of curly braces. Inside here we can add our first method of forms submitted. This method is triggered each time the form is submitted. Form submitted is a function and inside this function we can begin by adding a console log, just to check this is working okay. We want to log to the console the value of new name text, which is linked to the input field. This keyword allows us to access all the properties inside of the view instance. To access the new name text property, we use this dot new name text. We've seen this a lot throughout the course. Now we'll go back over to the app and then go inside the console. We can type a name inside of the input field, and we should see the value appearing inside the console. Now we know this method is being triggered okay. We can now finish our method by pushing the new name value to the guest name array. Let's first remove the console log, and in the place of this we can select this dot guest name, which is the name of our array. Because this is an array, we can use the push method. Then inside the brackets, we'll tell vue.js, What we want to push onto the array. In our case, we want to push the value of the input fields, so we can select our word at this, dot new name text. Then to finish off this method, the last thing I want to do is once a name is being added to the array, we want to just clear the input field by setting this dot new name text to once again set to an empty string. To see the values which are inside of the array, we can use texts interpolation again, or the double curly braces syntax to output this inside the index.html. If we look for the level four heading, which has the text of no names added yet, we can use the curly brace syntax to output the guest name array. Now let's save that and we head over to Chrome and refresh the browser. We can now add names to the input field and now we've hit submit. This should now be pushed to the array and then outputed to the screen. We have the new names now added to the array, which is great. The names are just displaying as they are inside of the array, so at the moment it doesn't look very good. But not to worry, we'll fix this in the next video. We'll take a look at list rendering with For loops. 11. List rendering: We now take the users name inputs and push it to an array when the submit button is pressed. We did this by adding an event listener to the form and then calling a method when the form is submitted. This method inside of the Vue instance is some JavaScript code which takes the contents of the input field stored inside of new name texts and then pushes it to this guestName array. Now we have the guestName array we want to loop through these names and then render them to the screen. Vue.js, like normal JavaScript can do this with a for loop. However, Vue makes creating a for loop much simpler and cleaner than using Vanilla JavaScript. All we need to do is create a v-for directive like this. If we go over to the Index.html Page and then scroll down towards the Bomb. If we look for the div with a class of cards-success rounded and name-box, we're going to add our for loop to this div. So adding this for loop is as simple as adding attributes, just like before when we used v-model but this time we use v-for, and then what is set is to be equal to name in guestName. So this first name is totally up to you, you can name it anything you want. It's just an alias for each array element that will loop over, guestName is name of the source array so it's the one we just created before and it's output the contents of this for loop, we use the interpolation again. So you see double curly braces and then we type in name, which we've used in the for loop. So now we can save this, refresh the browser and now if we go up to the inputs, we can begin to add names and we now see them outputted to the screen but this time using a for loop v-for can also be added to over elements. We're not just limited to admit to a div. It can be added to a span, paragraph tags or anything you like. So now we see the contents of the array display twice, once using the for loop and then once from the last video, where we outputted the guestName/ with the guestName inside of the curly braces and save that and now we're just left with the contents of the for loop. So this is how easy is to create a for loop using Vue.js. Now let's move on to conditional rendering where we'll look at if else statements using Vue. 12. Conditional rendering in Vue: Our app is now coming well. When we add a name to the input box and hit "Submit", the name is added to the attending div down at the bottom. As you can see there we still have the text saying no names added yet. We now want to look at conditional rendering. Conditional rendering is not as complicated as it may sound. It simply will render some content depending on the circumstances just like a normal JavaScript if-else statements, if you're familiar with these. In our case, if there are names inside the guest name array, we want to display them at the bottom. If there are no names inside the array, we only want to show the text saying no names added yet. We can add this inside the index.html page. If we locate the div with the class of card block, inside of our div with the class of card block, we have two divs inside there. The first is where we want to loop through the names and display them inside of the div tags. I'm going to add a if-statement to this div. Vue just makes it really easy for us to do with the v-if directive. Once you add this as an attribute, we then want to check if the length of the guest name array is greater than zero. If there are any names inside the array, the condition becomes true and the div is then rendered to the screen. Otherwise, if the array is empty then the condition is false. The following div will be rendered if we add a v-else statement. So let's add v-else to the following div. For the v-else to work it must immediately follow the elements with the v-if directive. If for example, there was another div in-between these two, the else statement would not work. Give that a save and head over to the browser and give that a refresh. Now we'll see the statement saying no names added yet. Then if we go up to our input box and add a name, we see the name is added and also the text is removed. Such are working good and I want to add a normal JavaScript if statement to our form submitted method and the reason for this is if we go over to our form, and we enter a name, we can see added to the list. So that's fine. However, if we just go to the input and press enter without a name we can still see that something is added to the array. Other than this, if-statement will make sure that name must be entered before it's pushed to the array. We can do this over in the form submitted method in the app.js file. Inside the function body we'll construct the existing code with an if-statements and the condition we want to check is if this.newNameText. Length is greater than zero or if some characters have been entered, then we want to go ahead and push this to the array. Let's give that a saved and test that in the browser. If we hit "Enter" on the form input, we see that no new name has been added to the array. Let's just add a new name and test that's working okay. There we go so all the p is fine. The last thing I want to do in this video is to display how many guests are attending or how many names we have inside the array. You can see if you just look up above the names, we can see there's a div with the class of card header with an attending section. Inside of the brackets I'm going to add the double curly braces, and then find out how many names is inside the guest name array. We simply type guestName.Length and this will output how many items are inside the array. Let's save that and add some names to the array and see if this works. Great. So we see that increasing by one with each name. Now this works because dot length is just a JavaScript property and we can add any JavaScript we want inside of these double braces. We're not just limited to outputting data from our Vue instance. For example, if we add 8 plus 10 also inside the double braces, and then go over to our app we can see that 10 is added to each number. So we'll just remove that because it's not needed for our app. Hopefully you can now see that we can now mix Vue data and also Vanilla JavaScript and we'll look at this more later on in the course but for now this is how conditional rendering or if-else statements work in Vue JS and you can now really see how simple it is to work with them. 13. Binding elements to attributes: I want to now show you how to use a directive called v-bind. We use this directive to work with normal HTML attributes such as class, source, and the href attributes. These are all just normal HTML attributes. However, we can not pass in reactive data to them using the double curly brace syntax. So in the index.html, if we locate the event date div with the class of card-header, it would try to add a new class with the name of [inaudible] and add this using a double curly brace syntax, this won't actually work. So to demonstrate this, let's add a new property over in app.js inside the data objects, just below the guestName array. So let's add 'formSubmitClass'. We'll use this to add a new class name whenever our form is submitted. To change the background color of the card headed div and also the blue button to green, I will initially set this to be an empty string. To begin with, because we only want to add a class when the form is actually submitted, so down in the form-submitted method, right at the very bottom, I'm going to add the formSubmitClass, and then we can set this to be something new each time the form is submitted. So I'm going to set this to be a text string of Submitted. So now each time a form is submitted, formSubmitClass will be set to the value of Submitted. Now down in the CSS, we can set the submittedClass to have a background color of green. So let's save that and go over to the browser. So you can see if we refresh and then hit the Submit button, that the background color doesn't change. So this is expected behavior because we mentioned before that the cards add dynamic data as an attribute. So to apply this class in HTML, we need to do two things. First, we need to remove the curly braces from the class and just have the data property inside of the causations. Then second, we need to add the v-bind prefix to the attribute name. So now it's worth noting as you can see inside of this element we do have two class attributes. One is the static HTML class which you can still use and also the one we just added with v-bind, which is reactive and under the control of view.js. We can also bind this attribute on more than one element, too. So let's add the formSubmitClass to the submitButton, too. This also means that if our data changes, the update will be reflected everywhere, too. So now let's give this a go. If we save that and then refresh the browser and add a name, we can see once the form is submitted that we do get the new background color. So just as a quick recap of what we have done there, we went into the HTML page and then added a class of formSubmitClass. Then inside of our data objects, we set this formSubmitClass to be empty originally. So this means that initially no new styles are added. We then changed his empty string to be the text of Submitted, just below inside the formSubmitted method. So each time the form is being submitted, the text of Submitted is added as a class. So we're not limited to just binding to classes, but combined to any normal HTML attribute too, such as we can add a source attribute if we are working with images and have the image file path controlled by view. The same with adding the style attributes, and this is what we'll look at in the next video. 14.