Getting Started with Vue.js Chapter 1Creating the workspace
To use Vue, we first need to include the library in our HTML and initialize it. For the
examples in the first section of this book, we are going to be building our application in a
single HTML page. This means the JavaScript to initialize and control Vue will be placed at
the bottom of our page. This will keep all our code contained, and means it will easily run
on your computer. Open your favorite text editor and create a new HTML page. Use the
following template as a starting point:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Vue.js App</title>
</head>
<body>
<div id="app">
</div>
<script src="https://unpkg.com/vue"></script>
<script type="text/javascript">
// JS Code here
</script>
</body>
</html>The main HTML tags and structure should be familiar to you. Let's run over a few of the
other aspects.
Application space
This is the container for your application and provides a canvas for Vue to work in. All the
Vue code will be placed within this tag. The actual tag can be any HTML element -
main, section, and so on. The ID of the element needs to be unique, but again, can be
anything you wish. This allows you to have multiple Vue instances on one page or identify
which Vue instance relates to which Vue code:
<div id="app">
</div>During the tutorials, this element with the ID will be referred to as the app space or view. It
should be noted that all HTML and tags and code for your application should be placed
within this container.