Vue.js 0.10 is here!

Mar 22, 2014

Vue.js 0.10.0 (Blade Runner) has been released! This release comes with many useful additions based on the suggestions from the users, notably interpolation in literal directives, dynamic components with the new v-view directive, array filters, and the option to configure interpolation delimiters. Internally, the codebase has received many refactoring and improvements which makes Vue.js even faster.

See the Installation page for the latest builds.

New

Literal directives can now contain interpolation tags. These tags will be evaluated only once at compile time. An example usage is conditionally decide which component to instantiate with v-component="{{type}}" . Doc.

. Doc. Attributes listed in the paramAttributes option now accept mustache interpolations too. They will also only be evaluated once.

option now accept mustache interpolations too. They will also only be evaluated once. v-repeat now accepts an argument which will be used as the identifier for the wrapped object. This allows more explicit property access in repeaters. Doc.

now accepts an argument which will be used as the identifier for the wrapped object. This allows more explicit property access in repeaters. Doc. Added v-view directive which binds to a string value and dynamically instantiate different components using that string as the component ID. Doc.

directive which binds to a string value and dynamically instantiate different components using that string as the component ID. Doc. Added filterBy and orderBy filters for v-repeat . Doc.

and filters for . Doc. Custom filters that access properties on its this context will be considered computed filters . Doc.

context will be considered . Doc. You can now access the event in v-on handler expressions as $event . Example: <a v-on="click:handle('hello', $event)">Hello</a>

handler expressions as . Example: Interpolation delimiters can now be customized via the delimiters global config option. Example: Vue.config({ delimiters: ["[", "]"] }) will change the matched interpolation tags to [[ ]] for text bindings and [[[ ]]] for html bindings.

Changed

{{>yield}} syntax has been deprecated. A Web Components spec compatible content insertion mechanism using <content> elements has been introduced. Doc.

syntax has been deprecated. A Web Components spec compatible content insertion mechanism using elements has been introduced. Doc. To use a component as a custom element, the component ID must now contain a hyphen ( - ). This is consistent with the current custom element spec draft.

). This is consistent with the current custom element spec draft. v-repeat Arrays’ augmented methods have been renamed from set to $set(index, value) and remove to $remove(index | value) . The prefix better differentiates them from native methods. The replace method has been removed.

Arrays’ augmented methods have been renamed from to and to . The prefix better differentiates them from native methods. The method has been removed. When iterating over an Object with v-repeat , the object no longer gets a $repeater array. Instead, the object is now augmented with two methods: $add(key, value) and $delete(key) , which will trigger corresponding view updates.

, the object no longer gets a array. Instead, the object is now augmented with two methods: and , which will trigger corresponding view updates. v-if now creates and destroys a child ViewModel instance when the binding value changes, instead of simply removing/inserting the DOM node. In addition, it can no longer be used with v-repeat . Use v-show or the new built-in array filters instead.

now creates and destroys a child ViewModel instance when the binding value changes, instead of simply removing/inserting the DOM node. In addition, it can no longer be used with . Use or the new built-in array filters instead. v-with can no longer be used alone. It now must be used with either v-component or v-view . v-component can also be used as an empty directive just to create a child VM using the default Vue constructor.

can no longer be used alone. It now must be used with either or . can also be used as an empty directive just to create a child VM using the default constructor. Production build now strips all warnings and debug logs. To leverage debug: true , use the development version. The development version now has more detailed warning messages.

Fixed

event.stopPropagation() and event.preventDefault() inside v-on handlers now work as expected.

and inside handlers now work as expected. parent option now works properly when used in Vue.extend

option now works properly when used in Mustache bindings inside <textarea> are now properly interpolated before being set as value.

Internal