Learn how to include Vue in a webpage with a script tag referencing a local file or a CDN. Set up a root element and bind Vue instance data to it.
- [Teacher] In this video, we'll set up our first Vue enabled page using an online code editor. If we click Get Started here, we should see the guide for Vue version 2.0. The documentation is really well written and thorough, so I'd recommend reading it all the way through after viewing this course which you can probably do in one or two sittings. Right now we're just here to find the core view script that we need to get started and if we click Installation in the left nav, we can then download it by clicking either Development Version or Production Version.
Let's copy this URL and paste it into a script tag source attribute in a new webpage. We'll do this so that we can pin it at this specific version and avoid potential confusion when MAT redirect is updated in the future. But where will we put the script tag? There are lots of good options for experimenting with Vue including jsfiddle as suggested in the documentation or you can just create an HTML page on your desktop. In this course, we'll be using a web based development environment called Cloud9 which we can load by navigating to c9.io.
You don't have to use Cloud9 to follow along with the examples in this course, but if you don't currently have a development environment set up where you can run nojs on the command line which we'll do later on, then Cloud9 is a good option that offers full abutulitic shell access with no preintalleds. I won't go through the full sign up process right now, but I just want to mention briefly that if you do decide to use Cloud9, you will be asked for a credit card, but it won't be charged unless you upgrade from the free plan which provides everything we need for this course.
Once we're signed up, we can create a new workspace, and I'll just call this one vue and describe it as a vue.js tutorial. With the free plan, we can create one private workspace, and then I'll choose the blank template because as I mentioned, we really don't need anything at all to get started except for the core script who's CDN URL I still have on the clipboard. Once we're up and running, I'll right click the workspace panel and create a new file named hello.html.
We'll give it the html5 DOCTYPE, and then if I start typing script and hit Tab, I get auto completion for the script snippet, and then I can just paste that URL as the source. Next I'll create a div with another snippet and use the pound sign shortcut followed by Tab to automatically assign it an id of app which is a common way to identify a section of a page that you want vue to interact with. Finally we'll create a new vue instance that will manage all of the content and behavior associated with this element and its children, and first we'll just add a bit of dynamic content inside that div.
Data will be an object with a single property for now. Msg, short for message, and it will have that value. Now I can make this message appear inside this div simply by using double curly braces surrounding the data property name. This is a technique called string interpolation, and I'll put this inside a level one heading. Let's go ahead and run this by clicking the green Run button up here.
You can see that has the side effect of opening this console where I can see that the Apache web server is running, and it shows me where I can go to view the page. So if I click and select Open, I can now see this message as if I had typed it in plain text between the H1 tags. By the way, if you don't want to use double curly braces or the double stache as some call it, or if that conflicts with something else you're already using on the client side or the server side, it's easy to configure a different set of delimiters just by passing the delimiters option like this with the start and end character sequences that you prefer.
Notice that I didn't have to prefix the message property here with the word data or store the view instance in a variable in order to refer to its data up here. Vue knows that I'm referring to a property of the data object. And with that, we have our first simple app featuring a vue instance that's capable of updating the dom. One other quick note, since this page is processed top to bottom, just make sure that the element that you're mounting to appears before the call to new vue so that vue can locate it.
In this course, Michael Sullivan introduces the Vue framework, explains which problems it aims to solve, and shows how to add Vue to a new or existing webpage. Michael examines a Vue instance and its lifecycle, and shows simple and advanced data binding techniques along with how to manage CSS related attributes dynamically and handle user input and events. After he covers the key concepts and basic conventions of Vue, Michael dives into its component system, which can help you create modular, reusable code, and shows how to use the vue-router plugin to set up a single-page application with client-side routing.
- Creating a Vue app
- Applying control logic
- Binding to the style attribute and class attribute
- Reviewing the features of a Vue instance
- Registering and using Vue components
- Installing vue-cli and webpack
- Understanding the Vue app skeleton