A View on Vue.js

Mike BerrymanFor the past year and a half or so I have been working on various Angular.js applications for different clients. I’ve really enjoyed working in the Angular framework, and one of the really nice parts of that framework is the model-view binding that you get.

With model-view binding, you basically put some custom attributes on your HTML elements and the framework will then automatically handle persisting any changes to the model to the view or vice-versa.  It makes capturing data from a user or displaying data to a user a snap!

So when I recently started a javascript project that wasn’t going to use Angular.js, I needed a stand-alone model-view binding framework.  The only thing I had used in the past that fit the bill was Knockout, but it had left a bad taste in my mouth so I wanted to find an alternative.

Enter Vue.js.

Vue.js was released in early 2014 but didn’t get it’s 1.0.0 release version until October of last year (2015).  I’ve been using it for about a week now and so far I’m quite happy with the functionality it’s provided me.  Coming from an Angular.js world, Vue.js was really easy to slip into after some basic tutorials.  It’s not nearly as large a framework as Angular.js, but that’s exactly what I wanted – a light-weight model-view binding framework that would only give me the necessary basics.

One of the biggest differences between Vue.js and Angular.js is that Vue object that is used to actually bind to the DOM.  With Angular.js, you add properties to your $scope in order for them to be “bound” to the DOM – with Vue.js there’s an extra layer in the form of the Vue object to setup this binding:

new Vue({
  el: '#example', //some css selector
  data: {
    text: 'Hello World!'
  }
});

The data property of the Vue object are what’s actually bound to the DOM using some syntax that’s very familiar to Angular.js users:

<div id="example">
  {{ text }}
  <br>
  <input v-model="text">
</div>

Updates to the DOM will update the vueObj.data.prop property and vice versa (note that Vue.js proxies accessing any data object properties via the vueObj.prop shorthand).

At it’s core this is basically what I was looking for in a model-view binding framework so I didn’t have to worry about the specifics of collecting or display data to a user, but Vue.js provides more than just this basic example.  As I said above I’ve only been using it for about a week now so I haven’t utilized everything the framework has to offer, but this is what I’ve accomplished with it so far:

  • Created computed properties with getters and setters to mutate a property from a server-side boolean into a “Yes/No” toggle
  • Created a custom filter (a function that a property gets piped through) to turn ISO dates into friendly formatted dates and arrays into comma-separated strings
  • Bound events to the Vue.js object
  • Dynamically construct select field options using an array of objects
  • Conditional display/hide or DOM element removal
  • Utiltize the very Angular.js-like $watch functionality to react to model changes

So far I’ve only found one minor complaint.  With Vue.js, if you don’t define your properties on the data property of the Vue object then that property won’t be “watched”, which is to say changes between the view and model won’t be persisted.  I believe you only have to define top-level properties (so you don’t have to defined all the sub-properties of an object you want to bind to) but it’s still a minor annoyance to have to define all your data properties on the Vue object, even if it’s just to set them all the null initially.

I feel like the still-quite-new Vue.js is a solid framework for model-view binding, especially for someone coming from an Angular.js background.  The concepts and usages are very similar and take little ramp-up time.  Additionally, Vue.js has a development version of the library that will warn you if you write some inefficient Vue.js code.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s