Over a million developers have joined DZone.
{{announcement.body}}
{{announcement.title}}

Hello Vue: A Quick Tutorial on Getting Started With Vue

DZone's Guide to

Hello Vue: A Quick Tutorial on Getting Started With Vue

A tutorial on getting started with Vue, including the use of a component from Kendo UI. Designed to be a great starting point with an example that is scalable.

· Web Dev Zone ·
Free Resource

Jumpstart your Angular applications with Indigo.Design, a unified platform for visual design, UX prototyping, code generation, and app development.

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 side note, 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>

   <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 a 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 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 drop-down component here but the process is much the same if you wanted to add a grid or chart or another 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 drop-down. Finally, we have a method that is called on a change of selection in the drop-down 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 set up 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.

Happy coding!

The full code for the final example can be found here on GitHub

Take a look at an Indigo.Design sample application to learn more about how apps are created with design to code software.

Topics:
web dev ,vue.js ,web application development ,tutorial ,hello world

Published at DZone with permission of

Opinions expressed by DZone contributors are their own.

{{ parent.title || parent.header.title}}

{{ parent.tldr }}

{{ parent.urlSource.name }}