Hello Vue: A Quick Tutorial on Getting Started with Vue
A quick tutorial on getting started with Vue, including the use of a component from Kendo UI for Vue. Designed to be a great starting point with an example that, like Vue itself, is scalable.
This tutorial is aimed at the first-time Vue explorer. I'll show you how to create a simple example using Vue, and then I'll add in some interactivity and a UI component, and finally add in more functionality and a Kendo UI component. While this tutorial demo is quite basic, it outlines all the key elements of adding in features and functionality using Vue. It would be very easy to expand on the demo code and swap in more complex components. My example, like Vue itself, is scalable.
As a sidenote, the name of the framework is technically "Vue.js," and some places will even tack on the revision number to get "Vue.js 2," but most people just use "Vue" in common usage so I will too. This tutorial focuses on the language and does not cover more advanced topics like the Vue-cli which are important, but should come later.
Let's get started!
Hello, world!
First, let's begin by giving you a taste for how easy it is to get started with Vue. We'll start off with a Vue implementation of the popular "hello, world" application. Note that I'm a purist here and I use the original spelling as defined in the original Kernighan and Ritchie book, "The C Programming Language". Look it up for a history lesson.
Having said that, I won't actually use the text "hello, world". You'll see why later. Instead of a "hello, world" example this is a "you got to let me know" example. Here we go – explanation to follow.
<!DOCTYPE html>
<html lang="en">
<head>
<title>Clash</title>
<!-- the star of the show - the Vue library! -->
<script src="https://unpkg.com/vue/dist/vue.min.js"></script>
<script>
// when life is settled, load up the fun stuff
document.addEventListener('DOMContentLoaded', function () {
new Vue({
el: '#sg1',
// define data - initial display text
data: {
m1: "You got to let me know"
}
})
})
</script>
</head>
<body>
<!-- text -->
<div id="sg1">
<p>{{ m1 }}</p>
</div>
</body>
</html>What We Did
First, in the document <head>, we give it title. Not strictly necessary but good practice in case you forget what this is.
Next, we load the Vue library from a CDN. When you get started you'll probably switch to npm (which is the recommended installation method for Vue), but a CDN is the simplest and most portable way to include it.
First, let's skip down to the document <body>. Here, we have a <div> element with the attribute, id="sg1". (This is not a reference to Stargate SG-1.)
<div id="sg1">
<p>{{ m1 }}</p>
</div>
At the heart of Vue is the ability to declaratively render data to the DOM with simple template syntax.
Jumping back to the document <head>, we see some code that fires off when the DOM is loaded by setting an event listener. If you are coming from the jQuery world, this is just like $(document).ready() but without the jQuery.
Next, we have our Vue code and all that does here is set the content of "m1":
new Vue({
el: '#sg1',
// define data - initial display text
data: {
m1: "You got to let me know"
}
})
We start off here creating a new Vue instance with the Vue() function. With this, we pass it configuration. Here, we've just set an initial value for m1 in the data section. (More on that later.) We've also told it what element we want to work with, and el: '#sg1' is similar to document.getElementById('#sg1').
When we run it, we get:
That was pretty simple, but not enormously useful. However, it does get us going on how to set up a Vue app. So far, it doesn't look too different. But something interesting has happened here that we haven't seen yet. We'll explore what that was in the next example.
Adding Interactivity
Next, we'll add a button:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Clash</title>
<!-- the star of the show - the Vue library! -->
<script src="https://unpkg.com/vue/dist/vue.min.js"></script>
<script>
// some data we'll use
var action = [ "Go", "Stay"];
var result = [ "It will be double", "There will be trouble" ];
// when life is settled, load up the fun stuff
document.addEventListener('DOMContentLoaded', function () {
new Vue({
el: '#sg1',
// define data - initial display text and set the text on the button
data: {
m1: "You got to let me know",
btext: action[0]
},
// define the methods - alternate between the two values
methods: {
staygo: function () {
var sel = ( this.btext == action[0] ) ? sel = 1 : sel = 0;
this.m1 = result[sel];
this.btext = action[sel];
}
}
})
})
</script>
</head>
<body>
<!-- text and the button -->
<div id="sg1">
<p>{{ m1 }}</p>
<p><button v-on:click="staygo">{{ btext }}</button></p>
</div>
</body>
</html>
In the markup, we've added the button. This is a basic button, and we've defined an action to take on a click event by attaching a listener that invokes staygo(), and we've put a placeholder for the button text called "btext".
Back in the code, we've added a methods property to our configuration. And in it, we've defined staygo() to match the one in the button. This is where it gets interesting.
methods: {
staygo: function () {
var sel = ( this.btext == action[0] ) ? sel = 1 : sel = 0;
this.m1 = result[sel];
this.btext = action[sel];
}
}
We've also added text to the data area to give the button an initial label. In the method, we basically see what is on the button and then toggle between one of two lines of text and one of two button labels.
data: {
m1: "You got to let me know",
btext: action[0]
}
The interesting thing that has happened here is that we have now linked the data and the DOM and our app is reactive. When we change the value of m1, the text displayed is changed, When we change the value of btext, the button text is changed. Nothing more needs to be done. This happened in our first example as well, but we didn't see that because we just left the text with its initial value.
This is what it first looks like:
We see the text "You got to let me know" and the button is labeled "go". As any fan of classic punk knows, if you go "There will be trouble" and the text is changed to this. At the same time, having decided to stay, our only option is now to "stay" and we will change the label on the button to "stay".
If you now click on "stay", the text changes to "It will be double".
You can click back and forth between stay and go and decide if you want regular trouble or double trouble.
Adding a Kendo UI Component
For the sake of simplicity I'm using a basic dropdown component here but the process is much the same if you wanted to add a grid or chart or other more complex component. Also, it's getting a bit long so I'll list the additions to each section below and list the full code here on GitHub.
For starters, we've added a section in the header to bring in the Kendo UI styles, basic libraries, and the library for this component:
<!-- load Kendo UI stylesheets -->
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2017.3.913/styles/kendo.common.min.css"/>
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2017.3.913/styles/kendo.default.min.css"/>
<!-- load Kendo UI libraries -->
<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
<script src="https://kendo.cdn.telerik.com/2017.3.913/js/kendo.all.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.6.15/browser-polyfill.min.js"></script>
<!-- load Kendo UI for Vue -->
<script src="https://unpkg.com/@progress/kendo-dropdowns-vue-wrapper/dist/cdn/kendo-dropdowns-vue-wrapper.min.js"></script>This includes some styling for the components, some libraries we rely on, and the library with the actual component we will be using.
We've also added a <div> element in the <body> section. Here, you see some new text but also the <kendo-dropdownlist> element:
<!-- second text and the DropDownList component -->
<div id="sg2" class="vue-app">
<p>{{ m2 }}</p>
<h4>Singer:</h4>
<kendo-dropdownlist :data-source="singerOptions"
:data-text-field="'text'"
:data-value-field="'value'"
@change="onChange">
</kendo-dropdownlist>
</div>
Here, you can see that we've specified what the data source (the array of text items) is for the actual labels, what the text field is called, what the value to be returned is called, and finally we've told it what to do on a specific action. In this case, it's @change, which fires off when the selection is changed (not just selected, but actually changed to a different selection) and we've defined onChange(). There are a number of other events you can trigger on, and a ton of other parameters you can set to control the behavior of the DropDownList component. For more on this, take a look at the documentation for the DropDownList component.
Now, back to the script and we've added new code for this new section:
new Vue({
el: "#sg2",
// data is the lyric line and the two options for the DropDownList component
data: {
m2: problem[0],
singerOptions: [
{ text: option[0], value: '0' },
{ text: option[1], value: '1' }
]
},
// and the method here just updates the text based on the singer selection
methods: {
onChange: function(e) {
this.m2 = problem[e.sender.value()];
}
}
})
We've added two (2) data items: one for the text, "m2", and the second is an array that actually gets used by the DropDownList component. Finally, we have a method that is called on a change of selection in the DropDownList component that sets the text "m2" based on the selection, which is passed in with e.sender.value().
One last thing... we need to also add in the data for problems and options. So now our initial data will look like this:
// some data we'll use
var action = [ "Go", "Stay"];
var result = [ "It will be double", "There will be trouble" ];
var problem = [ "This indecision's bugging me", "Esta indecision me molesta"];
var option = [ "Mick", "Joe and Joe"];
Our app now looks like this:
We still have the original "hello, world" text and button, but now we also see the new line of lyrics and a drop down. If we click on the drop down we get the two choices: "Mick" or "Joe and Joe".
If we select 'Mick" we see the English lyrics sung by Mick Jones, which is what we started off with. If we select "Joe and Joe" we get the line in Spanish as sung by Joe Strummer and Joe Ely.
Next Steps
Now that you've seen how easy it is to get started with Vue, what next?
There are a variety of directions you can head after this little example. But here you have an actual working example with interactivity and a Kendo UI component all connected. If you haven't played with Vue before, this serves as a step beyond the basic "hello, world" examples which exist for a purpose – making sure you have the basics all setup and working. It's never very helpful to start off with a complex example because when it doesn't work you usually have no idea why, and that's why "hello, world' examples are so popular.
Going a step further, here are some links that you may find helpful:
Training Sites
- The Vue.js guide on Vuejs.org
- Learn Vue 2: Step by Step on Laracasts
- 9 Interactive Screencasts to learn Vue from Scrimba
- Getting Started with Kendo UI and Vue: Video Tutorial - a more complex example using advanced Kendo UI components
Related Blog Posts
- Building Apps with Vue.JS - this is a great "next step" blog
- 4 Awesome Things You Can Do with the Vue.js CLI
- Get Going with Kendo UI & Vue: a GIF Guide - a little more NPM and Vue CLI, less basic Vue
- Building PWAs with Vue.js
Happy coding!
The source code found in this article is available on GitHub: HelloVue.
John Willoughby
John loves technology and because he just doesn’t get enough during the day, he also writes apps for fun as a hobby. He has worked in various software development and product marketing roles at both hardware and software companies. John has a Bachelor's in Electrical Engineering (Computer Design) and is in the middle of his Master's in Computer Science. When not actually sitting in front of a monitor he enjoys playing guitar.
Related Posts
Comments
All articles
Topics
Latest Stories
in Your Inbox
Subscribe to be the first to get our expert-written articles and tutorials for developers!
All fields are required