Release 0.12.0: Dragon Ball · vuejs/vue

"If you keep calm you'll never be a super saiyan." - Goku

Breaking Changes

paramAttributes option has been renamed to props.
v-with has been deprecated. Now props are the only way to pass data to a child component.
v-component has been deprecated. Now all components should use the custom tag syntax. For dynamic components, a new syntax is introduced: <component is="{{view}}"></component>.
- Note: v-component will still be available for table elements, due to <table>'s content restrictions.
v-partial and {{> partial}} have been deprecated.
v-events have been deprecated. It is now recommended to pass down methods as prop callbacks.
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.
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.
vm.$watch() now accepts an options object for deep and immediate flags instead of fixed arguments.
Transition cancel hook: you should now use enterCancelled and leaveCancelled hooks to handle a cancelled transition. Functions returned in enter and leave hooks are no longer respected.

New Features

Async components

docs

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.
Element Directives

docs

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

updated docs
- props now support explicit binding types:
  - One time: prop="{{* parentProp}}"
  - ~~Oneway down: prop="{{< parentProp}}"~~ warning: changed in 0.12.1
  - ~~Oneway up: prop="{{> parentProp}}"~~ warning: changed in 0.12.1
- 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

updated docs

v-transition now adds a .v-transition class to the element 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.

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
- enterCancelled
- beforeLeave
- leave
- afterLeave
- leaveCancelled
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.
    }
  }
```
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.
- Support expressions in content selectors. (resolved only once) e.g.
```
<content select="p:nth-child({{$index + 1}})"></content>`
```
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-repeat now uses track-by="$index" by default when iterating over an Array of primitive values (Strings and Numbers).
- 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`
  })
```
v-model

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

Both v-class and v-attr now support binding to an Object value. (v-attr object support via #902 by @OEvgeny)
General
- Many new warnings in development build.
- 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.
- vm.$watch() can now also accept a computed function instead of an expression.
- 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%.
- Warnings in debug mode now prints the error stack instead of invoking the debugger statement.

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.
#887 v-model write filter warning check
#892 typo in compiler settable path regex
#893 node.contains check in IE
#922 rendering <template> tags in SVG
#928 filterBy false doesn't work as intended
#929 block repeat rearrange error

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

0.12.0: Dragon Ball

Breaking Changes

New Features

Async components

Element Directives

Improvements

Props

Transition System

Component Transclusion

v-repeat

v-model

v-class & v-attr

General

Fixed