Getting Started with Vue.js Chapter 1Although you can use most HTML tags for your application space, you
cannot initialize Vue on the <body> or <HTML> tags - if you do so, Vue
will throw a JavaScript error and will fail to initialize. You will have to use
an element inside your body.Vue library
For the examples in this book, we are going to be using a hosted version of Vue.js from a
CDN (Content Delivery Network) unpkg. This ensures that we have the latest version of
Vue in our application, and also means we do not need to create and host other JavaScript
files. Unpkg is an independent site that hosts popular libraries. It enables you to quickly
and easily add a JavaScript package to your HTML, without having to download and host
the file yourself:
<script src="https://unpkg.com/vue"></script>When deploying your code, it is a good practice to serve up your libraries from local files
rather than relying on CDNs. This ensures that your implementation will work with the
currently - saved version, should they release an update. It will also increase the speed of
your application, as it will not need to request the file from another server.
The script block following the library include is where we are going to be writing all our
JavaScript for our Vue application.
Initializing Vue and displaying the first message
Now that we have a template set up, we can initialize Vue and bind it to the HTML app
space by using the following code:
const app = new Vue().$mount('#app');This code creates a new instance of Vue and mounts it on the HTML element with the ID of
app. If you save your file and open it up in a browser, you will notice nothing has
happened. However, under the hood, this one line of code has linked the div with the
app variable, which is an instance of a Vue application.