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.
Lets 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>
<meta charset=
"UTF-8"
>
<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 and the button -->
<div id=
"sg1"
>
<p>{{ m1 }}</p>
</div>
</body>
</html>
What We Did
First, in the header section, 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 body section. Here we have a div with the id “sg1”, which is not a reference to Star Gate (sorry), and then the placeholder for our text.
<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 header section 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 jQuery $(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 in an options object that tells it what to do. 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 saying document.getElementById('#sg1')
When we run it, we get:
That was pretty simple and not enormously useful but 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 are going to ratchet up the complexity a bit here and add… a button! Take a look:
<!DOCTYPE html>
<html lang=
"en"
>
<head>
<meta charset=
"UTF-8"
>
<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 HTML section we’ve added the button. This is a basic button, and we’ve defined an action to take on a button click by attaching an event listener that invokes the method "staygo", and we’ve put a placeholder for the button text called “btext”.
Back in the code, we’ve added something new to our options object - a methods section. And in it we've added a method called “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 it's 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 styles -->
<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 the required libraries
for
Kendo UI -->
<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 the required Kendo Vue package
for
the specific component we are using -->
<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 new div in the body. Here you see some new text but also the actual drop down “kendo-dropdownlist”.
<!-- second text and the dropdownlist -->
<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 specified the method “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 drop down. For more on this, take a look at the docs for the Kendo UI Dropdownlist component for Vue.
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
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 data items – one for the text “m2”, and the second is an array that actually gets used by the dropdown. Finally, we have a method that is called on a change of selection in the dropdown and all that does is set the text “m2” based on the selection, which is passed in with “e.sender.value()”.
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
- 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 full code for the final example can be found here on GitHub