What Is Vue

Welcome to Vue! Vue (pronounced like “view”) is a JavaScript framework for building web apps, pages that react to what you do. A framework is ready-made code that your app is built on: it does the work that every app needs, and you write what makes your app special. Vue is used by many companies, and it's known for being easy to start with. In this course, you'll build an ordering app for Corner Café step by step: its menu, the customer's order and its total.

There's already a small Vue app in the editor. Click Run: the preview shows the café's menu. Click Add next to a few drinks and watch the numbers under the menu.

Remember how you changed a page in the JavaScript course: you found an element with querySelector(), changed its textContent and created new elements with createElement(). You told the page, step by step, what to change.

Vue works the other way around. You write a template: HTML that says what the page shows, with places for your data. Vue makes the page from the template and the data, and when the data changes, Vue updates the page by itself. Look into App.vue: the drinks are in the array menu, and the list on the page is made from it. There's no querySelector() or textContent anywhere. The function addToOrder only changes two numbers, count and total, and Vue shows their new values.

Don't worry if you don't understand every line of App.vue yet. You'll learn the list made with v-for in the lesson Conditions and Lists, and the button with @click in the lesson State and Events. By the end of the course, you'll write the whole app yourself, and much more.