Breaking Changes"If you keep calm you'll never be a super saiyan." - Goku
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>.
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.
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.
Example:
Vue.elementDirective('my-stuff', {
update: function () { /* ... */ }
})
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.
prop="{{* parentProp}}"prop="{{< parentProp}}"warning: changed in 0.12.1prop="{{> parentProp}}"warning: changed in 0.12.1prop="{{a}} b"prop="{{a | reverse}}"prop="{{a + b}}"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:
beforeEnterenterafterEnterenterCancelledbeforeLeaveleaveafterLeaveleaveCancelledYou 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.
}
}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:
class attributes, the class names are merged.Support expressions in content selectors. (resolved only once) e.g.
<content select="p:nth-child({{$index + 1}})"></content>`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`
})options param for v-model now also respects disabled: true in the options array. (via #861 by @holic)
Both v-class and v-attr now support binding to an Object value. (v-attr object support via #902 by @OEvgeny)
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.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.v-repeat should only sync $value back to original array for non-object arrays.$data is replaced.v-repeat switching between Object/Array values$add should work when an object is used as a vm's $data and observed elsewhere at the same time.v-model write filter warning checknode.contains check in IE<template> tags in SVGfilterBy false doesn't work as intendedYou can’t perform that action at this time.
RetroSearch is an open source project built by @garambo | Open a GitHub Issue
Search and Browse the WWW like it's 1997 | Search results from DuckDuckGo
HTML:
3.2
| Encoding:
UTF-8
| Version:
0.7.4