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

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

102 Lessons (8h 30m)
    • 1. Welcome!

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

    • 3. Visual studio installation

    • 4. Section Intro: Vue Basics

    • 5. Download project starter

    • 6. Installing Vue.js

    • 7. The Vue instance & the data object

    • 8. Templates & the virtual DOM

    • 9. Two way data binding with v-model

    • 10. Event handling & methods

    • 11. List rendering

    • 12. Conditional rendering in Vue

    • 13. Binding elements to attributes

    • 14. Binding styles

    • 15. Vue shorthand syntax

    • 16. Outputting text & HTML

    • 17. V-if vs v-show

    • 18. Using Javascript expressions

    • 19. Section Outro: Vue Basics

    • 20. Section Intro: A Deeper Look At Vue

    • 21. Adding a progress bar

    • 22. Computed properties

    • 23. Watchers

    • 24. Key events & modifiers

    • 25. Filters

    • 26. More on looping: keys & index numbers

    • 27. Using multiple Vue instances

    • 28. Looping with objects

    • 29. Adding our navigation links & keys

    • 30. Accessing Vue instances externally

    • 31. Vue instance properties & methods

    • 32. Referencing elements with ref

    • 33. Using string templates

    • 34. The Vue lifecycle

    • 35. Vue lifecycle hooks in action

    • 36. Section Outro: A Deeper Look At Vue

    • 37. Section intro: Build tools & Workflow

    • 38. Installing Node & NPM

    • 39. Scaffolding projects with the vue-cli

    • 40. Exploring our project layout and build tools

    • 41. Using the data object with single file templates

    • 42. Section outro: Build tools & Workflow

    • 43. Section intro: Introduction to Components

    • 44. What are components?

    • 45. Registering global components

    • 46. Registering local components

    • 47. Creating single file components

    • 48. Adding the card front component

    • 49. Emit data to parent components

    • 50. Dynamic components

    • 51. Creating the additional card components

    • 52. Creating the text input component

    • 53. Receiving data from the text input

    • 54. Creating the text output component

    • 55. Passing data with props

    • 56. Keeping components alive

    • 57. Scoping CSS styles

    • 58. Prop validation

    • 59. Passing prop data to a style object

    • 60. Introduction to slots

    • 61. Slot scope & fallback content

    • 62. Named slots

    • 63. Section outro: Introduction to Components

    • 64. Section intro: Components Continued & Firebase Storage

    • 65. Setting up Firebase

    • 66. Creating the ImageUpload component

    • 67. Uploading images to firebase

    • 68. Image preview thumbnail

    • 69. Upload progress bar & $emit file data

    • 70. Image output component

    • 71. Downloading images from Firebase

    • 72. Set image button

    • 73. Text options menu: font sizes

    • 74. Text options menu: text alignment

    • 75. Text options menu: font style & weight

    • 76. Remove image button

    • 77. Passing data with callbacks

    • 78. Making images draggable

    • 79. Finishing the CardInsideLeft component

    • 80. Finishing the CardInsideRight component

    • 81. Finishing the CardBack component

    • 82. Introduction to the event bus

    • 83. Sending events to the event bus

    • 84. Receiving events from the event bus

    • 85. Adding mixins

    • 86. Section outro: Components Continued & Firebase Storage

    • 87. Section intro: Transitions & Animations

    • 88. Transition classes

    • 89. Adding CSS transitions

    • 90. Adding CSS animations

    • 91. Component transitions & transition modes

    • 92. Javascript hooks introduction

    • 93. Javascript hooks in action

    • 94. Mixing animations & transitions

    • 95. Custom transition classes

    • 96. Initial render transitions

    • 97. Element transitions & keys

    • 98. Group transitions

    • 99. V-move class & dynamic transition names

    • 100. Section outro: Transitions & Animations

    • 101. Thank you

    • 102. Follow me on Skillshare!

  • --
  • 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.





About This Class


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


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

Class Ratings

Expectations Met?
  • 0%
  • Yes
  • 0%
  • Somewhat
  • 0%
  • Not really
  • 0%
Reviews Archive

