Vue Quick Start tutorial, this tutorial includes components for using Kendo UI for Vue. Hopefully this tutorial will be a good starting point for you to learn about VUE. There is also an extendable example that you can follow further if you are interested.

This tutorial is aimed at using Vue Explorer for the first time. I’ll show you how to create a simple example using Vue, then I’ll add some interactivity and UI components, and finally add more features and Kendo UI components. While the tutorial demo is very basic, it Outlines all the key elements for adding features and functionality using Vue. It’s easy to extend the demo code and swap more complex components. My examples, such as Vue itself, are extensible.

Ps: The name of the framework is technically “vue.js”, and some places even change the version number to get “vue.js 2”, but most people just use “Vue” in common use. This tutorial focuses on languages and does not cover advanced topics such as vue-CLI, which are more important, but should come later.

Let’s get started!

Hello, world!

First, let’s take a look at how easy it is to get started with Vue. We’ll start with the Vue implementation of the popular “Hello, World” application. Please note that I am a purist here and I use the original spelling of “C programming language” as defined in the original Kernighan and Ritchie books.

Having said that, I don’t actually use the words “Hello, world.” You’ll understand why later. Rather than a case of “Hello world”, it was a case of “You must let me know”. We’re leaving. – Here’s the explanation.

<! 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>Copy the code

What did we do

First, in the file, we give it a title. It’s not absolutely necessary, but writing headlines is a good habit that shouldn’t be forgotten.

Next, we load the Vue library from the CDN. When you start using it, you’ll probably switch to NPM (which is Vue’s [recommended installation method](vuejs.org/v2/guide/in… (), but CDN is the simplest and most portable.

First, let’s jump to the document . Here, we have one with attributes

Element with id = “sg1”.

<div id="sg1">
  <p>{{ m1 }}</p>
</div>

Copy the code

At the heart of Vue is the ability to declaratively render data to the DOM using simple template syntax.

Jumping back to the document , we see some code that fires when the DOM is loaded by setting the event listener. If you’re from the jQuery world, this is like $(document).ready ().

Next, we have our Vue code, and what we do here is set the contents of “M1” :

new Vue({
  el: '#sg1',
  // define data - initial display text
  data: {
    m1: "You got to let me know"
  }
})


Copy the code

We start here by creating a new Vue instance using the Vue () function. With this, we pass it the configuration. In this case, we only set the initial value of M1 in the data section. (More on that later.) We also tell it which element we want to use, el: ‘# sg1’ similar to document.getelementById (‘ # sg1’).

When we run it, we get:

It’s simple, but not very useful. However, it does give us an idea of how to set up the Vue application. So far, it doesn’t look much different. But there’s something interesting going on here that we haven’t seen yet. We’ll talk about that in the next example.

Increase 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>Copy the code

In the tag, we add buttons. This is a basic button, and we define the action of a click event by attaching a listener that calls staygo (), and we set a placeholder named “btext” for the button text.

Back in the code, we added a method property to the configuration. In it, we define 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]; }}Copy the code

We also added text to the data area to provide the initial label for the button. In this method, we basically see what’s on the button and then switch between one of the two lines of text and one of the two button labels.

data: {
  m1: "You got to let me know",
  btext: action[0]
}

Copy the code

The interesting thing that’s happening here is that now that we’ve linked the data and DOM, our application is passive. The displayed text is changed when we change the value of M1, and the button text is changed when we change the value of btext. There’s nothing left to do. This also happened in our first example, but we didn’t see it because we just left the text with the initial value.

Looks like:

We see the text “You must tell me” and the button marked “Go”. As any fan of classic punk knows, “there will be trouble” if you go and the text is changed to that. Meanwhile, having decided to stay, our only option was to “stay”, we changed the label on the button to “stay”.

If you click Stay now, the text changes to It will be double.

You can click back and forth between stay and go and decide if you want to be in trouble or double trouble often.

Add Kendo UI components

For simplicity, I’ve used a basic drop-down component here, but the process is much the same if you want to add a grid or chart or some other more complex component. Also, it’s a bit long, so I’ll list the additions for each section below and list the full code on GitHub.

First, we added a section in the title to introduce the Kendo UI style, the base library, 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" / > <! - the 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>Copy the code

This includes some of the styles of the components, some of the libraries we rely on, and the libraries of the actual components we will use.

We also added a

element to the section. Here, you should see some new text and 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>Copy the code

Here, you can see that we have specified the data source for the actual tag (the text item array), called the contents of the text field, called the returned value, and finally told it how to handle the specific action. In this case, it’s @change, which is triggered when the selection is changed (not just selected, but actually changed to some other choice) and we’ve defined onChange (). You can trigger many other events, and you can set a number of other parameters to control the behavior of the DropDownList component. For more information on this, see the documentation for the DropDownList component.

Now, back to the script, we have 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()]; }}})Copy the code

We added two (2) data items: one for the text, “m2,” and the second for the array actually used by the DropDownList component. Finally, we have a method called when a selection is changed in the DropDownList component that sets the text “m2” based on the selection, which is passed along with e.sender.value ().

Our application now looks like this:

We still have the original “Hello, World” text and buttons, but now we’re also seeing new lyrics and drop-down lists. If we click on the drop-down menu, we get two choices: “Mick” or “Joe and Joe”.

If we choose ‘Mick’, we’ll see Mick Jones singing in English and that’s the song we started with. If we choose “Joe and Joe,” we get Spanish sung by Joe Strummer and Joe Ely.

The next step

Now that you’ve seen how easy it is to get started with Vue, what’s next?

You can find all kinds of directions after this little example. But here you have an actual working example of interactivity and all connected Kendo UI components. If you haven’t used Vue before, this goes beyond the basic “Hello, World” examples, which are based on the fact that you have all the basics of setup and work. It never helps to start with a complicated example, because when it doesn’t work you usually don’t know why, which is why the “Hello World” example is so popular.

Taking things a step further, here are some links you might find useful:

Related websites

  • 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 source code for this article is available on GitHub: HelloVue.