You don\u2019t need another JavaScript framework. You\u2019ve got one you\u2019re using. Hopefully you\u2019re happy with it. You just read eight other articles about other awesome, shiny, new, amazing, fabulous frameworks with astounding new features that will change your very existence into something incredible. Right? I did.<\/p>\n
Vue.js<\/a> is (like many other frameworks) worthy of all of those adjectives. But none of those are why you should use it. And really, maybe you shouldn\u2019t. That will all depend on you and Vue and how you two get along. Let\u2019s find out.<\/p>\n I build web things. Often. I\u2019ve been building things for the web since the late \u201990s. I was even writing JavaScript (well, JScript) on the server side pre-2000. I used it on the client side from the moment I could make animated gifs chase a mouse cursor.<\/p>\n However, even with all the history, I\u2019d not met a JavaScript framework or library that I\u2019d really fallen in love with until I met Vue.<\/p>\n It wasn\u2019t because it was fast. It wasn\u2019t because it was the \u201cnew hotness.\u201d<\/a> It wasn\u2019t even because the code was simple and obvious. It was for one simple reason: It thought like me.<\/p>\n This was the key part of Vue that won me over.<\/p>\n State machines are old awesomeness. Nothing new here. However, in most JavaScript frameworks, libraries, or even \u201cvanilla code,\u201d understanding the state of the system is like untangling all those wires under your desk \u2014 or worse.<\/p>\n Vue puts the state machine at its very core by using a plain JSON-compatible object. Essentially:<\/p>\n Vue then adds reactive binding via its templating system and provides methods for data observation using simple JSON Path-style watchers. The end result is an application that centers around its data and reacts to changes within that data.<\/p>\n Another thing that won me over was the speed at which I could get my head around the sample code and explanations in the documentation.<\/p>\n For example, here\u2019s a strikingly simple Hello World-style Vue application (view it on JSFiddle<\/a>):<\/p>\n App.js<\/strong><\/p>\n App.html<\/strong><\/p>\n That\u2019s about as simple as it gets in any JS framework. The curly-brace style templating was very familiar from building entirely too many Mustache and Handlebars templates. The neat part with Vue, however, is that Don\u2019t believe me? I\u2019ll prove it by adding a bi-directionally bound message editor and only changing the HTML.<\/p>\n App.html<\/strong><\/p>\n Try it!<\/a><\/p>\n The That alone had me pretty sold, but obviously one could write it off as \u201cneat.\u201d However, as I dug deeper into the examples, documentation, and my own experience, I found that this simple, obvious approach brought me not only great happiness but also great reward in terms of speed of coding, understanding my own code, and ability to explain it to my friends and future self.<\/p>\n Vue successfully reduced my mental workload of bi-directional binding and application state into a single, understandable unit.<\/p>\n The best way to explain my utter exuberance over all this \u2014 and how it\u2019s hopefully applicable to your day today \u2014 is likely to take this example a bit farther and see where we end up.<\/p>\n Shall we?<\/p>\n So. We\u2019ve got a thing where we type stuff and it shows up on a screen. Neat!<\/p>\n What if we made it possible to record what we\u2019ve written plus when we wrote it? Like, you know, note taking.<\/p>\n We\u2019ll do that by:<\/p>\n Sounds straightforward enough. Here goes.<\/p>\n Since we have this fabulous underlying \u201cdata as state machine\u201d thing, let\u2019s flesh out the model a wee bit.<\/p>\n This change expands on our existing code, so it should all still work. It adds the Let\u2019s keep iterating. Next up, HTML.<\/p>\n You\u2019ll note I\u2019ve removed the bi-directional bound display for If you run that now, you should see one message in the list, a button to remove that message, and the message box (prepopulated with a default) to type in a new message as well as a Save button which doesn\u2019t (yet) work.<\/p>\n Let\u2019s make the Save button work. Back to the JS:<\/p>\n Now try it!<\/a> Pretty slick, right? We\u2019re simply manipulating the state of the data, and the output is reacting to that state change.<\/p>\n However, I spot some \u201cdata smarts\u201d in that Remember that bit about data as state machine? It gets better.<\/p>\n That created-date formatting living inside the save method is a bit of a \u201csmell\u201d (i.e.<\/em>, in want of refactoring). Consequently, it would smell less if it lived on its own. Vue has just the thing for that: computed data.<\/p>\n Here\u2019s the updated app code showing the new We\u2019ve added a new Now focus in on the third line of the The But this is still just the world of a single Vue application. We\u2019ve not yet added a component.<\/p>\n Let\u2019s add a component that could be useful in other applications. How about a desktop notification button using an emoji! That sounds super useful!<\/p>\n The Vue component below could be used in any Vue application. It accepts two properties: message and title. These map into the JS Notifications API you can see used in the The If you\u2019re coding in your own JSFiddle (or similar) you can copy\/paste that into the main JS above the Once you\u2019ve got it added, you can use it within this (and any other) Vue application by adding code similar to this:<\/p>\n The Let\u2019s take a look at it within the wider awesomessness of this little app\u2019s HTML:<\/p>\n Try it out!<\/a> You\u2019ll need to allow desktop notifications for it to work (which you probably already knew).<\/p>\n We\u2019ve made it this far. We\u2019ve got a working application that does extra neat things like desktop notifications. We\u2019ve seen a bit of Vue\u2019s component system and its bi-directional binding enabled templating system of greatness.<\/p>\n But there\u2019s more. Lots more.<\/p>\n For now, we\u2019re going to take a quick look at some niftiness to streamline the template code we\u2019ve just written to make it simpler \u2014 though (admittedly) a bit more idiosyncratic.<\/p>\n Every JS framework is unique. Often the uniqueness can feel strange or awkward in other people\u2019s code or examples in documentation. That\u2019s likely how you\u2019d have felt if I\u2019d started with this code.<\/p>\n We\u2019ve built this simple application and its component using two files: one for the JS code and one for the HTML (which you could even combine). The Vue world, however, has a handy command-line tool called vueify<\/a><\/em> which, as you might surmise from the name, works a bit like browserify, but with lots of Vue-focused fabulousness. For instance, vueify allows you to work with single The template code now lives inside a template tag, and the script tag now holds our JS code, which I\u2019ve changed to use ES6\/ECMA2016 which vueify is happy to transpile for me. Additionally, vueify allows you to mix in other preprocessors<\/a> such as Jade, Stylus, CoffeeScript, and many more.<\/p>\n If you think in preprocessed languages, adding vueify to your coding kit might increase happiness by at least +10.<\/p>\n When I found Vue, I found a framework that thinks like I do.<\/p>\n Data is central to what I design. Everything else pivots around it. Using watchers to react to change and computed values to generate unique additional value puts my \u201cprescriptive\u201d code in a place where I could still see my \u201cdescriptive\u201d data.<\/p>\n Templating is something I (actually) enjoy, and I\u2019ve found Vue\u2019s bi-directional binding, custom attribute-based integration, and web-component-like application construction to be refreshing. Containing elements of the UI within components that communicate their state through shared data and events felt right (to me at least).<\/p>\n Lastly, the Vue community, while still relatively small, has also been welcoming and eager to continue Vue\u2019s future and grow the surrounding ecosystem by contributing to \u201cofficial\u201d add-ons like Vuex<\/a> (a Flux-style state manager) and vue-router (for history and page-state management). There\u2019s also an ever-widening world of component-based code for your Vue-based applications.<\/p>\n It thinks like you do. If not, please use something that suits you. You\u2019ll get more done, be happier, and consequently get more done. Enjoy!<\/p>\nHow I Met Vue<\/h2>\n
Data as state machine<\/h3>\n
data == JSON.parse(JSON.stringify(data));<\/pre>\n
Strikingly simple start<\/h3>\n
new Vue({\r\n el: '#app',\r\n data: {\r\n message: 'Hello Vue.js'\r\n }\r\n});<\/pre>\n<div id=\"app\">\r\n<p>{{message}}<\/p>\r\n<\/div><\/pre>\nmessage<\/code> is immediately dynamically bound! No extra time defining state classes, interfaces, or magical pony meta-objects. Just some JSON and some HTML and some JS glue in the middle.<\/p>\n<div id=\"app\">\r\n<p>{{message}}<\/p>\r\n<input v-model=\"message\">\r\n<\/div><\/pre>\nv-model<\/code> attribute dynamically binds the input (or textarea) field you\u2019ve chosen to the data in your application, giving you direct access to manipulate the state of your application\u2019s data-based state machine. Handy. To say the least.<\/p>\nMake Messages<\/h2>\n
\n
Message logging model<\/h3>\n
new Vue({\r\n el: '#app',\r\n data: {\r\n message: 'Hello Vue.js!',\r\n log: [{\r\n value: 'Codeship is awesome!!1!',\r\n created: '2017-01-09'\r\n }]\r\n }\r\n});<\/pre>\nlog<\/code> (just an Array) which contains the message log. I\u2019ve prepopulated it with a particularly useful message.<\/p>\n<div id=\"app\">\r\n<input v-model=\"message\">\r\n<button v-on:click=\"save()\">save<\/button>\r\n<ul>\r\n<li v-for=\"(msg, idx) in log\">\r\n{{msg.value}} - <em>{{msg.created}}<\/em>\r\n<button v-on:click=\"log.splice(idx, 1)\">X<\/button>\r\n<\/li>\r\n<\/ul>\r\n<\/div><\/pre>\nmessage<\/code>, but left the input field and v-model<\/code> binding. I\u2019ve also added a Save button and the list of messages. The list of messages is created by looping through the log<\/code> array using the v-for<\/code> property, with the object in the array set to msg<\/code> and the index of the object within the list set to idx<\/code>.<\/p>\new Vue({\r\n el: '#app',\r\n data: {\r\n message: 'Hello Vue.js!',\r\n log: [{\r\n value: 'Hi there, Codeship!',\r\n created: '2017-01-09'\r\n }]\r\n },\r\n methods: {\r\n save: function() {\r\n this.log.unshift({\r\n value: this.message,\r\n created: (new Date).toISOString()\r\n });\r\n }\r\n }\r\n});<\/pre>\nsave()<\/code> method. Let\u2019s see if we can put that in a tinier place, so we don\u2019t have to read the save code to understand (or reuse) this app\u2019s date format.<\/p>\nDatum date datum<\/h3>\n
created<\/code> computed property:<\/p>\nnew Vue({\r\n el: '#app',\r\n data: {\r\n message: 'Hello Vue.js!',\r\n log: [{\r\n value: 'Hi there, Codeship!,\r\n created: '2017-01-09'\r\n }]\r\n },\r\n computed: {\r\n created: function() {\r\n return (new Date).toISOString();\r\n }\r\n },\r\n methods: {\r\n save: function() {\r\n this.log.unshift({\r\n value: this.message,\r\n created: this.created\r\n });\r\n }\r\n }\r\n});<\/pre>\ncomputed<\/code> object which contains a single created<\/code> property that returns the current date in the One True Date format, also known as ISO 8601. So far. So obvious.<\/p>\nsave()<\/code> method. See that? We\u2019re accessing the new computed created<\/code> value off of this<\/code>, and (you guessed it!) it\u2019s returning the current date in ISO 8601.<\/p>\nthis<\/code> object in Vue is set to the current \u201cVue Model\u201d (often abbreviated as VM). This object allows direct get-ing and set-ing of the VM\u2019s data as well as access to its methods (e.g.<\/em>, this.save()<\/code> works).<\/p>\nDesktop notificator<\/h3>\n
notify<\/code> method on the component.<\/p>\ntemplate<\/code> is inline this time, for legibility here and for keeping this component completely contained in a single file \u2014 and since it\u2019s just so plain simple.<\/p>\nVue.component('desktop-notificator', {\r\n props: ['message', 'title'],\r\n template: '<button v-on:click=\"notify()\">??<\/button>',\r\n methods: {\r\n notify: function() {\r\n if (Notification.permission !== \"granted\") {\r\n Notification.requestPermission();\r\n } else {\r\n new Notification(this.title, {\r\n body: this.message,\r\n });\r\n }\r\n }\r\n }\r\n});<\/pre>\nnew Vue<\/code> bit. Or, if you want, you can toss it in its own file and load it via a script tag (below the Vue.js script tag of course).<\/p>\n<desktop-notificator v-bind:message=\"msg.value\" v-bind:title=\"msg.created\"><\/desktop-notificator><\/pre>\n
v-bind:<\/code> prefixed attributes map the internal data model (message<\/code> and title<\/code>) to the parent application (or components) values: msg.value<\/code> and msg.created<\/code> (in the case of this app).<\/p>\n<div id=\"app\">\r\n<input v-model=\"message\">\r\n<button v-on:click=\"save()\">save<\/button>\r\n<ul>\r\n<li v-for=\"(msg, idx) in log\">\r\n<desktop-notificator v-bind:message=\"msg.value\"\r\nv-bind:title=\"msg.created\"><\/desktop-notificator>\r\n{{msg.value}} - <em>{{msg.created}}<\/em>\r\n<button v-on:click=\"log.splice(idx, 1)\">X<\/button>\r\n<\/li>\r\n<\/ul>\r\n<\/div><\/pre>\nSimplification<\/h3>\n
Idiosyncratic awesome<\/h3>\n
<div id=\"app\">\r\n<input v-model=\"message\">\r\n<button @click=\"save()\">save<\/button>\r\n<ul>\r\n<li v-for=\"(msg, idx) in log\">\r\n<desktop-notificator :message=\"msg.value\" :title=\"msg.created\"><\/desktop-notificator>\r\n{{msg.value}} - <em>{{msg.created}}<\/em>\r\n<button @click=\"log.splice(idx, 1)\">X<button>\r\n<\/li>\r\n<\/ul>\r\n<\/div>\r\n\r\nSome of the v-*<\/code> attributes remain, but we\u2019ve replaced the v-on<\/code> and v-bind<\/code> attributes with a short hand notation: v-on:<\/code> is replaced by @<\/code> and v-bind:<\/code> is replaced by :<\/code>.\r\n\r\nWeird looking, right? However, as you spend more time with Vue, you\u2019ll find this notation actually makes the template code more legible. There are also handy syntax highlighters likely available for your preferred editor which make these short-hand attributes stand out a bit more.<\/pre>\nEven great idioms<\/h3>\n
.vue<\/code> files which contain all<\/em> the JS, CSS, and HTML you need for a single component. It\u2019s obviously super handy for components like the one built above. Here\u2019s what desktop-notificator.vue<\/code> would look like:<\/p>\n<template>\r\n <button @click=\"notify()\">??<\/button>\r\n<\/template>\r\n\r\n<script>\r\nexport default {\r\n props: ['message', 'title'],\r\n methods: {\r\n notify () {\r\n if (Notification.permission !== \"granted\") {\r\n Notification.requestPermission();\r\n } else {\r\n new Notification(this.title, {\r\n body: this.message,\r\n });\r\n }\r\n }\r\n};\r\n<\/script><\/pre>\nVue Thinks Like Me<\/h2>\n
Don\u2019t Use Vue \u2014 unless<\/h2>\n