Introduction: What Vue.js Is and Why It Matters
Welcome, welcome. Great to have you here. This video is about Vue.js and I'm going to say it right away: I absolutely love Vue.js. It's a great JavaScript framework. In this video we're going to dive into what it actually is before we then start creating our first app right away. So let's start. So what is Vue.js? Its creators describe it as a library for creating reactive components in modern web interfaces. Certainly a nice phrase, but what does it mean? It actually means that Vue.js is a framework you would use to make your app more reactive, to control parts of your DOM, view-chas, to dynamically output data there, to listen and react to user events, to bring that mobile app feeling to a desktop app. So making your app reactive is a very first important takeaway. You could also think of Vue as kind of a replacement for jQuery, though you have to treat this argument carefully. It's much, much more than that. It's actually more comparable to frameworks like Angular and React.js. But if you want to use it as a simple replacement for jQuery you could do that. It gives you access to the DOM. It makes outputting data very, very easy. It fixes many of the flaws jQuery has, but again that really is kind of an understatement; it's much more than that. It's really great at controlling the DOM, and with that I mean not just giving you access to some element, now keeping it in sync on its own, which means you have some data in your JavaScript code, you change it there, you output it somewhere in the DOM and it gets refreshed automatically. You click a button and you listen to that event, it gets executed automatically. It makes this reactive, interactive approach really easy. And finally you can build single-page applications with it. You aren't limited to creating simple widgets or controlling parts of your web page; you can control the whole application with Vue.js. It goes all the way up to big enterprise-level single-page applications. So that is Vue.js: comparable to React and Angular 2, but really in my opinion like the perfect combination, taking only the best pieces of both frameworks and therefore really awesome.
Getting Started: Installation Options and Choosing a CDN
Now that we know what it is, let's dive into it and create our first application. In order to get started with Vue.js, visiting the official page is probably a good idea. So I am on vuejs.org and here we can click on Get Started. Sounds like a good idea if we want to get started. Well, we're actually landing on the introduction page, but let's switch to the installation page. Now there are different options on how you may install Vue.js. It depends on whether you want to set up a more complex workflow using, let's say, webpack, or if you want to simply import the script and get started right away. Now, for our first steps I'll choose the easiest and quickest way of simply importing a script, and I will choose a CDN here so that I don't have to download and store it locally. You may choose whichever link you want. I'm going to choose the first one from unpkg. Here, with that link, I will now head over to JSFiddle.
Creating a Minimal Vue App in JSFiddle
JSFiddle, if you didn't know, is kind of like an online editor where you can write simple HTML, JavaScript, and CSS code and see it run there instantly. Really nice to try out some things. You can also share it, obviously not what you would choose for a real project, but I will also have videos on how to set up a more realistic workflow. But for learning and getting started with Vue this is perfect. So in there, let's first go to the HTML section, make it a bit bigger and add a script tag here. You can simply type script and then hit tab to automatically expand it. Here we simply import the script we just grabbed from the Getting Started installation page and you may remove this version number to always fetch the latest version. Now with that we're having access to Vue.js. Now in order to use it, let me create a div here with #app to give it an id of app. After hitting tab and there, and there I want to have a paragraph. Now in that paragraph I want to output Hello World, but typing it like this is really not the Vue style. Well, that isn't JavaScript at all, right? So let's in this say I want to output this dynamically. So my HTML code is a simple div with a paragraph which is empty now.
Instantiating Vue: data, el, and Mustache Interpolation
Now let's switch to JavaScript and let's imagine there we would have kind of a result of some operation which we want to output in our HTML code in the end, so in the running application. To use Vue.js we have to create a Vue instance first. So we have to instantiate our Vue object. We can do this with the normal new keyword and then we have this Vue object which is provided to us because we have this script import up here. Now I'm not storing this Vue instance in any variable because I'm not interacting with the instance itself, but it still gets created because I have the new keyword now. Right now this Vue instance isn't doing anything; it exists but it isn't doing much. We have to pass an object in order to configure it and to use it, and in this object we have a lot of different properties and methods we can use to fine-tune to use this Vue instance which is the core of our Vue.js application in the way we need to use it. Now let's start simple with one property you will often use: the el property. This stands for element and it tells Vue which element in your DOM, so in the HTML code up there, which element do you want to control through Vue.js? Behind the scenes that element will become the template of this Vue instance and it will be this template which is then rendered to the DOM and to what the user sees in the end by Vue.js. So what do we want to control? Well, the div with the ID of app sounds like a good target. So this element here takes a string which works like a CSS selector and since I want to select this div with the ID app I just use #app to do so. Now we get control of this div and with that control we now want to have some data we can output. For that we get this data property. This is kind of a reserved word, a reserved property Vue.js will recognize, and data actually is an object. So where el was a string, this is an object, and in this object we store all the data we want to work with in this Vue instance. And this Vue instance again is really just a contained piece of code controlling a part or the whole everything of our DOM, whatever we want. So you're controlling this div with the ID app. Now in here let's say we want to have a property in this data object and this name is totally up to you, so I'll choose title and I will say Hello World here. Now with that title set up we now want to output it here in our DOM in our HTML code which again behind the scenes became the template of this Vue instance. Well this Vue instance has the title data, so how can we output it? Vue.js gives us a syntax you may know from other languages. We use double curly braces opening and closing and in between we can interpolate, we can output some data. So here we can simply refer to title, referring to our title stored in the data object. Again data is a reserved word in our Vue instance so Vue.js knows how to access the title. And if we now in JSFiddle hit Control Enter to load this we see Hello World on the right because now we're dynamically outputting our title data through string interpolation with the double curly braces here in our app or in our div here with the ID app which is controlled through Vue.js. And this is generally how Vue.js works: you take control over a part of the DOM, then you may have some data. You also may have other things; I will come back to those and you can work with the data. You can also listen to events as I will soon show you in one of the next videos and then create a reactive or possibly interactive app with that. Because the cool thing is, and you will see this in the next video when we also come to events, whenever title here changes it will automatically update the DOM. But again I'll come to this in the next video. These were the first steps and that's our first Vue.js application.
