0.12.9

New

• Support naming assets using camelCase and using them with dash case (similar to props). For example:

  // in component options:
  components: {
    // register using camelCase
    myComponent: { /*... */ }
  }

  <!-- use dash case in templates -->
  <my-component></my-component>

  This works nicely with ES6:

  import compA from './components/a'
  import compB from './components/b'
  
  export default {
    // ES6 object literal shorthand
    components: {
      compA,
      compB
    }
  }

Changed

• In 0.12.8 v-attr introduced a new behavior of setting the corresponding property on the element. As it turns out, the only property that needs this behavior is value on input elements. In 0.12.9 this behavior now only applies to value attribute bindings.

Fixed

• Fixed error when running inside jsdom.
• #1079 boolean prop default value not respected
• #1080 strict mode inline repeat instances not inheriting parent scope assets
• #1083 interpolations not working in some directive params such as track-by
• #1084 not rendering correctly when a component is right inside another one
• #1093 container/template classes are not merged for SVG components
• #1095 Safari content not cloned when inside
• #1097 transcluded v-if components assigned wrong $parent
• #1104 & #1105 v-attr unnecesasrily setting properties
• #1107 empty string props casted to 0
• #1108 v-model + v-repeat of primitive value arrays not syncing booleans and null

0.12.8

New

• Strict mode: When Vue.config.strict is set to true, asset lookup will be limited to the current component only. This means a component will only inherit assets from the inheritance chain (via Vue.extend), but not from their parents in the view hierarchy. When strict mode is enabled, assets should be either registered globally, or explicitly depended on by the component that needs them. When enforced, it could result in better encapsulated components in larger projects.

Improvements

• Source code refactored for better minification when using module bundlers. See instructions.

• Computed properties now have their values automatically cached, and is re-evaluated lazily only when needed. This avoids expensive computations being re-run multiple times when a dependency changes.

• v-attr now also sets the corresponding property on the element if the property exists. For example, <input value="{{val}}"> will not only update the attribute, but also set the value property. If the element doesn't have a corresponding property for the bound attribute, it will not be set.

• v-repeat now supports item in array syntax:

  <div v-repeat="item in array"></div>

• props declarations can now specify twoWay: true, which will throw a warning if the prop's binding type doesn't match.

