0.10

Author: yyx990803

source/_drafts/why-vuejs.md

@@ -0,0 +1,42 @@
+title: Vue.js 0.10 is here!
+date: 2014-03-22 19:00:13
+type: '{{type}}'
+---
+
+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 inprovements which makes Vue.js even faster.
+
+<!-- more -->
+
+See the [Installation](/guide/installation.html) 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](/guide/directives.html#literal-directives).
+- Attributes listed in the `paramAttributes` 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](/guide/list.html#using-an-identifier).
+- Added `v-view` directive which binds to a string value and dynamically instantiate different components using that string as the component ID. [Doc](/api/directives.html#v-view).
+- Added `filterBy` and `orderBy` filters for `v-repeat`. [Doc](/api/filters.html#filterby).
+- Custom filters that access properties on its `this` context will be considered **computed filters**. [Doc](/guide/filters.html#computed-filters).
+- You can now access the event in `v-on` handler expressions as `$event`. Example: `<a v-on="click:handle('hello', $event)">Hello</a>`
+- 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
+
+- 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.
+- `v-repeat` Arrays' augmented methods have been renamed to `$set(index, value)` and `$remove(index | value)` to better differentiate from native methods. The `replace` 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.
+- Production build now strips all warnings and debug logs. To leverage `debug: true` you now have to use the development version.
+- `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.
+- `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.
+
+### Fixed
+
+- `event.stopPropagation()` and `event.preventDefault()` inside `v-on` handlers now work as expected.
+- `parent` option now works properly when used in `Vue.extend`
+- Mustache bindings inside `<textarea>` are now properly interpolated before being set as value.
+
+### Internal
+
+- `v-component`, `v-with` and `v-if` have been re-written for a cleaner compile flow.
+- `v-repeat` has been re-written to use refined diff algorithm which triggers minimum DOM manipulations when the array is set to a different instance containing overlapping elements. This makes it efficient to pipe an Array through filters.
+- The compiling procedure has been further optimized and instantiation perf has increased roughly 20%.

source/_posts/vuejs-010-release.md

@@ -81,7 +81,22 @@ Vue.filter('wrap', function (value, begin, end) {
 
 When a filter is invoked, its `this` context are set to the ViewModel instance that is invoking it. This allows it to output dynamic results based on the state of the owner ViewModel. In such case, we need to track these accessed properties so that when they change, directives that are using this filter will be re-evaluated.
 
-Filters that relies on the state of the ViewModel that is calling it are referred to as **computed filters**. For example, the built-in `filterBy` and `orderBy` filters are both computed filters. For custom filters, Vue.js checks for computed filters by looking for references to `this` in a filter's function body. Any directive that uses a computed filter will be automatically compiled as an expression so its filters are included in the dependency collection process.
+For example:
+
+``` js
+Vue.filter('concat', function (value, key) {
+    // `this` points to the VM invoking the filter
+    return value + this[key]
+})
+```
+``` html
+<input v-model="userInput">
+<span>{&#123;msg | concat userInput&#125;}</span>
+```
+
+Filters that relies on the state of the ViewModel that is calling it are referred to as **computed filters**. For this simple example above, you can achieve the same result with just an expression, but for more complicated procedures that need more than one statements, you need to put them either in a computed property or a computed filter.
+
+For example, the built-in `filterBy` and `orderBy` filters are both computed filters that performs non-trivial work on the Array being passed in. For custom filters, Vue.js checks for computed filters by looking for references to `this` in a filter's function body. Any directive that uses a computed filter will be automatically compiled as an expression so its filters are included in the dependency collection process.
 
 If you find the concept of computed filters confusing at the moment, don't worry. It is handled automatically by Vue.js and you don't really need to know how it works to leverage it. As you get familiar with more related concepts, it will all make sense.
 

source/guide/filters.md

@@ -102,8 +102,7 @@ In Vue.js, a component is simply a ViewModel constructor registered with an ID u
         <li
             v-repeat="todos"
             v-on="click: done = !done"
-            class="&#123;&#123;done ? 'done' : ''&#125;&#125;"
-        >
+            class="&#123;&#123;done ? 'done' : ''&#125;&#125;">
             &#123;&#123;content&#125;&#125;
         </li>
     </ul>

source/guide/index.md

@@ -28,6 +28,12 @@ $ component install yyx990803/vue
 var Vue = require('vue')
 ```
 
+For edge version (unstable branch, use at your own risk!):
+
+``` bash
+$ component install yyx990803/vue@dev
+```
+
 ## Browserify
 
 ``` bash
@@ -37,6 +43,14 @@ $ npm install vue
 var Vue = require('vue')
 ```
 
+For edge version:
+
+``` bash
+$ npm install yyx990803/vue#dev
+```
+
+<p class="tip">The built version in `dist/` doesn't work with Browserify because it assumes it's loaded in global scope and comes with its own `require` mechanism. Always directly use source version when using Vue with Browserify.</p>
+
 ## Bower
 
 ``` bash
@@ -47,9 +61,9 @@ $ bower install vue
 <script src="bower_components/vue/dist/vue.js">
 ```
 
-## Module Loaders
+## AMD Module Loaders
 
-e.g. RequireJS, SeaJS: Built versions in `/dist` or installed via Bower is wrapped with UMD so it can be used directly as a CommonJS or AMD module.
+e.g. RequireJS, SeaJS: Built versions in `/dist` or installed via Bower is wrapped with UMD so it can be used directly as an AMD module.
 
 ## Ready?
 

source/guide/installation.md

@@ -50,7 +50,9 @@ For Arrays containing primitive values, you can access the value simply as `$val
 
 ``` html
 <ul id="tags">
-    <li v-repeat="tags">{&#123;$value&#125;}</li>
+    <li v-repeat="tags">
+        {&#123;$value&#125;}
+    </li>
 </ul>
 ```
 
@@ -74,6 +76,18 @@ new Vue({
 })
 </script>
 
+## Using an identifier
+
+Sometimes we might want to have more explicit variable access instead of implicitly falling back to parent scope. You can do that by providing an argument to the `v-repeat` directive and use it as the identifier for the item being iterated:
+
+``` html
+<ul id="users">
+    <!-- think of this as "for each user in users" -->
+    <li v-repeat="user: users">
+        {&#123;user.name&#125;} {&#123;user.email&#125;}
+    </li>
+</ul>
+```
 
 ## Mutation Methods