Quick Look @ Vue.js

Quick Look @ Vue.js

Brett M. Nelson - Monday, March 6, 2017

Lets take a quick look at Vue.js. It sells it's self as a "progressive framework for building user interfaces". So my take on that is you can enhance your webpage with a sprinkling of Vue.js and not buy the glitter factory it comes with. With a focus on the view layer of a website it is easy to see how you can enhance a page slightly to great effect, something that I feel AngularJS (1.*) lost in the transition to Angular(2+).

Getting Started

Getting started is simple, about as simple as the adding two scripts tag to a page (the Vue.js library and your code), identifying an element to have the app reside in, and any binding you plan on using:

Whole Vue.js Index page

Vue.Js Test app
<= Identify App container <= some binding
<= Vue.js Library <= Custom Code

We should add something to our app.js though, so we will create a new Vue app that identifies the element and some data:

Starter app.js

var app = new Vue({ el: '#app', data: { message: 'Hello WIPDeveloper.com!' } })

I'm using lite-server to serve the page up and see it locally, feel free to use any server that you feel comfortable with.

Vue.js In Action

It's so complicated I can embed it right here if I wanted to:

More Dynamic?

Well that's interesting but what if we want to display what the user has entered into a text box right next to it.

While this is very common in examples you probably wont be doing this that often in a "real" app

All we have to do is add an input with a v-model="message" binding and we will be able to edit the contents of out message data property:

New <body>

<= This is New

More Vue.js In Action

It's still so complicated I can embed it right here if I wanted to:

Code

Code can be found at Github/BrettMN/quick-look

Just Getting Started

That's it. You now have a Vue.js app. Let add a little more to to next time, maybe start a todo app? Let me know by leaving a comment below or emailing brett@wipdeveloper.com.

Tags