VueJs an introduction

This entry is part 1 of 7 in the series VueJs

So in the last 6 months I have been working solely with VueJs. And I have to say I am overjoyed at how wonderful this library is.

It’s main purpose is for building web interfaces and rather than being a huge library that can be highly opinionated. Vue is very open to how you wish to use it. Wether for a small aspect of a page or up to a full blown SPA or App. It can handle it all.

You are probably thinking: Not another Javascript framework!

I thought this at first but upon a few interactions with it I was sold and at every step throughout learning and use it I’ve come to the thinking of it being helpful in most cases.

So what makes vue the choice to go with?

Well let me show you a nice simple short example in VueJs an introduction. First lets write the Js:

new Vue({
    el : '#app',

    data : {
        'message' : 'hello world',

So the Vue instance is as simple as declaring a new instance. Now vue is activated.

Next attach it to an element in your page using the el property. And for our example we need some data to work with so we will output a nice message to you lovely folk that we can interact with. Now the HTML:

<div class="container-fluid" id="app">
  <h1>{{ message }}</h1>
  <input type="text" class="form-control" v-model="message">
  <br />
  <pre>{{ $data | json }}</pre>

Nothing too fancy and you will notice the handlebar syntax to output data. The only other caveat is the v-model syntax attached to the <input type="text" />. This is Vue’s way of giving you 2-way binding on any data element you declare in your vue instance. Well rather than writing about it, lets show you what this can do:

n.b. if you are working on a local version then grab the url for the VueJs library and put into your html. Pull in from cdnjs for example purposes

See the Pen Vuejs by diquinnyonk (@diquinnyonk) on CodePen

As you can see we have 2-way binding on our element. (I have also put a live data output at the bottom so you can see what vue see’s in its data instance).

If you look at the JS tab you will see the Vue instance. Simple enough you create your instance and from then onwards you bind to your chosen element and then the data that will be your source of truth.

The actual Javascript output is relatively small to achieve something that would cause a bit of a headache with plain javascript or jQuery. Out of the box you have a nice simple starting point to get going and concentrate on the more important job of doing what you want.

Lets have one more example

Ok so lets get one more for the road in this nice litte intro to Vue. Let’s have input that will only reveal a submit button once it has input then when that it has input you can click and an alert will popup:

See the Pen Vuejs by diquinnyonk (@diquinnyonk) on CodePen

I think you will agree, VueJs is incredibly simple and even beautiful in its approach to some simple examples. I hope you have a look

In the next post we will work up to a more complex example and incorporate some more of Vues handy toolstrip. See you then!

Series NavigationVueJs class and style bindings >>

Random Posts