Welcome to Vue Data! In Introduction to Vue, we briefly covered some of the most exciting features of Vue. In this lesson, we will start by reviewing how to create Vue apps and display dynamic data. We will then explore the different types of data that Vue can store and display in far more depth.
The first step to beginning any Vue project is to import the Vue library. For simple projects, we do this by adding the following
<script> tag to the
<head> of the HTML file that will contain the Vue app:
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js" defer></script>
Over the next three Vue lessons, we will be building a purchase screen for an e-ticketing app. We have prepared all of the static HTML and CSS for you. You can see the current version of the site to the right. It will be up to you to write all of the Vue code to make the site work as expected.
During this lesson, we will add all of the necessary data and functionality to our Vue app. In the next lesson, Vue Forms, we will then go on to use this data to make our app work as expected. We will add some of the code from the next lesson at points throughout this lesson to let you preview how your data will ultimately work in the app. You will learn how to use all of the techniques to make this app work very soon.
Let’s start by adding Vue to our project. In index.html, import Vue using the
<script> tag provided above.