Vue.js: 0.11.1 Release

Component compilation scope change

When a component is used in a parent template, e.g.:

<div v-component="child" v-show="active" v-on="click:onClick">
  <p>{{message}}</p>
</div>

The directives (v-show and v-on) and the transclusion content ({{message}}) will now be compiled in the parent's scope. That means the value of active, onClick and message will be resolved against the parent. Any directives/interpolations inside the child's template will be compiled in the child's scope. This ensures a cleaner separation between parent and child components.

Advanced transition control parameters for v-component

• wait-for

An event name to wait for on the incoming child component before switching it with the current component. This allows you to wait for asynchronous data to be loaded before triggering the transition to avoid unwanted flash of emptiness in between.

Example:

  <div v-component="{{view}}" wait-for="data-loaded"></div>

  // component definition
  {
    compiled: function () {
      var self = this
      $.ajax({
        // ...
        success: function (data) {
          self.$data = data
          self.emit('data-loaded')
        }
      })
    }
  }

• transition-mode

By default, the transitions for incoming and outgoing components happen simultaneously. This param allows you to configure two other modes: - in-out: New component transitions in first, current component transitions out after incoming transition has finished. - out-in: Current component transitions out first, new componnent transitions in after outgoing transition has finished.

Example

  <div v-component="{{view}}"
    v-transition="fade"
    transition-mode="out-in">
  </div>

Exposed additional internals:

Only intended for advanced users who wish to dynamically extend Vue and are familiar with the source code. - Key code aliases for the key filter: Now accessible as Vue.filter('key').keyCodes - Input type handlers for v-model: Now accessible as Vue.directive('model').handlers - Parsers and Compiler: Now accessible as Vue.parsers & Vue.compiler.

Other new features

• v-style now accept an object of CSS property/value pairs. (suggested in #578, and thanks to @skovhus for the pull request!)
• New custom directive option: deep.

When this option is set to true and the directive is bound to an object, it will collect all nested properties of that object as dependencies, so that any nested property change will also trigger the directive's upadte function. - When using data option in multiple extension/mixins, the returned values will now be recursively merged. (#594)

Example:

  var A = Vue.extend({
    data: function () {
      return {
        a: 1
      }
    }
  })
  var B = A.extend({
    data: function () {
      return {
        b: 2
      }
    }
  })
  var b = new B()
  b.$log() // -> { a: 1, b: 2 }

• The json filter is now bi-directional and can be used on a <textarea> with v-model for two-way binding.
• trackby for v-repeat is now track-by, for more consistent naming. The trackby usage is still preserved for backwards compatibility.

Bug fixes

Fixed #557, #558, #561, #569, #580, #589, #592.