In October 2018, we updated our review system to improve the way we collect feedback. Below are the reviews written before that update.

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.


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 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, 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. Binding styles: Now we know how to use the v-bind directive to bind vue.js with HTML attributes. Now let's look at how to use the same directive that the style attributes. No, we can't pass in a double curly braces or the interpolation, which you pointed out in the last video. However, this time we can use the single curly braces. This is because we're passing in a style objects and objects inside a JavaScript that's surrounded by curly braces. Just like our data object inside the view instance. If you've used react. JS before, this way of an inline styles will look familiar to you. So if we go over to our CSS file for the row, and then click the margin top of 25 pixels. When I want to take this outside the CSS and place it into our HTML. So in the index page, if we locate the div with the class of row, which is just above the level one heading of guest list. I'm going to bind style attributes to this row and then also set the value inside an object, and then paste in margin top. It will just copy it from the CSS. So let's save that and give us a go and see what happens. So if we refresh the browser, we can see there's a blank page. So this doesn't appear to be working. If we right-click and go to inspect to open up the dev tools, we can see inside the "Console" that there's a red error message. So we get this error because this is JavaScripts, In between the braces and we need to name the CSS properties using camel case. This means that the first word is lowercase, and then each following word begins with a capital letter like this. So margin is lower case, followed by top with a T. Then also note that the value of 25 pixels is a string. So we can wrap this inside our quotations and remove the semicolon. Let's see how this is looking now. So save and then go over to the browser. So everything looks as it should, which is great. There's also another way of adding styles to our app. We can also declare our styling inside of the view instance as a data property. So back over in the app. j s, underneath the form submitted class that we created in the last video. I'm going to add a new date property called "appStyles". This is going to be set to an object. Then inside this object I'm going to add the same class of margin top, again using the camel case and set to 25 pixels. Now as we mentioned, we cannot inject this reactive data into our HTML with the double curly braces. We could not use double curly braces at all with any attributes. This includes the style attributes. So instead, over in the HTML, we can include it inside the quotations. We'll remove the existing object and add our new app styles inside of there. This HTML references a data inside of our app styles object. Of course we can also add more styles inside these objects if we want to. Or you can use this object multiple times within our app. This particular style applies to all of our free div's with the class of row. So let's reuse this on all of our free div's to get the correct styling. So I'm going to copy the style property. I paste it in the second row. Then do the same for the third row. So let's test that. Hit save and then go over to the browser. We can see the app looks back to normal. So just to double check, this is all working okay. I'm going to go over to the appStyles object once again and add a color of red. As you can see, any changes you make to the style object is changed throughout the app. So this is a few different ways of adding CSS to our app. We'll also use this again in the next project. But for now, we'll move on to the next video. We will take look at shorthand syntax. 15. Vue shorthand syntax: As it begins to build bigger projects both later on in this course and hopefully on your own in the future. It's worth knowing a few ways to make our code a little more compact. Even in the small app so far, we've used the V on and V binds quite a few times already. For this reason, view provides us with a little shortcut to make the syntax more compact. For the V by underactive, all we actually need to do is to remove V-binds, leaving only the colon and the attribute we are binding. Let's open up our index.html and let's go ahead and replace all of our binding attributes with the shorthand syntax. I'll show you the first one. If we go to the first row, we find it the style of app styles. We just need to remove V bind, leaving only the colon and style, and of course, this is something you could go ahead and do yourself if you want to pause the video and go for the index page and give us a go, and then of course come back when completed. I'm going to keep moving down the, up and changing this. We also have the second row just below with the app styles too. Let's change this. We don't have the "card header" with the class of form "submit class." Let's change that, and then scrolling down. We also have the class on the input side, and then a little further down, it looks like the last one is the final row with the class of "app styles." Let's change this. But is also a shorthand for when using v-on. We used v-on inside of the form elements to trigger a method every time the form has been submitted. Instead of using v-on, we can simply replace this with the at symbol. Let's go ahead and replace this now. Let's say this and just double-check it still working in the app. Our style seem to be working too. It looks like the classes is still bind it, and now if we add a name to the form input, we see that the name is still added to the guest list, which means that the submit button is still working. The shorthand syntax is optional and evil way is totally fine. As view JS deals with always in the background. But for the rest of this course, we'll be using the shortest syntax just to keep our code more compact. 16. Outputting text & HTML : So far in this course, we've outputted reactive data using interpolation or the double curly brace syntax. Now I want to introduce you to a few more directives which you may come across a lot of useful when outputting data. First is a simple one called v-text. V-text is used to obtain the elements text content. Text content, sets or returns the text content of an element. We can use it as an alternative to double curly braces to run the text just like this if we go over to our index page and locate the card block, which has the event information. Inside the level for heading, we can add the v-text as attributes and also set this equal to event.event title. You may notice we have event.event title twice; one is using v-text and one is using the original text interpolation. However, if we go to the browser and refresh, we can only see this title displayed once. This is because the original title use need double curly braces is replaced by setting the text content attributes. We can prove this by going over to v-text and changing this to event.eventTitle2. Then if we go over to app.js, we can add our eventTitle2, just below the original event title and want to set this to a string of v-text output so we can clearly see the difference. Once you've added up, let's go over to the browser and then refresh. We can still see that the v-text will take priority even though the double curly braces is still in place. The next directive I want to look at is v-html. V-texts, which we've just looked at, updates the elements text content. Whereas using v-html, we obtain the elements in HTML. You may be familiar with certain in HTML if you've used JavaScript before. v-html if you've used to output real HTML. If we tried to add HTML code inside the double curly braces, it will be interpreted as plain text. Let's take a look at this in action, if we go back to the index page with our event information. If we cut out the text or add name to the guest list for exclusive offers. So could this. Then if we go over to the app.js, we can add a new dates property of sign-up texts and then paste this in as a string, so save that and then if you add some content, such as adding the m tags around the word exclusive. Now we go and make show text and HTML. Let's try and render this over in the index page. If we go back to where we just cut out the text and we'll try to output this with the double curly braces, so event.signUpText and then save that. If we refresh the browser, the HTML is outputted as text, so we can see the HTML tags. This isn't what we want. Instead to display this correctly, we need to add the sign up text to the v-html directive. Let's add v html as an attribute and then remove the curly braces and now I hit "Save". Now if we refresh the data is rendered as HTML and we now have the word exclusive emphasized as we intended. We do need to be cautious, however, when using v-html for security reasons. Anywhere where HTML is dynamically added to our website, we should only use v-html on trusted content. We must not allow it to be used when content is provided by an end-user, as this can lead to potential cross-site scripting attacks, so just be aware of this. Also if we're working with just text, using v-text to obtain the text content can be safer and also help against these attacks. It can also have better performance for plain text 2, as a text is not passed as HTML. Finally, the last directive I want to show you in this video is v-once. This can be used to render data only once. Once the data is rendered using view, if the data is unchanged, the elements or components will not be updated or re-rendered. This can be used to optimize performance for our app to avoid unnecessary re-rendering. Our event title may be a good use case for this, as we can expect that once an event is created, the name will remain the same. All we need to do to enable this one's only rendering is to add the v-once directive to the elements. Let's remove this v-text attribute and then replace it with v-once. This now means that data will only be loaded once and not for any data changes in the future. We can't currently demonstrate since we're not using a web server to serve our page at the moments so the data will not be updated anyway from the view instance. We've just simply open up the index page to view in the browser. We can see this in action in a later video, where we'll use a development server. But for now you can see that this is available if needed. This is how we can use the v-text, v-HTML and v-once directives. Next up, let's look at an alternative to v-if, which we looked at early on in this section. 17. V-if vs v-show: We looked at the v-if directive earlier on in this section. This allowed us to show guest names in the div at the bottom of the page if any names exist. Otherwise, we display the text of no names added yet. There is also an alternative syntax which Vue.js makes available to us called v-show. This is also a directive which conditionally renders some content, just like when using v-if. However, there are some differences which we will look at now. First if we go to our index page and look for the v-if statements, that changes to v-show. If we save that and then go over to our app and then hit refresh, the first thing we'll see is the text inside the else condition is gone. This behavior is expected. As of course, a v-else statement can only follow a v-if statement. If we go to the console, we can see that this error is highlighted inside there. There is also another difference going on behind the scenes, which relates to how the element is rendered. When using v-if, the element it is linked to is added to the DOM when the condition becomes true, then it is destroyed or completely removed from the DOM when the condition becomes false. So because v-if is only rendered when needed, it can save on render time if this is a concern. V-show works a little differently. The element v-show is attached to is always rendered, regardless if the condition is true or false to begin with. It is then toggled on or off by changing the CSS display property. Let's take a look at this in action. If we open up the Developer tools and go to Inspect, we can see this in action by selecting the div inside the card-block div, that the display property is set to none, which has the effect of hiding the elements. If we then add a name to the input field, we see that the display property of none is then removed and we now see that the div tags with the name is added. For the case of this particular app, we also need to use the v-else directive. So I'm going to stick with using v-if and v-else. However, using v-show is a good alternative if you want to keep your elements inside of the DOM and just hide them, rather than completely destroying and re-render into the DOM when required. The performance difference between toggling the display property versus rendering using v-if may never be an issue for you, but it is worth knowing the difference, especially on larger scale apps. 18. Using Javascript expressions: Inside of our app, we have displayed some interactive data by adding dates properties into our view instance. Then I'll put in them using the double curly braces. When using these curly braces, we can do more than just add the name of the date property which you want to display inside of our templates. We can actually make use of JavaScript expressions or even combine our view data with regular JavaScript. First, let's go over to our app.js and add some names into our guest name array. Just to initially display, you can use any names that you want. I'm going to add the names of James, Chris, and Sam. If you're using different names, make sure these names and mixed up. They're not in alphabetical order. We'll see why soon. Save that. If we go over to the browser, we can see these names are initially added. Now let's go over to our index page and take a look at how we can use JavaScript expressions inside of our double curly braces. Currently inside the full loop we're outputting the name. We can combine this with JavaScript, such as using two lowercase. This will make sure that any capsule as inside of the name is changed to lowercase. Let's take a look at this inside the browser. Now we can see that the first letter of each name is now lowercase. This is a mixture of using vue.js and regular JavaScript. We can also go even further and add a string until the end of this. Name dot two lowercase, then plus a string of is awesome. Give that a go. Then over in Chrome, let's refresh. Now we've got the string added onto the end of the name. There is a limitation, however, that we can only use a single JavaScript expression. We can't use things like a if-else statement inside of here. It's also not the way to go if we're using the same code over and over again. Restricting the amount of JavaScript we can use inside of our templates makes our code more manageable. As then we need to move all complex logic inside of the view instance. This makes our code more reusable. We can reuse it in different areas of our app when needed. We will look at how to handle more complex conditions in the next section. But this is useful for performing simple tasks. We also have access to the full power of JavaScript's, even when not using vue.js data. Add small curly braces just below. For example, we can add a math calculation. Five divided by two. Let's see it on the screen. Okay, and also blow this, if we go back to the index page, we can add a math dot random for example. Math dot random between the curly braces and then save. Now we can also see the random number on the screen too, well, not just restricted to output and this JavaScript using double curly braces. You can also use it anywhere we have access to our view instance. For example, we can also use it inside our V HTML directive within the quotations. Let's go up to the V HTML directive. Then inside the quotations, we can add math dot random and save that. Now if we refresh the page and check, we see a random number now on screen. I'm just going to quickly changes back to name and save that. This is how we can use the full power of JavaScript inside of our view templates. 19. Section Outro: Vue Basics : Congratulations on reaching the end of this section. Hopefully already you can see how fun and easy is to get started with view JS. You've already learned a lot of new concepts, such as how to set up the view instance, two-way data binding, event handling, lists handling and much more. In the next section we'll step things up a little by covering even more essential view topics, along with completing our guest list application. 20. Section Intro: A Deeper Look At Vue : Welcome to this new section. We will begin to take a deeper look into what Vue.js has to offer. We'll continue to build our guest list up by adding new features and learning more about Vue.js, such as computed properties, watches, and filters. By the end of this section, you will have a good understanding of a lot of the Vue.js essentials and how it all fits together after completing your first project. Let's begin right away with improved note up by adding a progress bar. 21. Adding a progress bar: In this video, we're going to add a progress bar to our application. We also going to restrict the number of names we can add to our events on the guest list. This progress bar will then increase as a percentage as the guest name array fills up. This will give us a chance to get more practice by adding reactive data to our app, and also bind in style attributes which we covered in the last section. Let's begin by removing the green color, when the form is submitted as we will now have a visual indication with the progress bar. Over in the index.html, let's remove the binding classes that were added in the last section. Select remove formSubmitClass from all the locations. Also let's remove this from the data object in app.js. Let's go over and remove this from the data object. Then further down let's remove the formSubmitClass reference from our method. Then finally, we don't need the submitted styles over in app.css, you can also remove them too. Now that's taken care of we can go back over to the Index page and we can start to add our progress bar. I'm going to add this near the bottom of the page. If we look for the attending text, which displays how many names are on the list. Just below that, I'm going to add a break tag and then add a HTML5 progress bar. Which comes to be a plain progress bar for now. We can save and just check that's appearing on the screen. Great, we want this progress bar to increase every time a name is added to the guest list. To do that we need to work out a percentage. Over in the app.js I'm going to add two new data properties to the data objects. The first one is going to be the event capacity so you can set how many names you want as a maximum. I'm going to say, event capacity to initially be 25. Then just below that, I'm also going to set the eventCapacityPercentage. This is just going to be set as zero initially. We use this to work out how full the event is as a percentage. We're going to calculate this inside of the form submitted method. If we scroll down to this method and then just below this.newNameText. We're going to set this.eventCapacityPercentage, and we going to calculate the percentage here. This is going to be equal to this.guestName.length. The number of names on the guest list divided by this.eventCapacity, we'll divide that by 100 to turn it into a percentage. Now we have the percentage as a value between zero and 100. We can take our knowledge of binding styles from the last section and use it set the width of the progress bar. Let's go back over to the progress bar and then add a style attribute. Again, we know we need to use the colon because this is dynamic data. We're going to start the styles inside the braces as an object. The only style we need to add is the width. The width is going to be set to the eventCapacityPercentage that we just created before. Of course this will go up as the capacity changes. Then on to the end we're going to add a string, which is just the percentage symbol. All we're doing here is setting the CSS width property, by making the percentage value reactive rather than just hand coding in a set number. Let's save that and with this in place, let's go over to the browser and test its working. We can add some names and often the progress bar increases with each one. Great. It starts increasing, so it all appears to be working fine. At the moment we've got the attending text which shows how many people are currently coming to the events. I want to now also adds the capacity so we can see how many people are also allowed to attend. We already have all the data we need to complete this, back in the Index page next to the attending text. We already have the guestName.length being outputted. After this I'm going to add a forward slash and then simply output the eventCapacity. Now when we go to the app, we should see one of 25 and two of 25, and this is increasing every time we add a new name. This is working and also the progress bar seems to work in final. But there is one problem. We can still go over the total number of names we set, we can go over 25. This causes a progress bar to go off the screen and also the number in the attending section to keep going over the maximum allowed. Just add lots more names and get up to the maximum. We can see that we can clearly go over that. This can be easily fixed by adding another combination to test inside of our form submitted method. Back over in the app.js. We know we already have an [inaudible] statement check if there is a name entered. We can also just add a second check to determine if the eventCapacityPercentage is less than 100 percent. If it doesn't want to continue to add names. After this.newNameText.length is greater than zero, this.eventCapacityPercentage is less than 100. If the capacity is less than 100 percent, we can still continue to add names to the array. If the percentage is over 100 or equal to 100, then no new names will be pushed to the array. Let's give this a go if we go back over to the app and then refresh, we can still add names to the guest list, no problem. Once we get to 25, we should see that no new names can be added. There we go, we now hit the capacity and no new names are being accepted onto the array. Now let's move on to take a look at how we can handle more complex logic by using computed properties. 22. Computed properties: Far in this course, inside of the few instance, we've looked at how we can work with data, using a data objects. We've also looked at how we can add a message object to, which you can use to add functionality to our application. Now I want to show you a third property which we cannot all view instance called computed properties. We mentioned in the last video that in too many JavaScript expressions inside of our template, can make the code less reusable and harder to maintain. We also limited using one JavaScript expression. This is where computed properties come in. We add them to our view instance just like the data and methods objects to add more complex logic. There is also another big difference which we'll look at soon. Let's add our computed section, followed by the colon, and this is also an object. We can add our properties inside of the computed object, just like we've done inside of the methods object. I'm going to use a computed property to sort the case names, in our array and then return them in alphabetical order. It needs type in the name. In this case I'm going to call this sort names, and this is a function. Then inside the body we are going to return some data, and the data we want to return is this dot case name dot sort. Using salt is normal JavaScript array method, just like when we use the push method in forms submitted above. For this to work, we need to change one thing inside our index dot HTML. We now need to look through the sort names rather than guest name. Go over to the index page, and change case name to be our computer property of sort names. Then let's take a look at this inside the browser and we should now see them sorted in alphabetical order. We use a computed property when our code within relies on interval property, or any of the data from our view instance, few JS watches contents and is aware of the computer code and any of its dependencies. In this example, we use the guest name data, which means will be aware that it is there. It will cache the data or the only re-render when the guest name dependency has changed. This is where the difference lies between computed properties and methods. Methods on the other hand, will always re render when anything changes, even if there is no change to the data that it displays. Let's take a look at this in action by logging to the console. First name are the console log to the form submitted method and just simply console log the text of method. In the new computed property that we just created. We want to log to the console the texts of computed. If we go over to the browser and then right-click and open up the console. If we then add a name to our guest list and hit submit, we can see that both method uncomputed above logged to the console. This is expected because we've added to the guest name array inside the computer property. It's watching the guest name property as a dependency. So view is aware that the changes occurred and then re-renders a content. We have the method log because as we mentioned before, methods always re render, when anything changes, even if the data inside has not changed. Let's see this behavior in action by adding a new method. I'm going to go over to the index page and add a button. Just blow the input bone, at the normal HTML button with the text or call a method. Then we can add a click listener using the short hand. So on click, I'm going set this to a method call. Now we can go and create this method call inside of the app.js Make sure this is below the form submitted method and separated with a comma. We set up this method call, just before all this function, and then inside of the body, we're going to set the styles. All we're going do is set this up styles and then change the margin top to be 50 pixels. This is a method which has nothing to do with the guest name data. Let's see what happens when we call this new method. Let's go back over to the App, type in a new name into the input field and then click submit. We see both the methods and computed first, which is a behavior we have seen before, this is what we expect. However, when we call the new method by pressing the new button, we only see the method logged, this is because our new method call only effects the margin top data property and have a computed property is only watching for changes to the guest name property. This means that, computed will not be logged because no changes has been made. However, we still get a method call because all methods are always re-rendered, even if the data inside them has not changed. This means unless you have a specific reason to re-render method each time, then computed properties will be a more efficient way of doing things. For a lot of cases. Using a computed property, auto method will achieve the same results.Just bear in mind this difference in the behavior behind the scenes. Before we wrap up this video is a few key points I want to show you. First of all, let's add a test to our methods objects, to simply do a console log. Let's go back of the methods and creates our test method, satisfying the same way as a function which does a console log and simply outputs the console, the texts of method text. Over in the index page, I'm going to go below the button which is created and call this method inside of our double curly braces. At the method name of test, save that and let's go over to the browser. We can see that we'll get an error. This is because when calling a method inside the triple curly braces as a JavaScript expression, we need to call it use the parenthesis. So are the parenthesis just after text. Let's save and take a look at that and we can see in our works. However, when colonists as a computed property, the parenthesis is not used. The series action, we can move our method over in after JS and setup a computed property in place. Let's put this and then paste it below as a computed property, and then save that. If we remove the parentheses over in the index page, and then say if we can go over to the browser and we can see that this now works, will now get the console log to. One drawback when using computed properties is that, we are unable to perform asynchronous tasks. We can however do this by using a watch option, which is provided by VGS. This is also an alternative computed properties, and we'll take a look at this in the next video. 23. Watchers: In the last video, we looked at using computed properties, which are a great way to add functionality to our app. Computed properties watch the code and will only react if any of the data changes. As an alternative Vue.js also provides us with a watch property, which we can use when we want to watch a data property and react to any changes. Using Watch also allows us to perform asynchronous tasks which we are unable to use with computed properties. We set up the watch objects on the vue instance, just like we did with computed methods and data. To begin, I'm going to start by deleting the examples from the last video. So in app.js, we can delete the test method. We can also remove method call. So remove those two and then back in index.html, we can also remove the Example button that we added too. Once this is done, let's go back over to the app.js and that set up our Watch object. This of course is added just like the other objects that we've looked at. So add a comma just after the computed section, and then add our watch object. Inside of the watch object, we can set a data property which you want to observe. This name must match an existing data name. So for example, we need to use guestName or something such as eventDate, which we already have inside of our data property. I'm going to watch our guestName property. We then specify a function which we want to run when there is a change to guestName. Upon change Vue.js will pass the value of this change to the function.Inside of the function parentheses, we can pass in a name we want to give to the data vue will pass in. This name can be anything it wants, but I'm going to call it data, and then inside of the function, I'm going to log to the console a message when guestName, which is being observed by the watcher, is changed. Then let's add the console log of watch triggered. Then let's open up the console in the browser, and then add some names to the guest list. So one thing you'll notice is watch triggered is printed twice per name added. This is because we are observing the data property of guestName. GuestName is changed twice. It's changed once inside of the form submitted method, and then once again inside of the computed property, to sort the names into alphabetical order. So we can see this data is being observed and the function runs on each change.Of course, this is a basic example, but it gives you an idea of how they can be used. We'll use a more later as we go through the course projects. For performance reasons, usually it's better to use a computed property wherever possible because of this efficient rendering due to caching. But watchers, as we've discussed, are useful for observing changes in data properties and also useful for asynchronous tasks, such as accessing API data. 24. Key events & modifiers: Earlier in the course, we looked at event handlers, using the V on Directive, we then change V on to a shorter syntax by using the @ symbol. This triggered the form submitted method, when the submit event was detected. We also mentioned that we're not limited to using just submit. We do also have access to the full range of HTML events, such as on-click, on-change, and on-mode to name a few. A long way to trigger events, we can also use the V on Directive, the shorthand @ symbol to do something when a keyboard key is pressed. Inside of our inputs, I'm going to add a keyboard event to our name input. We can use standard keyboard events, such as key-down. In this example, I'm going to use key-up, followed by the key code we want to watch for. Once the key number 32, which is the space bar, is released, we trigger a method called key pressed. We have not yet setup the key pressed method, so let's do that now. Head over to the Up.js, and then let's add a new method. This method of course is called key pressed. All it want us to do is to add a console log, and inside this console log, we just go to print the text of key pressed. This will simply log to the console key pressed once the space key is being released. So let's save this and open this up inside of the console. If we press the space bar inside of the name input field, we can see our key events have been detected. So for this example, we use key number 32, which is the space bar. We can Google JavaScript key codes for a full list of numbers for all keys if we want to. However, Vue.js too also provide us with some aliases for common keys. We can replace key number 32 with the word space, and then give us a try if we refresh. This works just the same, but it's more readable and easier to remember. Vue.js also allows us to use enter, tab, delete, escape, up-down, and also left and rights in the place of any of the key codes. Let's just try one more. We can change space to the escape key, so say that and press the escape key, and it works just as before. This is how we can use keys to trigger events, and how we can use key modifiers, or aliases in our Vue projects. 25. Filters: Vue JS also provides us with a property called filters, which we can also add to our view instance. Filters are designed to apply common text formatting or transformation, such as changing strings to upper or lowercase. They not intended to be used for complex tasks. If you have something more complex then it is bad to use a computed property instead. Adding filters is made really simple. We can add them even when using v-bind, which we looked at earlier, or using the double curly brace syntax. To see this in action, I'm going to go over to our for loop in the index.html. Then inside the double curly braces will have name. We keep in place the name expression and then add our filter name after, separated by a pipe symbol. If we add a filter using v-bind, we can do exactly the same. We simply add the JavaScript expression first, then the name of the filter separated by the pipe. Then over in our view instance, we add our filters property. This is of course where we add all our filters. Let's add our two upper filter that we've just added. The syntax is just the same as the watchers that we looked at before. This is a function which takes in the value of the data passed to it. For our example, it will be the value of name. Just like when we looked at using watchers, we can name this value anything we like. We'll then return the value transformed to uppercase. See our uppercase. It's just plain JavaScript and is not provided to us by Vue JS. Again, this is a good example of how we can make Vue JS's data with plain JavaScript. Let's save this and test in the browser. Go to the input field, and if we type a name inside of there with lowercase and then press "Enter", we can see that the name is now transformed to uppercase. We can also use multiple filters and chain them together. All we need to do is go back over to the double curly braces where we added the first filter. Again, you separate it by a pipe we add the name of our second filter, which we want to apply. This works from left to right. In this case, "name" will be then passed to, "toUpper" filter. Then the value of the toUpper filter will then be passed to "formatName". So the order is important. We can see this order in action if we add the "formatName" filter over in the app.js. Just below the "toUpper" filter separated by a comma. We can add a "formatName". Again, this function takes in the value which is passed to it from "toUpper". Then if we simply console log the value passed to it, then go to the browser and open up the console. We can see that the value is in capital letters. This shows that we are getting the name value after it's been through the first filter. This is just an example, so we can remove the two upper filter and also remove it from our index page. Now we can add some formatting to our name and then go back over to our filter and remove the console log. The format in which we are going to apply is going to take the name that the user types in, is going to slice the first letter and then transform these to be uppercase. All the remaining characters afterwards will transform to lowercase. To do this, we're going to return the "value.slice". We're going to slice our position zero, which is the first letter. We only want the slice this first letter, so this is only going to be for one position. This first letter, then we are going to transform to uppercase. Then we're going to add to the end of this uppercase letter, again, the "value.slice". This is going to be the rest of the characters from position one onwards. All the rest is characters are going to be set to lowercase. Let's add this onto the end and then save that. Now if I go over to the browser. Let's add a name with a mixture of upper and lowercase and then press "Enter", and we can see the name is correctly formatted now. Of course, more complex formatting such as if the user adds a name with a surname or even free names, we needs to do a little bit more work to get around this. This may be a good case to switch to a computed value rather than the filter. Both for simple text formatting, using filters is an ideal way to do this. 26. More on looping: keys & index numbers: In this video, we're going to take a little bit of a deeper look into using fore-loops. We're going to show you how to add keys and also how to add index numbers to each item. Sometimes when we loop through an array, just like when we loop through all our guests names and display them to the screen, we may have a need to grab the index number for each item inside of the array. The index number is the position of each item. For example, the first name added is position zero because arrays always begin at position zero. The second name added will be at position one, and so on. We have access to this index number in VUGS when using a v-for loop. All we need to do is add a second argument to the v-for loop like this. Make sure you're in the index.html. If we scroll down to the bottom, we have the v-for loop to loop through the guest names. The inside this v-for loop, we can add our second argument. We need to rap them inside the brackets. The first argument is still the name which we give to each value inside of the loop. Then the second is a name we want to give to the index number. Both of these names are totally up to us. We can choose whatever we want, but it's best to keep them more descriptive if possible. Now the name for the index is set. We can add this using the double curly braces. Just after our formative name, we're going to output inside the brackets the value of our index. Now if we save and go over to the browser, we can see the index position of each name. We learned early that we can also add JavaScript inside of this double curly brace syntax. Let's take advantage of this by going back to the index and adding plus one to the index number. This means our index now begins at position one rather than zero. We add index plus one, and save that. Now if we go back to our application and add some names, we now have the index number matching the number of guests. Next, I want to take a look at adding keys to our loops. We can also allow view to better track our array values by providing a unique key to each of the items. It's recommended to use a unique key with v-for wherever possible. The default behavior view uses when updating a list of elements, such as an array, is the patch and element in place at a particular index number. If [inaudible] adds an array, it patches this extra item in place at the designated index position rather than move [inaudible] elements around to the correct order. This makes for an efficient way of doing things, but we can go one better. We can make sure each item in the array has a unique identifier, which we can reference if we need to make a change. View can then track each item and can move things about when updating, and even reuse items when needed. At any unique key means view is now aware of the items, rather than just knowing which index position it needs to patch in a new value. This makes for safer and more predictable behavior when changing values in an array. We can add key by going over to our for-loop. We use colon for dynamic binding, and the name we give to this key is important too. It must link up to some existing reactive data. If we try to add a random name which is not declared in the view instance, we will get an error. Let's just type in random name and then save that. Then if we go to the app and add a name to the guest list, open up the console, we'll see an error. We can use an existing data such as our guest name. Let's type a name inside the key. Now if we save that and go over to the browser. If we hit refresh, we can now see that the error message is being removed. Now view recognizes this name as a date property. Now this may not be ideal because we may have more than one person with the same name. We could set up an object to hold a unique ID with each guest name. Also open new date property to hold a unique value, and then use it as a key. For now, I'm just going to leave and come back to this in a few videos time. The main thing to understand is that when creating a for-loop, it really is best practice to add a key to a list of values wherever possible. 27. Using multiple Vue instances: In our guest list app, currently, we only use one Vue js instance to control the whole of our application. This is fine and small up like this one. But in large apps, we may find it more convenient to split certain functionality or certain data into multiple instances. Using multiple instances is perfectly fine to do, may even make sense in some cases, where we want the code to be contained into sections. We do this just as before. We create a new Vue instance and also a new HTML section, such as the div to bind to our data. Let's get started with this now. If we go over to the index.html, we currently have the first view instance linked to this div with the id of app. The first thing I want to do is to cut the opening container div and then move this to the top. This is so it contains our existing content and also the new navigation div, which now I'm going to add. Let's create a new div with an id of navigation. This id will link to our Vue instance using the el property and we'll create this soon. Then I'm going to cut the first row from our app and then paste this inside of the navigation section that we just create. Now, we've got this new navigation section. I'm going to go over to app.js and we can create a new Vue instance just below the last one. If you go to the bottom, we can now type "New View," and then again just enter the object inside of the parentheses. The first property again, we need to add is el. This is an ID of navigation. Let's add this in at the top. Then we can add our data objects. We're going to add some reactive data into here, such as the app name. I'm going to set the app name to be equal to guest list, which is what we currently have. Then if we go back over to our navigation div, we can then use a double curly braces to replace the guest list text with our app name. Save that and if we test this in the browser, we shouldn't see any difference. which means it's all working okay. There is one drawback to doing this however, the data contained in each Vue instance is separated from each other. This means we can only use this keyword to access data inside of the view instance it is used in. If go back to the first Vue instance and then add a console log. I'm going to add this inside of the form submitted method and I want to log name. Remember the app name is a data property from our second instance. Let's save this and see what happens. If we go over to the browser, open up the console, and click on the "Form Submit" button, we get a red warning message saying the property of app styles is not defined. This is because of the same problem. The app styles object is a data property inside of the first instance. Here, we also trying to access this inside of the index.html within the section control by the second instance of navigation. We know now how to bind styles. Let's move back the styles into the stylesheet so can access a everywhere. We can go over to the Vue instance and delete the app styles object. Now, these are deleted. We can go back over to the app.css and then re-introduced the margin top of 25 pixels. This margin is added to all the rows, so use the row as the selector and then add in the margin top of 25 pixels, and then save that. Then if we go back over to the index.html page, we can delete the app styles style property in all the locations. That's the first one and then a second one. Then finally, let's remove the third and final one. Then we can also remove the console log from the method. Let's go back over to the app.js and down to the forms submitted method and then remove this. Now, if we save this and go back over to the browser and refresh, we should see that everything is working fine again. Splitting up sections into multiple Vue instances is perfectly fine to do and it's also practical if the code contained in each instance is not related or there is no reason to require data from other instances. There is waste accesses data from over instances with other methods. But we'll cover this later in this section. We'll continue next by adding some navigation links to our new instance and also using these links to see how we can loop through objects. 28. Looping with objects: We have already covered looping through arrays during this project. In this video, I want to continue with our new vue instance, by adding a new array objects of navigation links, which we can also loop through. The values in this object also contains AID. So you can also use this to add a unique key. So view can keep track of the items listed inside of our app.js. Let's begin creating our array of objects, toward our navigation links. Underneath the app name. I'm going to start with the name of navLinks. This is going to be an array. Each array item is an object which has a key value pair of name and ID. Let's open the curly braces for the first link. I'm going to set the name as the key, and home as the value. Then separate by a comma. We're also going to add an ID. So I'm going to keep it simple and start with ID of one, and then separate it by a comma, we can start our second link. So I'm going to copy and paste the first item. Change the name to upcoming events, and then also change the ID to number 2. Then once more, paste the same, and we'll call this one guest benefits. Give us an ID of three, and then the final link, we're going to add latest news, and then cause it to be ID number 4. Then let's go also to our index.html web page, and look at how we can loop through this array of objects. I'm going to create a new div for this, just underneath the closing div tag for the app name. Create the surrounding div, and then inside here I'm going to create a unordered list, to display all the links from navigation. Then within this, we want to add a HTML template tag. This template tag can be used with V4 and also VF2. To render a block of multiple elements. Template is just a container, just like an ordinary div. But this template element will not be rendered to the DOM. Then we'd inside this template we can create the V4 loop. So I'm going to call this navLink in navLinks. Of course, navLinks is the name of the date property that we've created. Then we didn't align items, we're going to create our list items. We use this with the double curly braces. The first one is going to be I'll create one more list item below, which is going to be This will select the name and id for each individual object. So now we have the content inside the template. If we go over to the div tools, we can select the div that we've created. We select the unordered list. We can see that the ul tags is there, and then it's followed by the content within the template tags. So we don't actually see the template element rendered to the screen. But we do see on the screen the name and also the id for each object inside of our array. We can also display the key value pairs of each object tool. Key in both the name and also the id from the object. Being the value after the key, such as home and one. We can simplify what we already have into one list item. So if we delete the second list item, and then we can add a second V4 loop. This one is going to be value in navLink. The name value is optional. This can be anything we want, but the name navLink is also optional, but he must match the name inside the outer loop. We'll also add a horizontal rule, so can separate each list item. Now if we add value into the double curly braces, you can see this output to the screen. So go over to the browser, and it prints out the keys and the values of the objects as a pair. We can also separate them to work with them independently. If we surround value inside the brackets. We can also add a key, which means we have both the key and the value available to use independently. So after value, add a comma and then key. Now instead of just outputting the value, will also output the key separate with the pipe, and then back over to the browser. We can see this in action. We have the key and value printed for each object. We can also add a third argument is key and value. Remember we added a index number to the V4 loop to print the names in our guest list. Well, we can also do the same here with the third arguments. I'm going to call it index again, because it makes sense to name this. So separated by comma add index as the third argument. Then as a third argument inside the double curly braces, we're also going to print out the index. So save and then go over to our project and then refresh. Now we can also see the index printed next to each item. Now we know how to loop through objects. Let's put his technique into practice in the next video. By our navigation links, how we want them to look inside our app. 29. Adding our navigation links & keys: Now we know how to work with looping through objects, let's structure this so it's more suited to our application. We'll also add a unique key to each item and make sure each navigation item has a URL to link to. To begin, I'm going to remove the full list item from the last video. Then replace this with a standard list item, which outputs the navLink dot name. This will simply show the names from our links, and because this is a nav bar, we also want to make these links. Let's go ahead and surround the nav link with a tags. Add them inside the list items. At the a tag with the href, and just leave this empty for now and then close off the a tag. Now let's add some links to our object to link to, back over in the nav links in the App dot js. After the ID most you want to add a URL to link to. This is just going to be a dummy link just to test its working, after the comma we'll add the URL and add a link, I'm just going to use Google for this example. Type in H-T-T-P-S colon forward slash, forward slash, and then www dot google dot com. Then we can copy this and paste this in, in the four links. I'll set the second one to go to Amazon dot com, the third one to go to eBay, and then the forth form we will add as Facebook. Now we have a URL to add to our a tags in HTML. Remember from the last section we said that we can not use the double curly braces to add reactive data to HTML attributes like this. It could add the double curly braces, and then add navlink dot URL. For this to work, we need to use the V bind directive to add to our URL, or I'm going to use the shorthand technique of just the colon. We also need to remove the double curly braces for this to work inside of an attribute. Let's save this, and if we go over to our navigation links in the browser, we can click on the links and test the work. They all appear to be working fine. We'll just try one more. Great. Now the links work as we want. It's time to now add some styling to the links. Since already we have Bootstrap linked to our project. We can add some Bootstrap classes to our navigation. First of all, if we open up the URL tag, we can add a Bootstrap class of nav, and then in the list items we can also add a cluster too. Again, this is a Bootstrap class of nav hyphen item. Then inside the links will add a class of navLink, and then if you want to add some horizontal lines in place just to break up our app. The first one I'm going to add just underneath the level one heading of our app name, so add hr inside there. The second one is just before the closing div with the ID of navigation and this will add a line above and also below our navigation links. The final thing I want to do to our navigation is to add a unique key to each list item. We touched on this a few videos ago. But this time we now have access to an ID inside of our nav links object. This makes for an ideal key because we have each value set to be unique. Now let's go back over to our HTML. Now let's add this key inside the template element just after the for loop. Bind the key and set this equal to navLink dot ID. In theory they should work. But however, there will be a small problem, which we'll see if we go over to the developer tools. Right-click and inspect. We see the red warning saying template cannot be keyed. Places key on real elements instead. We get the warning that we need to use this on a real element because template is used as a container for its templated contents. It acts as a wrapper rather than a HTML element. To fix this, we can change the template tags to something else, such as a div and save that. Now if we go back to the console and refresh, there now goes away and we have a unique key working on our navigation. That's now our navigation completed and also our second view instance. We'll build on this in the next video, where we'll look at how we can access a view instance externally from another view instance. 30. Accessing Vue instances externally: We now know that we can use multiple Vue instances to control a particular sections of our application. We discussed how may be useful to do this, to group-related functionality together, such as grouping all the Navbar functionality, as in our example, or even a sidebar maybe could use case. We can't directly access things such as our data and methods from an instance, from inside of a different instance using this keyword; however, there is another way to get around this. If you want to access data from an instance externally, we can give each instance a variable name. If go over to our app.js and this one make this a little bit more readable by clicking on the collapse button on the left. We'll do that for our first instance. On second instance. Just before we call New Vue, and we want to add a variable name of vm1 and set this equal to our new view instance; and then do the same for the second one; So variable vm2. You'll often see these variables called vm. Distance for vue model, as Vue was inspired by the MVVM design pattern. You can read more about this with the link at the end of the section if you like. This variable name is totally up to you though. It can be named anything you like. Then I can reference our instance outside the instance using normal JavaScript. So if we wanted to change from data in the first instance of vm1, such as the event capacity. We can do it like this. If we make sure the outside both vm1 and vm2, we can select vm1. eventCapacity'. Then I'm gonna set this to be 15. Now if we go over to the app, we can see the change. We can see Attending is now 0 or 15, rather than o of 25. Its changes being done with normal JavaScript and from outside of the view instance. We can also do the same, but from within our second instance. Let's add a method to our vm2 instance. This method I'm going to call 'capacity changed. Then within here we can cut the JavaScript that we used before. So cut 'vm1.eventCapacity. Now paste this inside of the function. Then over in HTML, we can call this method by adding a new button. Let's add a new button inside of the navigation section. Just after the horizontal line, I'm going to add a button with a click handler. This is going to trigger the capacity change method. So when this method is called, the method is run inside of the vm2 instance. However, it is changing the event capacity data from our vm1 instance. Save that. If we refresh the browser and then click the button, the capacity should change again to 15. This is a really simple example of how we can access instances, both would using JavaScript externally and also from within of instances. It's important to know how to do this, if we ever need to have access to our instances from external sources. We'll leave this video there and I'll see you next time. 31. Vue instance properties & methods: During building this project, we've added our own properties and our own methods to the Vue instance along with these, which we should now have a better understanding of how to work with them. Vue also provides us with some properties and methods which we have access to. If we go over to, which takes us to the Vue Homepage. Then if you click on the API link at the top, we can see the API documentation. If we scroll down using the navigation on the left, we can see some familiar looking things, such as our options of data, computed on methods. Further down there's what we call instance properties and instance methods. All of these properties are methods, also have a $ sign prefix, so we can easily distinguish them from others. If we go over to our app, we can see these as part of our instances. Let's go over to app.js. You have to go right down to the bottom we can create a console log. I'm just going to console log the contents of vm1 which is our first Vue instance. Now let's go over to the browser and open this up in the console. We can see we've got the contents of the Vue instance. Some of this you will already recognize, such as the 'el' property, which you can see is managing our div with the idea of app, which we set earlier. We can use these properties and methods, prefix with a $ symbol, to access data that we need. For example, we can change our console log to display the 'el' property by adding a $el after vm1. Then inside of the console, we can see the div with the class of app, which our instance is managing. Let's just remove this el property and take a look at the full instance again. There is a lot going on here and we'll take a look at more of these as we go through the course. One thing I want to draw your attention to is down near the bottom, you can see there is lot of getters and setters. These are used to get values and set values and means that Vue can watch and react to changes. These getters and setters are added upon creation of the Vue instance. You can see that these all of our data properties, which Vue proxies for us and also our computed methods. We have forms submitted and keyPressed above them, which does not have any getters or setters. This is because they are our methods. As we know, methods do not watch and react to changes, they simply re-render when there is change to the app. Also, if we add a new property to a Vue instance after it's created, it's not proxied by Vue.js, so it's not reactive. Therefore, not watch for any changes. We can see this in action by adding a new property to vm1. Back over in app.js, if we add vm1.title, which doesn't yet exist, and we'll set that to a text string of new title. Now, if we go to the vm1 instance in the console, we can see we have added a new property called title for the Arnold getters or setters. The property is not reactive. Therefore, if you have any data in our application which you want to react to changes, it must be there upon creation rather than added afterwards. We don't need this code for the project so I'm going to remove the button and also the capacity change method. Let's go ahead and do that now. In the index we should move the button and then in the methods in app.js, we can remove the method of capacity changed. As we go through the course, we'll look at more of these Vue instance properties and methods in more detail. Starting in the next video, we will take a look at using refs. 32. Referencing elements with ref: In the last video, we looked at some properties and methods which are available to us in the Vue instance. One of these properties which can see is called refs. We can use refs register a reference to an element. We can place a ref on any element we want. I'm going to go over to the index to HTML page. If we look for the page title, I'm going to begin by removing a double curly braces. Then simply replacing this with guest list. Then in h1 opening tag, I'm going to add a ref attribute. Answer is to a name. This is not a standard HTML attribute, it's provided to us by Vue.js. We also free to choose any ref name which will like. Now have this reference to the elements. We can work with it in our Vue instance. I'm going to add a click handler to this level on heading, which you can hook up to this reference. I'd add click. I'm going to set this to be a method name of change title. All this element is not important, we can still retrigger this method when it's clicked. Then let's add our method in app.js. We need to add this in vm2. Let's add our methods and we use a name or change title. We then select the ref with this title assign refs. Then from before the all of the native view properties have the dollar sign prefix. Then we add the name. Then dot in a text which is just JavaScript. This is not something provided by Vue.js. Hopefully you can now begin to see the Vue.js and normal vanilla JavaScript works together almost seamlessly. We can mix in JavaScript with Vue properties and methods where we need to. Now if we save that and we go over to the browser, if we click the title, we should see the title is now being changed. Along with using dollar sign refs to set data, we can also access data using it. If we add a console log to show this dot dollar sign refs, we can see what it returned. Inside the change title method at a console log and this dollar sign refs. Then go over to the browser. We can see that an object is returned. We can also see that it's a h1 we have selected. If we open up this objects, we have access to all the associated data within it. We can see the inner HTML which you've reset and also all the other properties which we can access. For example, if we look at hidden, we see there is set to false by default. We can use dollar sign refs accesses and change it inside of our method. Inside the changeTitle method, we can select this dot refs, dot name. Inside the method we can remove the inner text and replace this with dot hidden. That we can set this to be true. Now if we save this and go back to our app, if we click on the title. Hidden is set to true, so the elements disappears. This is how we can use the dollar sign refs property to reference and elements and the set or access data. It's worth mentioning too that we can use this refs property both inside and outside of the view instance tool. There is something to be aware of though when using refs, that is refs and not reactive. They're not created on the initial render. They are created as a result of the render function. We are changing the element in the DOM, but not in the Vue.js template. Therefore, we changing something which may be overridden by Vue.js at a later day whenever there is a re-render, such as something to be careful of. However, using refs can be useful at times and maybe best used to get data rather than set data because of the lack of reactivity. 33. Using string templates: During this project, we have created our view instances and then mounted them to HTML elements by using the L property. There is also an alternative way which is create a string template inside of the view instance. Let's go ahead and create a new view instance to store the title of our app inside. Inside here we can use the template property, so I'm going to go down to the bottom and create a new variable, this time called vm3. Then this is going to contain our new view instance, and as always, it takes in our options object. Inside here, we're going to add a new template property. This property will take in a string, so we need to surround the mark up we provide inside the quotations. We're going to create the title here. Just like our existing title, we're going to open up the h1 tags and then other title of Guest List, and then closes off. Now, if we go back over to the index page, we could remove the title from our HTML, in order to come for our new view instance. Now, if we save that, if we refresh the browser, we can see the title is now removed from page. This is because we've created a new view instance, but we have no L property, so the template is currently unmounted. We can manually mount the instance using $ sign mounts. This is a new instance method which we have not yet looked at, because we have our template is stored inside a variable called a vm3. If we go back over to the app.js, we can mount it like this. Let's type vm3.$mount, and then inside the bracket we can add the elements that we want to mount to. I'm going to use the div with the ID of navigation. As a string going to pass in the # and then navigation, this mounts our templates to the navigation div, which we already have in our HTML. Let's save that and see what effect this has. If we go back over to the browser and then refresh, we now have the h1 title back, which you setup inside of the template, but you can see we've lost the navigation links and also the styling. Let's open up the developer tools by right-clicking and going to inspect, let's take a look at what's going on. We have our container at the top, which is fine, then immediately after that is our h1 title, followed by the div with the ID of app. You can see there's no Bootstrap rows or any of the Bootstrap 12-column grid divs, which you have inside of our HTML. Also, our unordered list for the navigation links is not there either, so why is that? Well, the reason is because when we mount a template to an element, this template will replace any existing markup. This means all of our nav links and Bootstrap classes, it will simply use the contents of our template as a new markup. We can add these extra divs and classes inside of the template string. If we go back over to our templates inside of the app, and then inside of the string, we can begin to add our Bootstrap classes surrounding the level 1 heading. Before this, we can add a div with a class of col-sm-12, and we can also add text-center to align this in the middle of the page. After the level 1 heading, we want to close off this div and then save that. If we go back over to the browser, we can see that this is re-introduced the Bootstrap styling, which we had before. But as you can see, things will soon begin to look quite messy inside of the template. Also, there is another limitation. We can not split this up into multiple lines to make it even more readable. If we move the level 1 heading onto its own line and then just after day we'll add the closing div also onto its own line. Save that and go back over to the browser. We can see that this doesn't work. There is a way around this, if we go over to the templates, we can place each line into its own string. Add the quotation at the beginning and the end of each line, and then we can add these together with the plus symbol. Save that and refresh, so we can see it's all in our working again. This solution still looks a little messy though, so we can be the best to own uses with simple code. Also, since view JS provides us with this L property to integrate our template syntax inside of the HTML. This is often seen as a better alternative. I'm going to go back over to our app.view and then once you remove this new instance of vm3, just to return the project back to how it was. Remove this vm3 variable, remove the mount, and finally, if we go back over to the index page, we can reintroduce the Guest List title back into the HTML. Save that and now our app is back to how it was before using the L property. That's how to create a screen template. It is important to know this as you may come across it in applications and also when going through the documentation, you may also see when working with components. Next we'll finish this section off by looking at the view instance lifecycle. 34. The Vue lifecycle: We should now have a better understanding of how Vue.js creates a template and manage it to the DOM. When creating Vue instances though, there is something important going on behind the scenes, which we have not yet looked at and this is a Vue instance lifecycle. We can hook into various stages of the lifecycle, such as before the instance is created or before there is an update, for example and we can tell Vue what code to run on each one of these specific points in the lifecycle. There are a number of these lifecycle hooks which we can use, so let's take a look at them now. We should now be familiar with creating a new Vue instance using new Vue, which we can see is at the top of this drawing. This is the lifecycle starting point before observing data and initializing any events. The stage should also make sense now because we know from previous videos that upon creation of the Vue instance, Vue.js is aware of the data inside of it and creates the watcher effect. Between these first two stages, we can call the first of our life cycle hooks, which is called beforeCreate. beforeCreate, as the name implies, is a method which we can use to define any code we want to run before any of our data is observed or any methods have been initialized. If we want to run the code after the data and methods are initialized, we then need to use the created hook. This means our instance is being created, all data's being setup such as watchers, computed properties, and any methods, although it has yet to be mounted to the DOM at this stage. The next lifecycle stage is related to templates. We've used both the template property and also created templates within our HTML code in this section, this is where Vue.js will look for these options and then compile these templates when required. After the templates have been compiled by using the template property or by looking up the templates in HTML with the el property, our next lifecycle hook is run. This hook is called beforeMount. beforeMount is called just before the mounting of the instance begins, and just before the render function will be called for the first time. Next up is replace el with template, now Vue.js has our templates ready. It has all HTML prepared which can be read by the browser. The curly braces or the interpolation we see in the editor will be replaced with the correspondent data values. This is why we can't see the double curly braces when we take a look inside the developer tools. This means the elements which we specify using el will be replaced with our compiled template. Now everything is in place to mount our template to the DOM. We're not done though once our instance mounting stage is been reached. We've discussed reactivity during this course and how Vue watches for changes and then reacts to these changes by obtaining the DOM. This is the effect we can see over on the far left, which is the virtual DOM re-render and patch. This is an ongoing cycle and the virtual DOM re-render and patch is triggered when some reactive or so much data is changed. Next, we have beforeUpdate. This cycle of updating provides us with two new life cycle hooks. First is beforeUpdate, and this as it sounds, is called before any data changes. Second of all, there is the updated hook. This is where we can add any code we want to run when there has been a data change detected, which causes the virtual DOM to be re-rendered. Vue.js recommends avoiding this hook in most cases, as we are provided with the computer property and also watchers which should be referred wherever possible. Next up there is the beforeDestroy hook. This is called right before a Vue instance is destroyed. At the moment it is called, the incidence is still fully functional, nothing has begun yet for the destroy phase. Then Vue prepares the instance to be destroyed by removing all watches, event listeners, and also any child components. We've not covered components yet, but we'll do soon. Finally, we have destroyed, so this is all the stages of the Vue instance lifecycle and in the instance being destroyed. When this happens, the final destroyed hook is called. There is nothing magic going on behind the scenes, just a series of stages of the Vue instance, which you can now see that we can tap into using these hooks. There are actually two more hooks called activated and deactivated. These are not typically available in this regular instance, but rather made available when using a kept-alive component. We will cover kept-alive components in the component section later, but for now, let's move to the last video. In this section, we will put into practice these life cycle hooks to see them in action. 35. Vue lifecycle hooks in action: Now, we know how the Vue life-cycle works and how we can tap into each of these life-cycle phases using Hooke's provided to us by Vue js. These hooks are pretty straightforward to add to our app. I'm now going to show you a basic example of these in action. All we're going to do is create each of these hooks we looked at in the last video and then simply do a console log once each one of these hooks is called. This is useful as we can see, the order in which they're logged to the console. During the instance life-cycle, these hooks are added to the root of the view instance rather than inside any of the methods or data properties. Let's go over to our app.js. Then if we scroll down to the bottom of vm1 and then add a comma just after filters, here, we can add our first hook, which is going to be beforeCreates. The syntax is pretty similar to the methods. This is a function. Then inside the function body, we can ask our console log. I'm just going to simply console log the text of beforeCreates. Although this is a simple example with a console log, inside this function body, we can add any code that we want to run before the instance has been created. I'm going to add a comma at the end and then just copy this before I create hook. Then I'm going to paste this in seven more times so you can see all of the eight hooks in action, so 1, 2, 3, 4, 5, 6, 7. Now, I'm going to remove the comma from the last one. The second one is the creative hook. Then change the text to created inside the console log. We then have beforeMount. Then of course, next job is mounted, so change the name to the mounted hook and then add the text inside the console log. Then we move on to the updated phases. First, we have beforeUpdate, followed by updated. Then finally, the last two is a destroyed phase, so the second to last is beforeDestroy. Then finally, the last hook is the destroyed phase. Save that. If we now go to the browser and then right-click and "Inspect" to open up the developer tools. Select the console and we can see that the first four hooks are called, we have beforeCreates, created, beforeMount and also mounted. This makes sense because the instance has been created and also mounted. But we have not caused any data changes to update or cause the instance yet to be destroyed. If we go up to the input field and type something inside of there, we can see now we have the before updates and updates fired for each keystroke we make. We have this behavior because we have the data property of new name text setup inside our data objects. Also, we added this to the input field with two-way data binding using V model. Remember too that any data property setup, chose in the creation of the view instance is