The simplest way to install Vue.js is by linking to the CDN. Note: place your script tag at the end of the
You can also install Vue via the Node Package Manager, or use the powerful Vue CLI.
What We’ll be making - Whiskey Tango Foxtrot
The NATO phonetic alphabet is a radiotelephonic alphabet used by NATO members. In other words, it’s a method used by radio operators to spell words and pronounce letters clearly by using a proxy alphabet. “Cat”, for example, would be transmitted as “Charlie, Alpha, Tango.” You might recall hearing this system used in just about any action movie that features the U.S. military.
Our app will take a user’s input and translate it into the NATO phonetic alphabet in real-time. No need to refresh the page, rewrite DOM elements, or create event listeners. In other words, we’ll be leveraging real-time, two-way binding between our DOM and data.
Note: I won’t be diving into the CSS of this project, as Vue.js is the focus. I’ll be using ES6 syntax, so you may need to use a preprocessor, such as Babel, for full browser support (or you could just use ES5 syntax).
Setting up Vue.js
The easiest way to get started with Vue.js is to simply import it from a CDN using a
<script> tag and placing it at the end of the
<body> in our HTML document.
Now, in our
<script> tag we’ll have access to the Vue framework. That’s really all we need to get started.
Binding Vue Data and the DOM
Next we’ll create a new Vue instance and give it an identifier in order to connect it to our HTML. The
el property will allow us to hook into an HTML element, thereby giving Vue access it to all its children. We’ll connect Vue and our DOM by giving the
<main> element an id of
app and setting the value of
el in our Vue instance to
data property will store our project variable,
input, which will initially be set to an empty string.
Our app will need to take user input in order to convert it, so next we’ll setup an
<input> field. We can connect the value of the
<input> to Vue by applying the directive
v-model to our
v-model="input" binds the DOM and the Vue data in a two way relationship. We can easily test this by outputting our
input using the mustache syntax that Vue provides for string interpolation.
With this setup, we now have two-way binding between our input value and our Vue data without implementing event listeners.
Converting our input to NATO format is quite simple. We’ll create a function outside of our Vue instance, which will accept a single letter as a parameter. A
switch statement with the key/values of our alphabet are then used to check against each letter passed to the function, ultimately returning our NATO phonetic equivalent. We make use of a regular expression to make sure that we’re only converting alphanumeric characters (!, #, &, etc. are ignored).
Vue gives us access to computed properties, which you can think of as variables — not unlike those specified in
data. However, computed properties are actually methods that return a value. Therefore, we can pass our
input into a computed property, call our NATO conversion function, and return the result. What makes computed properties incredibly powerful, though, is that they are updated continually. That is, every time that our
input is changed, our computed property will be updated as well.
Computed properties are declared with the
computed property in the Vue instance. To convert our user input into a NATO-ready string, we’ll define a computed property,
result() method will take
input as a parameter, return the
input value after splitting it into individual characters, and calling the
nato() function on each character. Note that Vue allows you to access properties within an instance by using
this via a helpful proxy. Now, instead of displaying
input in our
<p>, we’ll instead display
Lastly, we’ll create a button that allows us to quickly clear our
input. We’ll accomplish this by creating a button and attaching a click event listener to it. Vue gives us the
v-on:click directive, which unsurprisingly listens for a mouse-click on an element. It has a shorthand of
@click, which we’ll be using. We’ll set the value of the click event listener to a method,
clear, which we we’ll set up next.
Methods are defined in the Vue instance with the
methods property in the Vue instance. We’ll now define the
clear() method that we attached to the
@click event listener and simply set the
input back to its initial state, an empty string.
Note that when we clear our
input, our computed property,
result is also cleared.
With this example we’ve only just scratched the surface of Vue’s capabilities. Nevertheless, within this example we can start to see the simplicity of the Vue model and the ease in which we can setup reactivity between data and the DOM. I created a version of this exercise using jQuery, which illustrates a different approach to solving this exercise (see it on codepen). The Vue version of this app is much more concise and flexible.
I encourage you to explore the official Vue documentation, which is both comprehensive and approachable. Vue is capable of much, much more, including conditional DOM rendering, component architecture, routing, and state management. While Vue doesn’t necessarily offer anything new that isn’t already available with other frameworks, such as React and Angular, it is incredibly lightweight and simple.
Resources & Additional Reading
Have feedback? Let me know; I’d be happy to hear it. firstname.lastname@example.org