10 Minute Vue App
The Intro
Vue is a front-end JavaScript framework that packs a lot of the same features of other popular frameworks (e.g., Angular and React) into a slimmer, easier-to-learn package. To prove it, I'm going to show you how to get a very simple Vue app up and running in just 10 minutes*! If you want to just skip to the code, grab the repo from Github.
* Common side effects include a heightened respect for JavaScript, bragging about your new skills, and curiosity about what more Vue has to offer. Please consult the Vue.js documentation if you experience any of these symptoms. Some restrictions apply. Individual results may vary.
The Prerequisites
The App Structure
One folder and two files is all we're going to need here.
(1) Create a folder called ten-minute-vue-app.
(2) In that folder, create two files: index.html and app.js.
The Code
The HTML page (index.html) is going to contain an element that is mounted with a Vue instance, which will be defined in our Javascript file (app.js) later. Any data and methods that you define in this Vue instance will be accessible within this element, in addition to Vue's native functionality.
(3) Add your basic HTML boilerplate code to index.html.
<!DOCTYPE?html>
<html>
????<head>
????????<title>10?Minute?Vue?App</title>
????</head>
????<body>
<h1>10 Minute Vue App</h1>
??? </body>
</html>
To inject Vue into your HTML, all you need to do is reference a link to it in the CDN (content delivery network) with a script tag.
(4) In the <head> of your file, add Vue to your HTML.
<script?src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
Since your Vue instance will live in app.js, you'll need to connect this to your HTML, too.
(5) Immediately above the closing <body> tag, add app.js to your HTML.
<script?src="app.js"></script>
As we mentioned earlier, the HTML file is going to contain an element that will be mounted with a Vue instance. This element is nothing special yet, but it will be soon.
(6) In the <body> element, above your <script> tag for app.js, create a div to mount the Vue instance to. Give it an id of "app."
<div id="app">
</div>
At this point, your HTML file should look something like this:
领英推荐
Now that we've hooked-up our HTML, let's jump into that JS file to create our Vue instance.
(7) Create a Vue instance in app.js.
new?Vue({
???
});
This Vue instance is currently useless. It contains nothing and is mounted to nothing. Let's change that.
(8) Mount the Vue instance to the div living in our HTML by specifying that element as the value for the el property ("el" is short for "element.") We'll identify it by using the CSS selector for its id.
new?Vue({
el: "#app"
});
Now that the connection between the HTML element (#app) and the Vue instance has been established, we can start sharing data and methods between them.
(9) Define a value in the Vue instance's data property. The data property is an object containing various key:value pairs of data.
new?Vue({
????el:?"#app",
????data:?{
????????"confirmation":?"Your?Vue?data?is?working!"
}
});
(10) Access that value in the HTML using mustache syntax (a.k.a. double curly braces).
<div?id="app">
<p>{{ confirmation }}</p>
</div>
At this point, if you haven't already done so, open your index.html file in your browser of choice to see your HTML and JS playing together nicely.
Now that we've seen Vue pass data for us, let's whip-up a method and call it from our HTML.
(11) Define a method in the Vue instance's method property. Like the data property, the method property is also an object.
new?Vue({
????el:?"#app",
????data:?{
????????"confirmation":?"Your?Vue?data?is?working!"
????},
????methods:?{
????????sayHello()?{
????????????alert(`Hello!`)
????????}
}
});
(12) Use this new method in the HTML by creating a button element that listens for a click event and triggers the method call as a response*.
* The v-on syntax is part of a Vue directive, which is beyond the scope of this article. Please see Intro to Vue Directives (coming soon) if you want to learn more.
<div?id="app">
????<p>{{?confirmation?}}</p>
<button?v-on:click="sayHello()">Greet?Me</button>
????????
</div>
Now when you look at this in the browser, you should see the following alert when you click on the "Greet Me" button. If you didn't code along, you can also see this in action by checking out the CodePen preview.
Conclusion
With this simple application, you've just unlocked the door to using Vue.js. Part of the beauty of Vue is its low barrier to entry, but don't let this fool you into thinking it's a shallow framework. This article was just a taste of what Vue has to offer, so we didn't even touch on other amazing features like directives and components, so there's tons more to explore!