• When providing default value for a prop, you can now provide a function that returns Object/Array values to avoid having the same reference shared across multiple vms. (#1032)

• You can now prefix any prop attribute with data- and it will just work. For example, a prop named myProp can be supplied in the template as data-my-prop. (#1034)

• Alternative asset option syntax: you can now use an Array to provide assets, but every asset must provide an id property in order to be registered. e.g.

  var myDirective = {
    id: 'some-dir',
    update: function () { /* ... */ }
  }
  
  new Vue({
    // ...
    directives: [myDirective]
  })
  // the above is equivalent to:
  new Vue({
    directives: {
      'some-dir': myDirective
    }
  })

Fixed

• Fixed dependency tracking when $adding properties to objects nested inside arrays.
• #1028 v-cloak not removed correctly on conditionally compiled elements.
• #1044 "leaveCancelled" not called properly in transitions
• #1063 path parser accepting invalid path
• #1065 class interpolation and v-class not working together
• #1067 two-way binding not properly stabilized
• #1071 & #1072 props default values not respected when data option is also present

0.12.7

Improvements

• The observer now automatically skips object frozen via Object.freeze. Frozen objects are always non-reactive.

Fixed

• #1010 Incorrect scope for transcluded repeater
• #1012 prop initialization overwriting inherited parent scope properties
• #1014 vm.$add triggering non-related deep/Array watchers
• #1020 absent Boolean prop not respecting default value in data

0.12.6

Improvements

• Props can now be specified using camelCase. Vue will automatically convert the camelCase prop names to hyphenated names when looking for prop attributes. This makes the prop names more consistent: camelCase in JavaScript and expressions, hyphenated as attributes.

  Example:

  props: {
    camelCase: String
  }

  <my-comp camel-case="hello"></my-comp>

  Previous usage of directly specifying hyphenated prop names will still work properly, although with the possibility of being deprecated in future versions.

Fixed

• #1004 v-component directive not working with v-repeat
• #1005 attached/ready hooks not firing properly for child components
• #1006 destroyed hook not firing properly when unmounting static component
• #1008 <select> with selectedIndex=-1 DOM state not persisted when appended to new parent

0.12.5

Improvements

• Transcluded components are now considered children of their host component. To better illustrate this:

  <tabs><!-- the host -->
    <tab>{{msg}}</tab><!-- the transcluded component -->
  </tabs>

  In previous versions, <tab> will be instantiated as a child of the host's parent, so despite being visually nested under <tabs>, <tab> is actually a sibling of <tabs> in the internal component tree. This makes it a bit awkward for <tab> and <tabs> to communicate between each other.

  In 0.12.5, <tab> is now a proper child of <tabs>. This means inside <tab>, this.$parent will point to <tabs>, and all transcluded <tab> instances can be found inside <tabs>'s this.$children array. This also means that the event system ($dispatch() and $broadcast()) will now work between the host and the transcluded components.

  Note that {{msg}}, together with any directives on the transcluded components, will still be compiled in the host's parent scope.

  This change should make it easier to write a suite of components that are intended to be composed together.

• props now have an alternative syntax that is more inline with other options' key-value based style:

  props: {
    'prop-a': String, // type check constructor
    'prop-b': null, // accept any type
    'prop-c': { // object descriptor
      type: Number,
      required: true,
      default: 100 // new: default value
    }
  }

  The previous array-based syntax still works, but will likely be deprecated in future versions.

• props option objects can now also specify a default value, as seen in the above example.

• Improved Boolean props handling:

  When a prop has explicit Boolean type specified, it can be used similar to a HTML boolean attribute, e.g. checked for input elements. This means it can simply appear as an attribute without a value and its JavaScript value will resolve to true, and omitting it will resolve the JavaScript value to false.

    props: {
      'my-prop': Boolean
    }

    <example my-prop>
      <!-- myProp === true -->
    </example>
  
    <example>
      <!-- myProp === false -->
    </example>

• Improved watch option syntax. You can now use an Object to provide additional options to a watcher:

  watch: {
    someValue: {
      handler: function () { /*...*/ }, // or use a method name string
      deep: true,
      immediate: true
    }
  }

Fixed

• Fixed cases where templates that contain only <content>, <component>, <partial> or a single component are ignored silently. The first three cases will now turn the instance into a fragment instance and render correctly; the last case will result in a warning.
• Fixed the issue where a parent's registered partials are not available to its children.
• #985 v-ref not cleared properly when a static component is torn down.
• #987 v-if not working on element directives
• #990 array.$remove() not returning the removed element

0.12.4

Note

This is a patch release. The last release with breaking changes is 0.12.2.

Fixed

• Correctly expose the global Vue.partial() registration method.
• Fix prop initialization when manually mounting to a CSS selector.

0.12.3

Note

This is a patch release. The last release with breaking changes is 0.12.2.

Fixed

• #972 two-way props binding not syncing back to parent when the parent key is a path

0.12.2

Breaking Changes

• replace option now defaults to true. When you use a component in a parent template, the mount-point element will by default be replaced. This has a few implications:

  1. What you write in the component's template will be what gets eventually rendered.
  2. You should in most cases include a component's root element in its template. If the template has more than one top-level elements, or only contains text, it becomes a fragment instance.
  3. Remember the scoping rules still applies: attributes & directives on the mount-point element are compiled in parent scope; those on the root element inside the component's template are compiled in child scope.

  If you prefer replace: false, or have trouble migrating to this behavior, you can modify the global default by setting Vue.options.replace = false.

Improvements

• Props initialization has been prioritized; their initial values are now accesible in the created() hook and the data() function.

• wait-for component param can now be used on static components too. Update docs

• Partials are back, but with a new syntax that is more inline with the custom-element style API:

  <!-- static partial -->
  <partial name="my-partial"></partial>
  
  <!-- dynamic partial -->
  <partial name="{{partialId}}"></partial>

• The restriction that v-component can only be used on table elements has been relaxed. It is still recommended to use custom-element syntax at all times - the v-component syntax should only be used in cases where the semantics demand it, e.g. on table/SVG elements, or a generic component that needs to be applied to different element types.

Fixed

• Component that only contains <content></content> can now be rendered correctly.
• props with data- prefix are now stripped and initialized correctly.
• #948 Fix repeat instances incorrectly cahced using parent $key
• #949 Fix incorrectly treating inline-template components that only contain one element as fragment instances.
• #953 Fix currency filter floating point precision.
• #961 Fix incorrectly treating prop paths that contain numbers as literal values

0.12.1

Breaking Changes

It is unfortunate that I have to make a breaking change right after the 0.12 release, but I believe this is a necessary change before users have already invested in the new API.

• Prop Binding Types have been redesigned.

  updated docs

  • All prop bindings are now one-way-down by default. This means parent changes are synced to the child but not the other way around. This default is meant to prevent child components from accidentally mutating the parent's state, which can make your app's data flow harder to reason about.

  • You can still explicitly create a two way binding with the new syntax:

    <component prop="{{@ twoWayBound }}"></component>

  • One-way-up binding type has been removed.

  • One-time binding remains the same using the prop="{{* oneTime }}" syntax.

New Features

• Prop Validation

  updated docs

  You can now optionally define a prop as an object that contains additional validation requirements:

  Vue.component('example', {
    props: [
      {
        name: 'on-something',
        type: Function
      },
      {
        name: 'required-prop',
        required: true
      },
      {
        name: 'greater-than-ten',
        // custom validator function
        validator: function (value) {
          return value > 10
        }
      }
    ]
  })

  The type can be one of the following native constructors:

  • String
  • Number
  • Boolean
  • Function
  • Object
  • Array

  In addition, type can also be a custom constructor function and the the assertion will be made with an instanceof check.

  When a prop validation fails, Vue will refuse the set the value on the child component, and throw a warning if using the development build.

  You can still use strings if your props don't need any validation, and you can mix string and object props in the option array.

Fixed

• #924 multiline expressions in attributes
• #936 <content> transclusion regressions

0.12.0: Dragon Ball

"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 ...