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 === {}