Sharing Top Content from the Angular-sphere.

Build an App with Vue.js: A Lightweight Alternative to AngularJS ― Scotch

  • // app.js – – new Vue({ – – // We want to target the div with an id of ‘events’ – el: ‘#events’, – – // Here we can register any values or collections that hold data – // for the application – data: {}, – – // Anything within…
  • — index.html — – – … – – div class=”panel-heading” – h3Add an Event/h3 – /div – div class=”panel-body” – – div class=”form-group” – input class=”form-control” placeholder=”Event Name” v-model=”event.name” – /div – – div class=”form-group” – textarea class=”form-control” placeholder=”Event Description” /div – – div class=”form-group” – input type=”date” class=”form-control” placeholder=”Date”…
  • // app.js – – … – – data: { – event: { name: ”, description: ”, date: ” }, – events: [] – }, – – // Anything within the ready function will run when the application loads – ready: function() { – // When the application loads, we want…
  • $set(‘events’, events); – }, – – // Adds an event to the existing events array – addEvent: function() { – if(this.event.name) { – this.events.push(this.event); – this.event = { name: ”, description: ”, date: ” }; – } – } – } – … – – – On the data key,…
  • — index.html — – – … – – div class=”list-group” – – a href=”#” class=”list-group-item” v-repeat=”event in events” – h4 i class=”glyphicon glyphicon-bullhorn”/i – {{ event.name }} – /h4 – – h5 – i class=”glyphicon glyphicon-calendar” v-if=”event.date”/i – {{ event.date }} – /h5 – – p class=”list-group-item-text” v-if=”event.description”{{ event.description }}/p…

Front-end frameworks like AngularJS allow us to build out very nice single page applications easily, especially when we become well versed with all the concepts.

Front-end frameworks like AngularJS allow us to build out very nice single page applications easily, especially when we become well versed with all the concepts.

However, for many projects, frameworks like Angular can actually be a little bit more than what we need.

If all we want to do is implement a few features a single page application, it’s can be a bit much to setup the necessary config, routing, controllers, services and more that make up an Angular app.

For something more lightweight, a great solution is Vue.js. Vue is a library that focuses heavily on the ViewModel—the two-way data bindings that tie what we see and interact with on the screen with the application’s data model. In this way (and as stated on the Vue.js website), the library is “not a full-blown framework – it is designed to be a view layer that is simple and flexible”.

For many use cases this is awesome because it means we can get the benefits of a single page(ish) application without the overhead that can come with using larger frameworks.

In this tutorial we will be building a simple events bulletin board application that will allow users to add and remove events. To explore Vue’s main features we will simply be working with local data on the client side, but towards the end we’ll see how we can use the vue-resource package to send HTTP…

Build an App with Vue.js: A Lightweight Alternative to AngularJS ― Scotch