This article was peer reviewed by Chris Perry and Thomas Greco. Thanks to all of SitePoint’s peer reviewers for making SitePoint content the best it can be!
Vue.js 1.0 was released at the end of October and packs some awesome new features. While most of the library looks and feels the same as it always has, there are a few changes that are worth noting. In this article, we’ll explore some of the changes and how you can use them to be more productive and expressive when creating apps with Vue.js.
If you’re not sure what Vue.js is, you might want to read this first: Getting Started With Vue.js
Vue.js 1.0 Design Goals
[author_more]
If you’ve tried Vue.js before, your experience might be that it’s similar to other frameworks, but is a lighter-weight alternative that’s easier to use. This is true in many ways, and Vue is certainly loved for its ability to serve solely as the view layer for applications. Using it as the view layer, you can implement Single Page App features with very little overhead. However, the Vue.js ecosystem goes way beyond the view layer and makes it possible to craft large-scale SPAs easily.
With the release of version 1.0, Vue.js aims to provide developers a pleasant experience writing large applications and to ensure that the patterns it uses promotes maintainability. Tooling has improved, syntax has been polished, and with the advancements in this release, Vue.js wants to show that it can contend with heavyweight JavaScript frameworks, even if it isn’t backed by a large enterprise.
What Is Different for Developers?
Directive Syntax and v-for
If you’ve rendered a list with Vue.js, you’ve seen the v-repeat directive that is used to iterate over an array and display its data on the screen. With Vue.js 1.0, this has changed to v-for. While the API is mostly the same, we can no longer simply point the directive to an array and template out the data based on property names. Instead, we now have to use an alias for the array’s current element.
<!-- Before -->
<p v-repeat="people">{{firstname}}</p>
<!-- Afer -->
<p v-for="person in people">{{person.firstname}}</p>
The real difference here shows up under the hood. The v-for directive is a ton faster, and will really make a difference when rendering large collections.
With Vue.js 1.0, you’ll notice a few differences with syntax. Namely, shorthands have been introduced which help to make HTML templates a bit more concise. We can now handle events with the @ shorthand.
<!-- Before -->
<div v-on:mouseover="changeColor()"></div>
<!-- After -->
<div @mouseover="changeColor()"></div>
This syntax works for all events.
We can also use the : shorthand in place of v-bind.
<!-- Before -->
<select v-model="firstname">
<option v-bind:value="{ name: Ryan }">Ryan</option>>
</select>
<!-- After -->
<select v-model="firstname">
<option :value="{ name: Ryan }">Ryan</option>>
</select>
Again, not a huge change, but anything at all that helps to declutter markup is a win!
Tooling
Vue.js 1.0 syncs up some great tools that provide an awesome development experience. When using build tools like Webpack or Browserify for Vue.js apps, the development experience will be much smoother thanks to some upgrades. Two of these upgrades that are worth mentioning are hot module replacement and no-hassle ES6.
The vue-loader component loader for Webpack and vueify transform for Browserify let us write special components with a .vue extension. With these components, we can keep <template>, <script>, and <style> all within the same file, which is great for maintainability. Vue.js 1.0 improvements make working with these even easier.
Hot Module Replacement
Hot module replacement means that when we make changes to our .vue components, the parts of the build that are affected are swapped out and replaced with the changes immediately. The beauty of this is that we don’t need to reload the page, which is helpful when we want to keep the app at its current state but still be able to see the changes. It is effectively a replacement for live-reload.
ES6
ES6 support for .vue components used to require additional setup, but it now comes without any hassle. Those who haven’t become acquainted with ES6 might not consider this to be an important feature; however, if you are writing ES6, you’ll find it to be a big help to have it ready to go.
Continue reading %What’s New in Vue.js 1.0%
Source: SitePoint