0.12.0-rc2

New in 0.12.0-rc2

• Support staggering transitions for v-repeat. demo

  Simply add a stagger attribute:

    <div v-repeat="list" v-transition="fade" stagger="100">

  Enter and leave stagger can be defined separately as enter-stagger and leave-stagger. The stagger can also be dynamically calculated via a javascript hook:

    Vue.transition('fade', {
      stagger: function (index) {
        // increase delay by 50ms for each transitioned item,
        // but limit max delay to 300ms
        return Math.min(300, index * 50)
      }
      // or you can use `enterStagger` and `leaveStagger`
    })

• Support expressions in content selectors. (resolved only once) e.g.

  <content select="p:nth-child({{$index + 1}})"></content>`

• v-class can now accept an object value. The keys will be used as class names and toggled based on the truthy-ness of the value.

• Warnings in debug mode now prints the error stack instead of invoking the debugger statement.

Potentially breaking changes

• When v-ref is used together with v-repeat, and the value being repeated on is an Object, the corresponding ref will also be an Object, with its keys pointing to the associated child instances.
• Transition cancel hook: you can now use enterCancelled and leaveCancelled hooks to handle a cancelled transition. Functions returned in enter and leave hooks are no longer respected.

Fixed

#887, #892, #893

0.12.0-rc

New in 0.12.0-rc

Improvements

• v-repeat now supports using track-by="$index" when there's no key to track. This causes Vue to reuse the DOM elements and child instances in place without re-ordering them, so prefer using it on simple repeats without interactivity.
• Literal props are now supported when manually mounting a root instance.
• Paths containing dynamic segments, e.g. a[b] will now create the path if not already present, however, it will throw a warning and prompt you to pre-initialize the path if possible.

Fixed

• props are now properly persisted when an instance's $data is replaced.

Aggregated change log based on the diffs between 0.12.0-rc and 0.11.10

Breaking Changes

• paramAttributes option has been renamed to props.

• v-with has been removed. Now props are the only way to pass data to a child component.

• v-component has been removed. Now all components should use the custom tag syntax. For dynamic components, a new syntax is introduced: <component is="{{view}}"></component>.

• v-partial and {{> partial}} have been removed.

• Filter argument syntax has been reworked. Now non-quoted arguments are treated as dynamic paths (and the argument will be auto-retrieved from the vm when the filter function is called); only arguments enclosed in quotes are passed in as plain strings.

  Example:

  {{ msg | filter argA 'argB' }}

  In the filter function, the first argument will be the value of vm.argA, and the second argument will be a plain string "argB".

  For the reasoning behind it, see this comment.

New Features

• Async components. Example:

  components: {
    async: function (resolve) {
      setTimeout(function () {
        resolve({
          template: '<div>I am async!</div>'
        })
      }, 1000)
    }
  }

  This feature allows you to asynchronously resolve a component. The goal is to enable easy "lazy loading" for large apps with multiple pages/sections. Here we are using setTimeout simply for demo purposes - you will need to provide your own mechanism for fetching a component definition from the server. One example would be paring this feature with Webpack's code-splitting functionality.

• elementDirectives. Example:

  Vue.elementDirective('my-stuff', {
    update: function () { /* ... */ }
  })

  <my-stuff></my-stuff>

  This is similar to Angular's "E" mode directive. Basically, instead of treating the custom element as a component, treat it as a directive instead. Note element directives are "terminal", which means once Vue encounters an element directive, it will basically skip that element, and the directive is responsible for handling everything on and inside that element. This mechanism opens up more flexibility in handling custom elements, without necessarily incurring the overhead of a component instance.

Improvements

• props

  • props now support explicit one-way binding with the syntax of prop="{{* oneway}}"
  • props can now contain multiple mustache tags, e.g. prop="{{a}} b"
  • props can now contain filters, e.g. prop="{{a | reverse}}"
  • props can now contain expressions, e.g. prop="{{a + b}}"
  • When a prop's parent expression is not "settable", the prop binding will be automatically one-way.
  • All props are created and observed by default when a component is instantiated.
  • Literal props are now supported when manually mounting a root instance.

• Transition system refactor: CSS transitions and JavaScript transition hooks can now work together! The list of available JavaScript hooks have also been expanded. Here is a list of all available hooks:

  • beforeEnter
  • enter
  • afterEnter
  • beforeLeave
  • leave
  • afterLeave

  You can use these hooks to do additional work while having the CSS part handled for you automatically. The refactor maintains backwards compatibility so your old transitions should still work. One important thing to note though: the done callback in enter and leave hooks is now optional, similar to how it is optional in a Mocha test. Vue will look at the number of arguments of the function to determine whether the hook expects to control when the transition should end. For example:

    {
      enter: function (el) {
         // No `done` argument, so the end of the transition
         // will depend on the CSS `transitionend` or
         // `animationend` event.
      }
    }

  vs.

    {
      enter: function (el, done) {
        // the `done` callback here indicates that you want
        // to explicitly control when the transition should end.
        // the transition will only end when you call this callback.
      }
    }

• v-repeat

  • When v-repeat is used to iterate over an object, the instances are cached using the property key by default. This should avoid the entire list being re-rendered when the object is mutated.
  • v-repeat now supports using track-by="$index" when there's no key to track. This causes Vue to reuse the DOM elements and child instances in place without re-ordering them, so prefer using it on simple repeats without interactivity.

• v-model

  • options param for v-model now also respects disabled: true in the options array. (via #861 by @holic)

• Component Transclusion

  • When a component with replace:true is compiled, attributes on its placeholder node are now properly merged with the attributes on the component's template root node. Details:
    • If both nodes have class attributes, the class names are merged.
    • If both nodes have the same directive attribute, they will be compiled respectively in their own scope. (placeholder directives in parent scope and template root directives in child scope)
    • If both nodes have the same plain attribute, the template root node will take priority.

• General

  • New instance method: vm.$nextTick. This is the same as Vue.nextTick, except that it can be called inside instance methods as this.$nextTick, and the callback's this context will be auto-bound to the current instance. This avoids having to require the global Vue inside a component module just to use Vue.nextTick.
  • Errors in simple path getters are now suppressed by default. e.g. a.b.c when a === {}
  • Paths containing dynamic segments, e.g. a[b] will now create the path if not already present, however, it will throw a warning and prompt you to pre-initialize the path if possible.
  • Internally Vue now uses empty text nodes instead of comment nodes as DOM-manipulation anchors. This results in much cleaner HTML output. When in debug mode, comment nodes will still be used to help better analyze the structure of the rendered DOM.
  • Optimized instance initialization, which increases first-render performance by roughly 30%.

Fixed

• #853 v-repeat should only sync $value back to original array for non-object arrays.
• vuejs/Discussion#173 props are now properly persisted when an instance's $data is replaced.
• #869 v-repeat switching between Object/Array values
• #873 $add should work when an object is used as a vm's $data and observed elsewhere at the same time.

Staged for 0.12 but not currently in 0.12.0-rc

• v-class can now accept an object value. The keys will be used as class names and toggled based on the truthy-ness of the value.
• When v-ref is used together with v-repeat, and the value being repeated on is an Object, the corresponding ref will also be an Object, with its keys pointing to the associated child instances.

0.12.0-beta5

Improvements

• Transition system refactor: CSS transitions and JavaScript transition hooks can now work together! The list of available JavaScript hooks have also been expanded. Here is a list of all available hooks:

  • beforeEnter
  • enter
  • afterEnter
  • beforeLeave
  • leave
  • afterLeave

  You can use these hooks to do additional work while having the CSS part handled for you automatically. The refactor maintains backwards compatibility so your old transitions should still work. One important thing to note though: the done callback in enter and leave hooks is now optional, similar to how it is optional in a Mocha test. Vue will look at the number of arguments of the function to determine whether the hook expects to control when the transition should end. For example:

    {
      enter: function (el) {
         // No `done` argument, so the end of the transition
         // will depend on the CSS `transitionend` or
         // `animationend` event.
      }
    }

  vs.

    {
      enter: function (el, done) {
        // the `done` callback here indicates that you want
        // to explicitly control when the transition should end.
        // the transition will only end when you call this callback.
      }
    }

• New instance method: vm.$nextTick. This is the same as Vue.nextTick, except that it can be called inside instance methods as this.$nextTick, and the callback's this context will be auto-bound to the current instance. This avoids having to require the global Vue inside a component module just to use Vue.nextTick.

• Optimized instance initialization, which increases first-render performance by roughly 30%.

Fixed

• #869
• #873

0.12.0-beta4

Breaking Change from 0.12.0-beta3

• Filter argument syntax has been reworked. Now non-quoted arguments are treated as dynamic paths (and the argument will be auto-retrieved from the vm when the filter function is called); only arguments enclosed in quotes are passed in as plain strings.

  Example:

  {{ msg | filter argA 'argB' }}

  In the filter function, the first argument will be the value of vm.argA, and the second argument will be a plain string "argB".

  For the reasoning behind it, see this comment.

Improvements

• options param for v-model now also respects disabled: true in the options array. (via #861 by @holic)
• v-transition now adds a .v-transition class at all times; in the case of v-transition="fade", the added class will be .fade-transition. This removes the need to manually add an additional class just to give the element transition property.
• Internally Vue now uses empty text nodes instead of comment nodes as DOM-manipulation anchors. This results in much cleaner HTML output. When in debug mode, comment nodes will still be used to help better analyze the structure of the rendered DOM.

0.12.0-beta3

Change from 0.12.0-beta2

• Based on community feedback, the syntax for dynamic component has changed to:

  <component is="{{view}}"></component>

Improvements

• When v-repeat is used to iterate over an object, the instances are cached using the property key by default. This should avoid the entire list being re-rendered when the object is mutated.

Fixed

#853 v-repeat should only sync $value back to original array for non-object arrays.

0.12.0-beta2

Keep in mind things are still subject to change!

Changed

• paramAttributes option has been renamed to props.
• v-with has been removed. Now props are the only way to pass data to a child component.
• v-component has been removed. Now all components should use the custom tag syntax. For dynamic components, a new syntax is introduced: <component type="{{view}}"></component>.
• v-partial and {{> partial}} have been removed.

The goal is to remove some cruft in the API and make things more consistent across the board.

New Features

• Async components. Example:

  components: {
    async: function (resolve) {
      setTimeout(function () {
        resolve({
          template: '<div>I am async!</div>'
        })
      }, 1000)
    }
  }

  This feature allows you to asynchronously resolve a component. The goal is to enable easy "lazy loading" for large apps with multiple pages/sections. Here we are using setTimeout simply for demo purposes - you will need to provide your own mechanism for fetching a component definition from the server. One example would be paring this feature with Webpack's code-splitting functionality.

• elementDirectives. Example:

  Vue.elementDirective('my-stuff', {
    update: function () { /* ... */ }
  })

  <my-stuff></my-stuff>

  This is similar to Angular's "E" mode directive. Basically, instead of treating the custom element as a component, treat it as a directive instead. Note element directives are "terminal", which means once Vue encounters an element directive, it will basically skip that element, and the directive is responsible for handling everything on and inside that element. This mechanism opens up more flexibility in handling custom elements, without necessarily incurring the overhead of a component instance.

Improvements

• props now support explicit one-way binding with the syntax of prop="{{* oneway}}"
• props can now contain multiple mustache tags, e.g. prop="{{a}} b"
• props can now contain filters, e.g. prop="{{a | reverse}}"
• props can now contain expressions, e.g. prop="{{a + b}}"
• When a prop's parent expression is not "settable", the prop binding will be automatically one-way.
• All props are created and observed by default when a component is instantiated.
• When a component with replace:true is compiled, attributes on its placeholder node are now properly merged with the attributes on the component's template root node. Details:
  • If both nodes have class attributes, the class names are merged.
  • If both nodes have the same directive attribute, they will be compiled respectively in their own scope. (placeholder directives in parent scope and template root directives in child scope)
  • If both nodes have the same plain attribute, the template root node will take priority.
• Errors in simple path getters are now suppressed by default. e.g. a.b.c when a === {}

0.11.10

Minor patch release: fix a regression where custom element components not working with v-repeat (#822)

0.11.9

New

• Observed objects now also have the $set method. obj.$set(key, val) is the same as obj[key] = val, except that it calls $add first if the property doesn't exist.
• v-events now also accept a single expression statement.
• v-transition now supports dynamic syntax, e.g. v-transition="{{transitionToUse}}"
• Partials now support filters. e.g. {{> myPartial | transform}}. The filter function will get the partial string as the first argument.
• Inline expressions now support more globals in addition to Math and Date, including:
  • isNaN
  • isFinite
  • parseInt
  • parseFloat
  • decodeURI & decodeURIComponent
  • encodeURI & encodeURIComponent

Internals

The component transclusion logic has received some major refactoring, improving the overall correctness and code quality. Transcluded content from the parent are now bound to the correct context and remain reactive through compilation/teardowns in v-if and partials. The refactor should also result in better performance for the case where v-repeat and v-component are used together.

Fixed

• #801 detached hook not firing for transcluded components inside v-if
• #802 vm.$set not triggering updates in repeated child instances
• #804 transcluded content inside v-if are not persistent
• #806 watcher accidentally clearing watcherList on teardown
• #776 & #813 v-with setter error when bound to literal value
• #818 skip css transitions if page is not visible

0.11.8

Revert v-repeat inplace update strategy due to issues in some production use cases and non-substantial perf gain.

0.11.7

Patch release to fix an issue in 0.11.6 where v-repeat can get stuck in an infinite loop when moving around block instances (#799)