mirror of
https://github.com/vuejs/vue.git
synced 2024-11-21 20:28:54 +00:00
cleanup
Evan You
parent
69408a55c0
commit
669c5bb3e2
@ -1,636 +0,0 @@
|
||||
**Note** This document only captures the changeset upgrading from 0.10.x to 0.11.0. For changes in releases after 0.11.0, please refer to the [Releases](https://github.com/yyx990803/vue/releases) page.
|
||||
|
||||
**Table of Contents**
|
||||
|
||||
- [Instantiation process](#instantiation-process)
|
||||
- [New Scope Inheritance Model](#new-scope-inheritance-model)
|
||||
- [Instance Option changes](#instance-option-changes)
|
||||
- [Instance methods change](#instance-methods-change)
|
||||
- [Computed Properties API Change](#computed-properties-api-change)
|
||||
- [Directive API change](#directive-api-change)
|
||||
- [Interpolation change](#interpolation-change)
|
||||
- [Config API change](#config-api-change)
|
||||
- [Transition API change](#transition-api-change)
|
||||
- [Events API change](#events-api-change)
|
||||
- [Two Way filters](#two-way-filters)
|
||||
- [Block logic control](#block-logic-control)
|
||||
- [Misc](#misc)
|
||||
|
||||
## Instantiation process
|
||||
|
||||
> Breaking
|
||||
|
||||
**If no `el` option is provided** at instantiation, Vue will no longer auto-create an empty div for you. In this case, the instance is considered to be in "unmounted" state. Data will be observed, but no DOM compilation will happen until the new instance method `$mount` has been explicitly called.
|
||||
|
||||
``` js
|
||||
var vm = new Vue({ data: {a:1} }) // only observes the data
|
||||
vm.$mount('#app') // actually compile the DOM
|
||||
|
||||
// in comparison, this will compile instantly just like before.
|
||||
var vm = new Vue({ el: '#app', data: {a: 1} })
|
||||
```
|
||||
|
||||
If `$mount()` is called with no argument, an empty `<div>` will then be created.
|
||||
|
||||
## New Scope Inheritance Model
|
||||
|
||||
> Breaking
|
||||
|
||||
In the previous version, nested Vue instances do not have prototypal inheritance of their data scope. Although you can access parent data properties in templates, you need to explicitly travel up the scope chain with `this.$parent` in JavaScript code or use `this.$get()` to get a property on the scope chain. The expression parser also needs to do a lot of dirty work to determine the correct scope the variables belong to.
|
||||
|
||||
In the new model, we provide a scope inheritance system similar to Angular, in which you can directly access properties that exist on parent scopes. The major difference is that setting a primitive value property on a child scope WILL affect that on the parent scope! Because all data properties in Vue are getter/setters, so setting a property with the same key as parent on a child will not cause the child scope to create a new property shadowing the parent one, but rather it will just invoke the parent's setter function. See the example [here](http://jsfiddle.net/Px2n6/2/).
|
||||
|
||||
The result of this model is a much cleaner expression evaluation implementation. All expressions can simply be evaluated against the vm.
|
||||
|
||||
By default, all child components **DO NOT** inherit the parent scope. Only anonymous instances created in `v-repeat` and `v-if` inherit parent scope by default. This avoids accidentally falling through to parent properties when you didn't mean to. If you want your component to explicitly inherit parent scope, use the `inherit:true` option.
|
||||
|
||||
## Instance Option changes
|
||||
|
||||
- #### `el` and `data` for component definitions
|
||||
|
||||
> Breaking
|
||||
|
||||
When used in component definitions and in `Vue.extend()`, the `el`, and `data` options now only accept a function that returns the per-instance value. For example:
|
||||
|
||||
``` js
|
||||
var MyComponent = Vue.extend({
|
||||
el: function () {
|
||||
var el = document.createElement('p')
|
||||
// you can initialize your element here.
|
||||
// you can even return a documentFragment to create
|
||||
// a block instance.
|
||||
el.className = 'content'
|
||||
return el
|
||||
},
|
||||
data: function () {
|
||||
// similar to ReactComponent.getInitialState
|
||||
return {
|
||||
a: {
|
||||
b: 123
|
||||
}
|
||||
}
|
||||
}
|
||||
})
|
||||
```
|
||||
|
||||
- #### `paramAttributes` change
|
||||
|
||||
`paramAttributes` now behaves a little differently when the attribute name contains dashes:
|
||||
|
||||
1. If the attribute is a data attribute, the `data-` prefix will be auto stripped;
|
||||
2. If the attribute still contains dashes, it will be camelized. The reason is because it's inconvenient to access top level properties containing dashes in templates: the expression `my-param` will be parsed as a minus expression unless you use the awkward `this['my-param']` syntax.
|
||||
|
||||
This means a param attribute `data-hello` will be set on the vm as `vm.hello`; And `my-param` will be set as `vm.myParam`.
|
||||
|
||||
- #### new option: `events`.
|
||||
|
||||
When events are used extensively for cross-vm communication, the ready hook can get kinda messy. The new `events` option is similar to its Backbone equivalent, where you can declaratiely register a bunch of event listeners. You can also use it to register hook listeners.
|
||||
|
||||
``` js
|
||||
var vm = new Vue({
|
||||
events: {
|
||||
'hook:created': function () {
|
||||
console.log('created!')
|
||||
},
|
||||
greeting: function (msg) {
|
||||
console.log(msg)
|
||||
},
|
||||
// can also use a string for methods
|
||||
bye: 'sayGoodbye'
|
||||
},
|
||||
methods: {
|
||||
sayGoodbye: function () {
|
||||
console.log('goodbye!')
|
||||
}
|
||||
}
|
||||
})
|
||||
// -> created!
|
||||
vm.$emit('greeting', 'hi!')
|
||||
// -> hi!
|
||||
vm.$emit('bye')
|
||||
// -> goodbye!
|
||||
```
|
||||
|
||||
- #### new option: `watch`.
|
||||
|
||||
Similar to the new `events` option, the `watch` option accepts an object of expression/callback pairs. The instance will automatically call `$watch` for each entry in the object. You can also use a method name string instead of a callback.
|
||||
|
||||
- #### new option: `inherit`.
|
||||
|
||||
Default: `false`.
|
||||
|
||||
Whether to inherit parent scope data. Set it to `true` if you want to create a component that inherits parent scope. By default, inside a component's template you won't be able to bind to data on parent scopes. When this is set to `true`, you will be able to:
|
||||
|
||||
1. bind to parent scope properties in the component template
|
||||
2. directly access parent properties on the component instance itself, via prototypal inheritance.
|
||||
|
||||
- #### new option: `mixins`.
|
||||
|
||||
The `mixins` option accepts an array of mixin objects. These mixin objects can contain instance options just like normal instance objects, and they will be merged against the eventual options using the same merge logic in `Vue.extend`. e.g. If your mixin contains a `created` hook and the component itself also has one, both functions will be called.
|
||||
|
||||
``` js
|
||||
var mixin = {
|
||||
created: function () { console.log(2) }
|
||||
}
|
||||
var vm = new Vue({
|
||||
created: function () { console.log(1) },
|
||||
mixins: [mixin]
|
||||
})
|
||||
// -> 1
|
||||
// -> 2
|
||||
```
|
||||
|
||||
- #### new option: `name`.
|
||||
|
||||
This option, when used with `Vue.extend`, gives your returned constructor a more descriptive name rather than the generic `VueComponent`. This makes debugging easier when you log instances in the console. For example:
|
||||
|
||||
``` js
|
||||
var SubClass = Vue.extend({
|
||||
name: 'MyComponent'
|
||||
})
|
||||
var instance = new SubClass()
|
||||
console.log(instance) // -> MyComponent { $el: ... }
|
||||
```
|
||||
|
||||
When you use `Vue.component`, the component ID is automatically camelized and used as the constructor name, so `"my-component"` will have a constructor name of `MyComponent`.
|
||||
|
||||
This option is ignored as an instance option.
|
||||
|
||||
- #### removed options:
|
||||
|
||||
> Breaking
|
||||
|
||||
- `parent`
|
||||
|
||||
This option has been removed. To create a child instance that inherits parent scope, use `var child = parent.$addChild(options, [contructor])`.
|
||||
|
||||
- `lazy`
|
||||
|
||||
The `lazy` option is removed because this does not belong at the vm level. Users should be able to configure individual `v-model` instances to be lazy or not.
|
||||
|
||||
The following are also removed, use `el` with a function instead:
|
||||
|
||||
- `id`
|
||||
- `tagName`
|
||||
- `className`
|
||||
- `attributes`
|
||||
|
||||
- #### hook changes
|
||||
|
||||
> Breaking
|
||||
|
||||
- #### hook usage change: `created`
|
||||
|
||||
In the past, you could do `this.something = 1` inside the `created` hook to add observed data to the instance. Now the hook is called after the data observation, so if you wish to add additional data to the instance you should use the new `$add` and `$delete` API methods.
|
||||
|
||||
- #### hook usage change: `ready`
|
||||
|
||||
The new `ready` hook now is only fired after the instance is compiled and **inserted into the document for the first time**. For a equivalence of the old `ready` hook, use the new `compiled` hook.
|
||||
|
||||
- #### new hook: `beforeCompile`
|
||||
|
||||
This new hook is introduced to accompany the separation of instantiation and DOM mounting. It is called right before the DOM compilation starts and `this.$el` is available, so you can do some pre-processing on the element here.
|
||||
|
||||
- #### new hook: `compiled`
|
||||
|
||||
The `compiled` hook indicates the element has been fully compiled based on initial data. However this doesn't indicate if the element has been inserted into the DOM yet. This is essentially the old `ready` hook.
|
||||
|
||||
- #### renamed hook: `afterDestroy` -> `destroyed`
|
||||
|
||||
Additionally, if there is a leaving transition, `beforeDestroy` is called before the transition starts, and `destroyed` will be called **after** the transition has finished (right after `detached`).
|
||||
|
||||
## Instance methods change
|
||||
|
||||
- #### `vm.$watch`
|
||||
|
||||
- **Expression watching**
|
||||
|
||||
`vm.$watch` can now accept an expression:
|
||||
|
||||
``` js
|
||||
vm.$watch('a + b', function (newVal, oldVal) {
|
||||
// do something
|
||||
})
|
||||
```
|
||||
|
||||
- **Deep watching**
|
||||
|
||||
(Breaking) A change from 0.11 is that `$watch` now by default only fires when the identity of the watched value changes. If you want the watcher to also fire the callback when a nested value changes, pass in the third optional `deep` argument:
|
||||
|
||||
``` js
|
||||
vm.$watch('someObject', callback, true)
|
||||
vm.someObject.nestedValue = 123
|
||||
// callback is fired
|
||||
```
|
||||
|
||||
- **Immediate invocation**
|
||||
|
||||
By default the callback only fires when the value changes. If you want it to be called immediately with the initial value, use the fourth optional `immediate` argument:
|
||||
|
||||
``` js
|
||||
vm.$watch('a', callback, false, true)
|
||||
// callback is fired immediately with current value of `a`
|
||||
```
|
||||
|
||||
- **Unwatching**
|
||||
|
||||
(Breaking) `$unwatch` has been removed. `$watch` now also returns an unregister function:
|
||||
|
||||
``` js
|
||||
var unwatch = vm.$watch('a', cb)
|
||||
// later, teardown the watcher
|
||||
unwatch()
|
||||
```
|
||||
|
||||
- #### `vm.$get`
|
||||
|
||||
`vm.$get` now accepts expressions:
|
||||
|
||||
``` js
|
||||
var value = vm.$get('a + b')
|
||||
```
|
||||
|
||||
- #### New methods
|
||||
|
||||
- `vm.$add` and `vm.$delete`
|
||||
|
||||
Explicitly add/remove properties from the ViewModel. Observed objects are augmented with these two methods too. Use these only when needed - the best practice is to define all your data fields at instantiation, even with a `null` value.
|
||||
|
||||
- `vm.$eval`
|
||||
|
||||
Evaluate an expression that can also include filters.
|
||||
|
||||
``` js
|
||||
var value = vm.$eval('msg | uppercase')
|
||||
```
|
||||
|
||||
- `vm.$interpolate`
|
||||
|
||||
Evalutate a piece of template string.
|
||||
|
||||
``` js
|
||||
var markup = vm.$interpolate('<p>{{msg | uppercase}}</p>')
|
||||
```
|
||||
|
||||
- `vm.$log`
|
||||
|
||||
Log the current instance data as a plain object, which is more console-inspectable than a bunch of getter/setters. Also accepts an optional key.
|
||||
|
||||
``` js
|
||||
vm.$log() // logs entire ViewModel data
|
||||
vm.$log('item') // logs vm.item
|
||||
```
|
||||
|
||||
- `vm.$compile`
|
||||
|
||||
Partially compile a piece of DOM (Element or DocumentFragment). Returns a "decompile" function that tearsdown the directives created during the process. Note the decompile function does not remove the DOM. This method is exposed primarily for writing advanced custom directives.
|
||||
|
||||
## Computed Properties API Change
|
||||
|
||||
> Breaking
|
||||
|
||||
`$get` and `$set` is now simply `get` and `set`:
|
||||
|
||||
``` js
|
||||
computed: {
|
||||
fullName: {
|
||||
get: function () {},
|
||||
set: function () {}
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
## Directive API change
|
||||
|
||||
- #### Directive Priority
|
||||
|
||||
Now each directive can optionally have a `priority` value which determines the order it gets compiled among all directives on the same element. Priorities for some built-in directives will be available in the API reference after 0.11 is released.
|
||||
|
||||
- #### Dynamic literals
|
||||
|
||||
Literal directives can now also be dynamic via bindings like this:
|
||||
|
||||
``` html
|
||||
<div v-component="{{test}}"></div>
|
||||
```
|
||||
|
||||
When `test` changes, the component used will change! This essentially replaces the old `v-view` directive.
|
||||
|
||||
When authoring literal directives, you can now provide an `update()` function if you wish to handle it dynamically. If no `update()` is provided the directive will be treated as a static literal and only evaluated once.
|
||||
|
||||
Note that `v-component` and `v-partial` are the only directives that support this.
|
||||
|
||||
- #### Directive params
|
||||
|
||||
Some built-in directives now checks for additional attribute params to trigger special behavior.
|
||||
|
||||
- `v-model`
|
||||
|
||||
**BREAKING** `v-model` no longer works on arbitrary elements with `contenteditable`. It is now recommended to wrap a library that specifically deals with `contenteditable` inside a custom directive.
|
||||
|
||||
`v-model` now will check `lazy` attribute for lazy model update, and will check `number` attribute to know if it needs to convert the value into Numbers before writing back to the model.
|
||||
|
||||
When used on a `<select>` element, `v-model` will check for an `options` attribute, which should be an keypath/expression that points to an Array to use as its options. The Array can contain plain strings, or contain objects.
|
||||
|
||||
The object can be in the format of `{text:'', value:''}`. This allows you to have the option text displayed differently from its underlying value:
|
||||
|
||||
``` js
|
||||
[
|
||||
{ text: 'A', value: 'a' },
|
||||
{ text: 'B', value: 'b' }
|
||||
]
|
||||
```
|
||||
|
||||
Will render:
|
||||
|
||||
``` html
|
||||
<select>
|
||||
<option value="a">A</option>
|
||||
<option value="b">B</option>
|
||||
</select>
|
||||
```
|
||||
|
||||
Alternatively, the object can be in the format of `{ label:'', options:[...] }`. In this case it will be rendered as an `<optgroup>`:
|
||||
|
||||
``` js
|
||||
[
|
||||
{ label: 'A', options: ['a', 'b']},
|
||||
{ label: 'B', options: ['c', 'd']}
|
||||
]
|
||||
```
|
||||
|
||||
Will render:
|
||||
|
||||
``` html
|
||||
<select>
|
||||
<optgroup label="A">
|
||||
<option value="a">a</option>
|
||||
<option value="b">b</option>
|
||||
</optgroup>
|
||||
<optgroup label="B">
|
||||
<option value="c">c</option>
|
||||
<option value="d">d</option>
|
||||
</optgroup>
|
||||
</select>
|
||||
```
|
||||
|
||||
- `v-component`
|
||||
|
||||
When used as a dynamic component, it will check for the `keep-alive` attribute. When `keep-alive` is present, already instantiated components will be cached. This is useful when you have large, nested view components and want to maintain the state when switching views.
|
||||
|
||||
- `v-repeat`
|
||||
|
||||
One of the questions I've asked about is how `v-repeat` does the array diffing and what happens if we swap the array with a fresh array grabbed from an API end point. In 0.10 because the objects are different, all instances have to been re-created. In 0.11 we introduce the `trackby` attribute param. If each of your data objects in the array has a unique id, we can use that id to reuse existing instances when the array is swapped.
|
||||
|
||||
For example, if we have the data in the following format:
|
||||
|
||||
``` js
|
||||
items: [
|
||||
{ _id: 1, ... },
|
||||
{ _id: 2, ... },
|
||||
{ _id: 3, ... }
|
||||
]
|
||||
```
|
||||
|
||||
In your template you can do:
|
||||
|
||||
``` html
|
||||
<li v-repeat="items" trackby="_id">...</li>
|
||||
```
|
||||
|
||||
Later on when you swap `items` with a different array, even if the objects it contains are new, as long as they have the same trackby id we can still efficiently reuse existing instances.
|
||||
|
||||
- #### Usage change for `v-with`
|
||||
|
||||
In 0.10 and earlier, `v-with` creates a two-way binding between the parent and child instance. In 0.11, it no longer creates a two-way binding but rather facilitates a unidirectional data flow from parent to child.
|
||||
|
||||
For example:
|
||||
|
||||
``` html
|
||||
<div v-component="test" v-with="childKey:parentKey">{{childKey}}</div>
|
||||
```
|
||||
|
||||
Here when you do `this.a = 123` in the child, the child's view will update, but the parent's scope will remain unaffected. When `parent.parentKey` changes again, it will overwrite `child.childKey`.
|
||||
|
||||
- #### New directive: `v-el`
|
||||
|
||||
Similar to `v-ref`, but instead stores a reference to a DOM Node in `vm.$$`. For the reasoning behind the addition see [this thread](https://github.com/yyx990803/vue/issues/404#issuecomment-53566116).
|
||||
|
||||
- #### New directive option: `twoWay`
|
||||
|
||||
This option indicates the directive is two-way and may write back to the model. Allows the use of `this.set(value)` inside directive functions.
|
||||
|
||||
- #### New directive option: `acceptStatement`
|
||||
|
||||
This option indicates the directive accepts inline statements like `v-on` does:
|
||||
|
||||
``` html
|
||||
<a v-on="click: a++"></a>
|
||||
```
|
||||
|
||||
The statement will be wrapped up as a function and passed as the argument to the directive's `update` function.
|
||||
|
||||
- #### Removed directive option: `isEmpty`, `isFn`
|
||||
|
||||
## Interpolation change
|
||||
|
||||
- (Breaking) Text bindings will no longer automatically stringify objects. Use the new `json` filter which gives more flexibility in formatting.
|
||||
|
||||
- #### One time interpolations
|
||||
|
||||
One time interpolations do not need to set up watchers and can improve initial rendering performance. If you know something's not going to change, make sure to use this new feature. Example:
|
||||
|
||||
``` html
|
||||
<span>{{* hello }}</span>
|
||||
```
|
||||
|
||||
## Config API change
|
||||
|
||||
> Breaking
|
||||
|
||||
Instead of the old `Vue.config()` with a heavily overloaded API, the config object is now available globally as `Vue.config`, and you can simply change its properties:
|
||||
|
||||
``` js
|
||||
// old
|
||||
// Vue.config('debug', true)
|
||||
|
||||
// new
|
||||
Vue.config.debug = true
|
||||
```
|
||||
|
||||
- #### `config.prefix` change
|
||||
|
||||
Config prefix now should include the hyphen: so the default is now `v-` and if you want to change it make sure to include the hyphen as well. e.g. `Vue.config.prefix = "data-"`.
|
||||
|
||||
- #### `config.delimiters` change
|
||||
|
||||
In the old version the interpolation delimiters are limited to the same base character (i.e. `['{','}']` translates into `{{}}` for text and `{{{}}}` for HTML). Now you can set them to whatever you like (*almost), and to indicate HTML interpolation, simply wrap the tag with one extra outer most character on each end. Example:
|
||||
|
||||
``` js
|
||||
Vue.config.delimiters = ['(%', '%)']
|
||||
// tags now are (% %) for text
|
||||
// and ((% %)) for HTML
|
||||
```
|
||||
|
||||
* Note you still cannot use `<` or `>` in delimiters because Vue uses DOM-based templating.
|
||||
|
||||
- #### New config option: `proto`
|
||||
|
||||
By default, Vue.js alters the `__proto__` of observed Arrays when available for faster method interception/augmentation. This would only cause issue in the rare case when you are observing a subclass of the native Array. In that case, you can set `Vue.config.proto = false` to prohibit this behavior.
|
||||
|
||||
- #### New config option: `async`
|
||||
|
||||
By default Vue.js uses batched async updates for watchers and DOM updates. This strategy ensures minimal calls to directive and watcher functions, but in some situations also makes things harder to reason about. It is now possible to force synchronous updates by setting `Vue.config.async = false`.
|
||||
|
||||
## Transition API Change
|
||||
|
||||
> Breaking
|
||||
|
||||
- no more distinctions between `v-transition`, `v-animation` or `v-effect`;
|
||||
- no more configuring enter/leave classes in `Vue.config`;
|
||||
- `Vue.effect` has been replaced with `Vue.transition`, the `effects` option has also been replaced by `transitions`.
|
||||
|
||||
With `v-transition="my-transition"`, Vue will:
|
||||
|
||||
1. Try to find a transition definition object registered either through `Vue.transition(id, def)` or passed in with the `transitions` option, with the id `"my-transition"`. If it finds it, it will use that definition object to perform the custom JavaScript based transition.
|
||||
|
||||
2. If no custom JavaScript transition is found, it will automatically sniff whether the target element has CSS transitions or CSS animations applied, and add/remove the classes as before.
|
||||
|
||||
3. If no transitions/animations are detected, the DOM manipulation is executed immediately instead of hung up waiting for an event.
|
||||
|
||||
- #### JavaScript transitions API change
|
||||
|
||||
Now more similar to Angular, and all hooks are called with `this` set to the vm owning the transitioned element:
|
||||
|
||||
``` js
|
||||
Vue.transition('fade', {
|
||||
beforeEnter: function (el) {
|
||||
// a synchronous function called right before the
|
||||
// element is inserted into the document.
|
||||
// you can do some pre-styling here to avoid FOC.
|
||||
},
|
||||
enter: function (el, done) {
|
||||
// element is already inserted into the DOM
|
||||
// call done when animation finishes.
|
||||
$(el)
|
||||
.css('opacity', 0)
|
||||
.animate({ opacity: 1 }, 1000, done)
|
||||
// optionally return a "cancel" function
|
||||
// to clean up if the animation is cancelled
|
||||
return function () {
|
||||
$(el).stop()
|
||||
}
|
||||
},
|
||||
leave: function (el, done) {
|
||||
// same as enter
|
||||
$(el)
|
||||
.animate({ opacity: 0 }, 1000, done)
|
||||
return function () {
|
||||
$(el).stop()
|
||||
}
|
||||
}
|
||||
})
|
||||
```
|
||||
|
||||
## Events API change
|
||||
|
||||
Now if an event handler return `false`, it will stop event propagation for `$dispatch` and stop broadcasting to children for `$broadcast`.
|
||||
|
||||
``` js
|
||||
var a = new Vue()
|
||||
var b = new Vue({
|
||||
parent: a
|
||||
})
|
||||
var c = new Vue({
|
||||
parent: b
|
||||
})
|
||||
|
||||
a.$on('test', function () {
|
||||
console.log('a')
|
||||
})
|
||||
b.$on('test', function () {
|
||||
console.log('b')
|
||||
return false
|
||||
})
|
||||
c.$on('test', function () {
|
||||
console.log('c')
|
||||
})
|
||||
c.$dispatch('test')
|
||||
// -> 'c'
|
||||
// -> 'b'
|
||||
```
|
||||
|
||||
## Two Way filters
|
||||
|
||||
If a filter is defined as a function, it is treated as a read filter by default - i.e. it is applied when data is read from the model and applied to the DOM. You can now specify write filters as well, which are applied when writing to the model, triggered by user input. Write filters are only triggered on two-way bindings like `v-model`.
|
||||
|
||||
``` js
|
||||
Vue.filter('format', {
|
||||
read: function (val) {
|
||||
return val + '!'
|
||||
},
|
||||
write: function (val, oldVal) {
|
||||
return val.match(/ok/) ? val : oldVal
|
||||
}
|
||||
})
|
||||
```
|
||||
|
||||
## Block logic control
|
||||
|
||||
One limitation of flow control direcitves like `v-repeat` and `v-if` is that they can only be used on a single element. Now you can use them to manage a block of content by using them on a `<template>` element that wraps the content you want managed:
|
||||
|
||||
``` js
|
||||
items: [
|
||||
{
|
||||
title: 'title-1',
|
||||
subtitle: 'subtitle-1',
|
||||
content: 'content-1'
|
||||
},
|
||||
{
|
||||
title: 'title-2',
|
||||
subtitle: 'subtitle-2',
|
||||
content: 'content-2'
|
||||
}
|
||||
]
|
||||
```
|
||||
|
||||
``` html
|
||||
<template v-repeat="item:items">
|
||||
<h2>{{item.title}}</h2>
|
||||
<p>{{item.subtitle}}</p>
|
||||
<p>{{item.content}}</p>
|
||||
</template>
|
||||
```
|
||||
|
||||
Rendered result:
|
||||
|
||||
``` html
|
||||
<!--v-block-start-->
|
||||
<h2>title-1</h2>
|
||||
<p>subtitle-1</p>
|
||||
<p>content-1</p>
|
||||
<!--v-block-end-->
|
||||
<!--v-block-start-->
|
||||
<h2>title-2</h2>
|
||||
<p>subtitle-2</p>
|
||||
<p>content-2</p>
|
||||
<!--v-block-end-->
|
||||
```
|
||||
|
||||
Additionally, you can also use `v-partial` with `<template>` for a block partial:
|
||||
|
||||
``` html
|
||||
<template v-partial="abc"></template>
|
||||
```
|
||||
|
||||
Which is the equivalance of `{{>abc}}`. However, the `<template>` syntax allows you to bind a **dynamic block partial**:
|
||||
|
||||
``` html
|
||||
<template v-partial="{{partialId}}"></template>
|
||||
```
|
||||
|
||||
## Misc
|
||||
|
||||
- `$destroy()` now by default leaves `$el` intact. If you want to remove it (and trigger transitions), call `$destroy(true)`.
|
||||
|
||||
- When there are inline values on input elements bound with `v-model`, e.g. `<input value="hi" v-model="msg">`, the **inline value** will be used as the inital value. If the vm comes with default data, it **will be overwritten** by the inline value. Same for `selected` attribute on `<option>` elements.
|
||||
@ -1,55 +0,0 @@
|
||||
``` html
|
||||
<!-- normal directive -->
|
||||
<div v-if="ok"></div>
|
||||
|
||||
<!-- directive with argument -->
|
||||
<button v-on:click="onClick"></button>
|
||||
|
||||
<!-- v-on with argument + key modifier -->
|
||||
<input v-on:keyup.enter="handleEnter">
|
||||
|
||||
<!-- literal modifier: pass literal string to directive -->
|
||||
<a v-link.literal="/a/b/c"></a>
|
||||
|
||||
<!-- binding an attribute with v-bind -->
|
||||
<img v-bind:src="imgSrc">
|
||||
<a v-bind:href="baseURL + '/path'">
|
||||
|
||||
<!-- shorthand: colon for v-bind -->
|
||||
<img :src="imgSrc">
|
||||
<a :href="baseURL + '/path'">
|
||||
|
||||
<!-- shorthand: @ for v-on -->
|
||||
<button @click="onClick"></button>
|
||||
|
||||
<!-- key modifier -->
|
||||
<input @keyup.enter="handleEnter">
|
||||
|
||||
<!-- stop/prevent modifier -->
|
||||
<button @click.stop="onClick"></button>
|
||||
<form @submit.prevent></form>
|
||||
|
||||
<!-- props -->
|
||||
<my-comp
|
||||
prop="literal string"
|
||||
v-bind:prop="defaultOneWay"
|
||||
v-bind:prop.sync="twoWay"
|
||||
v-bind:prop.once="oneTime">
|
||||
</my-comp>
|
||||
|
||||
<!-- component with props and custom events, in shorthand -->
|
||||
<item-list
|
||||
:items="items"
|
||||
:open.sync="isListOpen"
|
||||
@ready="onItemsReady"
|
||||
@update="onItemsUpdate">
|
||||
</item-list>
|
||||
|
||||
<!-- v-el and v-ref now just use the argument -->
|
||||
|
||||
<!-- registers vm.$refs.child -->
|
||||
<comp v-ref:child></comp>
|
||||
|
||||
<!-- registers vm.$els.node -->
|
||||
<div v-el:node></div>
|
||||
```
|
||||
@ -1 +0,0 @@
|
||||
See https://github.com/vuejs/vue/issues/2873
|
||||
12
Home.md
12
Home.md
@ -1,11 +1 @@
|
||||
Welcome to the vue wiki!
|
||||
|
||||
|
||||
***
|
||||
### Vue 2.0 is almost here!
|
||||
|
||||
To get started with `Vue 2.0 RC`, see [Vue-2.0 RC Starter Resources](https://github.com/vuejs/vue/wiki/Vue-2.0-RC-Starter-Resources)
|
||||
|
||||
***
|
||||
|
||||
The wiki is currently not public-editable due to spams. A number of pages originally hosted here are now merged into the [awesome-vue](https://github.com/vuejs/awesome-vue) repository. If you have built/discovered anything cool about Vue, please open a pull request there :)
|
||||
> Nothing to see yet.
|
||||
|
||||
31
Roadmap.md
31
Roadmap.md
@ -1,31 +0,0 @@
|
||||
### Core
|
||||
|
||||
- v0.9.x: Animation and Transition ✓
|
||||
- v0.10.x: API and internal improvements ✓
|
||||
- v0.11.x: Consolidate API for future specs ✓
|
||||
- v0.12.x: Improve API to make it easier to ship standalone, reusable components and build larger-scale applications. ✓
|
||||
- v1.0: See [1.0 plans](https://github.com/vuejs/Discussion/issues/347) ✓
|
||||
|
||||
### Tooling
|
||||
|
||||
- Chrome dev tools extension ✓
|
||||
- CSP-compliant build ✓ (See `csp` branch)
|
||||
- CommonJS-based build setup ✓
|
||||
- Browserify + Vueify ✓
|
||||
- Webpack + vue-loader ✓
|
||||
- Scoped CSS ✓
|
||||
- Improved Dev Tools ✓
|
||||
- CLI for scaffolding large SPAs ✓
|
||||
- Server-side rendering
|
||||
|
||||
### Plugins
|
||||
|
||||
Please discuss plugin specific topics in each plugin's respective repo. The general philosophy for these plugins is to be light, self-contained, and most importantly avoid reinventing the wheel. Build on top of solid low level solutions and mostly just make them Vue-friendly.
|
||||
|
||||
- [vue-touch](https://github.com/vuejs/vue-touch) ✓ (Needs refactor/update)
|
||||
|
||||
- [vue-resource](https://github.com/vuejs/vue-resource) ✓
|
||||
|
||||
- [vue-router](https://github.com/vuejs/vue-router) ✓
|
||||
|
||||
- [vue-validator](https://github.com/vuejs/vue-validator) ✓
|
||||
@ -1,15 +0,0 @@
|
||||
- vue-router (@posva, @fnlctrl)
|
||||
- vuex (@ktsn)
|
||||
- vuejs.org (@chrisvfritz, @phanan)
|
||||
- jp.vuejs.org (@kazupon)
|
||||
- awesome-vue
|
||||
- vue-loader
|
||||
- vueify
|
||||
- vue-cli (@zigomir)
|
||||
- webpack
|
||||
- webpack-simple
|
||||
- browserify (@zigomir)
|
||||
- browserify-simple (@zigomir)
|
||||
- simple (@chrisvfritz)
|
||||
- vuefire (@posva)
|
||||
- vue-validator (@kazupon)
|
||||
@ -1,148 +0,0 @@
|
||||
# Introduction
|
||||
|
||||
Exciting Times! [Vue 2.0](https://github.com/vuejs/vue/releases) is now in RC stage, and the supporting libraries – [vuex](#vuex), [vue-router](#vue-router) – and build tools – [vueify](#vueify) and [vue-loader](#vue-loader) – offer preview versions that are 2.0-ready as well! [vue-cli](#vue-cli) also offers simple templates to start hacking with `2.0` today!
|
||||
|
||||
While we are working on getting the docs for everything up to date, there's nothing to keep you from taking 2.0 for a test ride right now!
|
||||
|
||||
This collection aims to help you getting started by collecting all the information about the various libraries for 2.0 in one place.
|
||||
|
||||
## Vue 2.0.0-rc
|
||||
|
||||
### Install
|
||||
```
|
||||
npm install vue@next --save-dev
|
||||
```
|
||||
|
||||
### Resources for the new API
|
||||
|
||||
The API of 2.0 stays mostly the same. Most changes have been under the hood (virtual DOM, anyone?), and a couple of features have been deprecated in order to make the API slimmer and more consistent and guide you to use better patterns.
|
||||
|
||||
If you have never used Vue before, the best place to start is the [WIP official 2.0 Guide](http://rc.vuejs.org/guide/). The guide doesn't assume any previous Vue.js knowledge so you can jump directly into 2.0!
|
||||
|
||||
It's a good idea to go over the new guide even if you have previous Vue.js experience with 1.x, since there is a lot of new content thanks to the hard work by @chrisvfritz. Note the API section is not completed yet, and you can check out [this issue](https://github.com/vuejs/vuejs.org/issues/319) to keep yourself updated to the docs progress.
|
||||
|
||||
If you just want to know what has changed from 1.x, you can check out the [2.0 Changes Github Issue](https://github.com/vuejs/vue/issues/2873). It will offer you a quick overview of all changes, additions, and deprecations, as well as tips on how to handle the deprecations with recommended patterns (scroll past the long, awesome list of finished features and changes).
|
||||
|
||||
The repo's [releases page](https://github.com/vuejs/vue/releases) page offers further information as every beta/rc release comes with extensive changelogs explaining the various changes that were made.
|
||||
|
||||
[The examples in the `next` branch](https://github.com/vuejs/vue/tree/next/examples) are also already updated for Vue 2.0, so if you want to see some example code, this is the place to go to.
|
||||
|
||||
If you have any questions left (as we are sure you will), don't hesitate to ask them on http://forum.vuejs.org. Please do **not** open issues in the Github repo, as those are exclusively for bug reports, feature requests and the like.
|
||||
|
||||
If you find a bug, **please** don't hesitate to report it! Just follow the [Issue Reporting Guidelines](https://github.com/vuejs/vue/blob/dev/CONTRIBUTING.md#issue-reporting-guidelines).
|
||||
|
||||
### Standalone vs. Runtime Builds
|
||||
|
||||
There are two builds available, the standalone build and the runtime-only build.
|
||||
|
||||
- The standalone build includes the compiler and supports the `template` option.
|
||||
|
||||
- The runtime-only build does not include the template compiler, and does not support the `template` option. You can only use the `render` option when using the runtime-only build. The benefit is that it is roughly 1/3 lighter-weight than the standalone build.
|
||||
|
||||
When you use `vue-loader` or `vueify` to import `*.vue` files, their `<template>` parts are automatically compiled into `render` functions. It is therefore recommended to use the runtime-only build with `*.vue` files.
|
||||
|
||||
When using a bundler like Browserify or Webpack, if you do this:
|
||||
|
||||
``` js
|
||||
import Vue from 'vue'
|
||||
```
|
||||
|
||||
...you are getting the runtime-only build because that is the default export of the NPM package. If you do want to use the standalone build for some reason (e.g. because you have to use templates in an HTML document), you need to configure the bundler to alias `vue` to the standalone build instead.
|
||||
|
||||
With webpack, add the following alias to your webpack config:
|
||||
|
||||
```js
|
||||
// ...
|
||||
resolve: {
|
||||
alias: {vue: 'vue/dist/vue.js'}
|
||||
},
|
||||
// ....
|
||||
```
|
||||
|
||||
For Browserify, you can use [aliasify](https://github.com/benbria/aliasify) for the same effect.
|
||||
|
||||
**Note: Do NOT do `import Vue from 'vue/dist/vue'` - since some tools or 3rd party libraries may import `vue` as well, this may cause the app to load both the runtime and standalone builds at the same time and lead to errors.**
|
||||
|
||||
## Supporting Libraries
|
||||
|
||||
The main support libraries are [vue-router](https://github.com/vuejs/vue-router), a router for Vue components and [vuex](https://github.com/vuejs/vuex), a reactive flux-like implementation with single-state-tree store. Both libraries are now also in 2.0-rc state, however the documentation has not been updated yet.
|
||||
|
||||
### vue-router
|
||||
|
||||
[vue-router](https://github.com/vuejs/vue-router) is the official routing library for Vue, and it currently is in 2.0 RC state which supports Vue 2.0 and comes with several improvements and an overhauled API.
|
||||
|
||||
The 2.0 branch comes with [extensive examples](https://github.com/vuejs/vue-router/tree/next/examples) on how to work with the new router API.
|
||||
|
||||
Check the [releases page](https://github.com/vuejs/vue-router/releases) from v.2.0.0-beta.1 onwards to get detailed change lists.
|
||||
|
||||
**Installation**
|
||||
```
|
||||
npm install vue-router@next --save-dev
|
||||
```
|
||||
|
||||
### vuex
|
||||
|
||||
**Two RC versions? What the heck?**
|
||||
|
||||
Yes, there are currently two separate Release candidates: one for version `1.0` ([Release notes](https://github.com/vuejs/vuex/releases/tag/v1.0.0-rc)) and one for Version `2.0` ([Release notes](https://github.com/vuejs/vuex/releases/tag/v2.0.0-rc.3)).
|
||||
|
||||
So what's the difference?
|
||||
|
||||
* `v1.0.0-rc.*` essentially will be a stable release of the `<1.0.0` API. The [current docs](http://vuejs.github.io/vuex/) are already up to date for this version.
|
||||
* `v2.0.0-rc.*` is a release candidate for the new API, which changed a lot. To learn about all the changes, read [this Github issue about `2.0 design`](https://github.com/vuejs/vuex/issues/236) as well as the [release notes](https://github.com/vuejs/vuex/releases) for `v2.0.0-rc.1` up to the latest version.
|
||||
|
||||
**Both Versions are compatible with Vue `1.0` *and* Vue `2.0`!!**
|
||||
|
||||
This is because vuex is largely independent of the changes under the hood of Vue 2.0.
|
||||
|
||||
**Installation**
|
||||
```
|
||||
# v1.0.0-rc.* is tagged as `latest` on npm so the default install will give you this version
|
||||
npm install vuex --save-dev
|
||||
|
||||
# To install `v2.0.0-rc.*`, use the `next` tag
|
||||
npm install vuex@next --save-dev
|
||||
```
|
||||
|
||||
## Build Tools
|
||||
|
||||
vue-loader (for webpack) and vueify (for browserify) are already up to speed as well, offering preview versions. They will just work with Vue 2.0, there are no relevant API changes to consider.
|
||||
|
||||
### vue-loader
|
||||
|
||||
Vue 2.0 is supported from `v9.0.*` onwards. ([Release Notes](https://github.com/vuejs/vue-loader/releases))
|
||||
```
|
||||
npm install vue-loader@next --save-dev
|
||||
```
|
||||
|
||||
### vueify
|
||||
|
||||
Pretty much the same goes for vueify - `v9.0.*` onward supports Vue 2.0. ([Release Notes](https://github.com/vuejs/vueify/releases))
|
||||
```
|
||||
npm install vueify@next --save-dev
|
||||
```
|
||||
|
||||
## vue-cli and Templates
|
||||
|
||||
[vue-cli](https://github.com/vuejs/vuue-cli) is the command line tool that helps you to quickly set up projects with vue-loader or vueify and other goodies, like ESlint support.
|
||||
|
||||
vue-cli offers two flavors of templates: the 'normal' ones come with a complete setup for dev, testing and building for production, while the '-simple' versions offer a quick start to get hacking.
|
||||
|
||||
* The "bigger" templates (`webpack` and `browserify`) are **not** ready for vue 2.0 yet
|
||||
* But there are `2.0`-ready versions of the `-simple` templates for both bundlers: [`webpack-simple-2.0`](https://github.com/vuejs-templates/webpack-simple-2.0) and [`browserify-simple-2.0`](https://github.com/vuejs-templates/browserify-simple-2.0)
|
||||
````
|
||||
vue init webpack-simple-2.0 my-project
|
||||
vue init browserify-simple-2.0 my-project
|
||||
```
|
||||
|
||||
Keep in mind that those are works in progress, but they should help you to get started quickly. Our goal is to have the bigger templates ready for 2.0 when the official release arrives.
|
||||
|
||||
If you want to upgrade the big templates for Vue 2.0 yourself, there's good news: it's not a big deal at all! We will add a small guide right here soon, so check back regularly.
|
||||
|
||||
## Server Side Rendering
|
||||
|
||||
The server-rendering functionalities are shipped in the `vue-server-renderer` package. You can check out its [documentation](https://github.com/vuejs/vue/tree/next/packages/vue-server-renderer) to get an idea of how to work with it.
|
||||
|
||||
## Integrated Demo
|
||||
|
||||
The [vue-hackernews-2.0](https://github.com/vuejs/vue-hackernews-2.0) demo is built from scratch using the latest RC versions of Vue.js, vue-router and vuex, showcasing how these libraries work seamlessly together with server-side rendering.
|
||||
@ -1 +1 @@
|
||||
Questions & comments? Please open issue at [vuejs/Discussion](https://github.com/vuejs/Discussion/issues)
|
||||
This wiki serves as a knowledge base for working on Vue internals. For documentation, please visit [vuejs.org](https://vuejs.org).
|
||||
|
||||
Loading…
Reference in New Issue
Block a user