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.
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.
+
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.
+
Added v-view 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.
+
Custom filters that access properties on its this context will be considered computed filters. Doc.
+
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
+
{{>yield}} syntax has been deprecated. A Web Components spec compatible content insertion mechanism using <content> 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.
+
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.
+
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.
+
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.
+
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.
+
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.
+
template option now directly clones native <template>‘s content when available.
+
Overall performance improvements for both initialization and rendering.
Vue.js 0.10.6 has been released! This is another small bug-fix release and will be the last maintainance version before the next major release.
+
+
+
fix v-style error when value is falsy or a number. ( thanks to @dmfilipenko )
+
fix the built-in currency filter error when value is a string ( thanks to @dmfilipenko )
+
fix Vue.require for building with Component v1.0+ ( thanks to @kewah )
+
Allow template nodes to be passed as a template option ( thanks to @jordangarcia )
+
vm.$destroy() now accepts an optional argument noRemove. When passed in as true it will leave the vm’s DOM node intact after the vm is destroyed.
+
+
Vue-next
Some of you might have noticed there is a next branch in the repo. And yes, I am re-writing Vue.js from scratch. There are two main reasons:
+
+
Fix some issues that are caused by design flaws in the current version. Because these changes affect the design of some core modules, it is actually easier to rewrite than to apply on the current codebase.
+
Improve general code quality (in particular, compiler.js as of now is a big pile of mess, and comments are not consistent across the codebase.)
+
+
Take note that the next branch is still in very early stage. The internals will change a lot, and when it comes out it will break current applications. Despite that I will try to keep the API changes to a minimum. Major differences with current 0.10 branch are documented in changes.md. The list is obviously incomplete and subject to change, some of them are simply ideas, but it at least gives you a taste of what to expect, and I’d appreicate your feedback on any of the topics.
After the long wait, Vue.js 0.11 Cowboy Bebop is finally here! Thanks to everyone who tried out the release candidate versions and provided feedback / bug reports along the way.
+
+
The 0.11 release introduced many new features and also a fair number of breaking changes, so please carefully read through the 0.11 Change List before upgrading. Aside from the API changes, 0.11 also ships with better code quality and test coverage, and is considerably more robust in almost every aspect.
+
This documentation site has been fully upgraded to match the new 0.11 API. For the now legacy 0.10.6 version, you can still find documentations for it at legacy.vuejs.org.
Note: this post contains information for the outdated 0.11 version. Please refer to the 0.12 release notes for the changes in the API.
+
+
The release of 0.11 introduced many changes, but the most important one is how the new component scope works. Previously in 0.10.x, components have inherited scope by default. That means in a child component template you can reference parent scope properties. This often leads to tightly-coupled components, where a child component assumes knowledge of what properties are present in the parent scope. It is also possible to accidentally refer to a parent scope property in a child component.
+
+
Isolated Scope and Data Passing
Starting in 0.11, all child components have isolated scope by default, and the recommended way to control component data access is via Explicit Data Passing using v-with or paramAttributes.
+
paramAttributes enables us to write Web Component style templates:
+
Vue.component('my-component', { paramAttributes: ['params'], compiled: function () { console.log(this.params) // passed from parent } })
+
<my-componentparams="{{params}}"></my-component>
+
Where Does It Belong?
Previously in 0.10, all directives on a component’s container element are compiled in the child component’s scope. Because it inherited parent scope, this worked in most situations. Starting in 0.11.1, we want to provide a cleaner separation between component scopes. The rule of thumbs is: if something appears in the parent template, it will be compiled in parent scope; if it appears in child template, it will be compiled in child scope. For example:
Everything in the parent template will be compiled in the parent’s scope, including the content that’s going to be inserted into the child component.
+
The only exception to the rule is v-with (and paramAttributes which compiles down to v-with), which works in both places - so you don’t need to worry about it too much.
+
Cleaner Event Communication
Previously the standard way for a child component to communicate to its parent is via dispatching events. However, with this approach, the event listeners on the parent component are not guaranteed to be listening on the desired child component only. It’s also possible to trigger undesired listners further up the chain if we do not cancel the event.
+
The most common use case is for a parent to react to the events from a specific, direct child component. So in 0.11.4, a new directive v-events has been introduced to enable exactly this behavior.
I’m really excited to announce that Vue.js 0.12: Dragon Ball is finally here! Thanks to everyone who tried out the beta/rc versions and provided feedback / bug reports along the way.
+
There’s a lot to cover in this release, and we will talk about a few highlights below. However, it is still recommended to carefully go through the Full Release Note and updated docs if you are upgrading from 0.11. You can report bugs on GitHub, send questions to vuejs/Discussion, or join us in the Gitter chat channel.
+
+
More Consistent Component Syntax
Previously in 0.11 you have two ways to use a Vue.js component: using the v-component directive, or using custom elements. There are also two ways to pass data down to child components: using the v-with directive, or using the paramAttributes option. Although both custom elements and param attributes get compiled down to directives eventually, it is confusing and redundant to have two sets of syntax for the same functionality.
+
In addition, it should be noted that the component system is a first-class concept in Vue.js, even more important than directives. It defines how we encapsulate our higher-level view logic and compose our application. In the meanwhile, having a clear and declarative way to pass data into child components is also very important. Components and param attributes really deserve their own dedicated syntax to differentiate from other directives.
+
As a result, v-component and v-with have been deprecated in 0.12. paramAttributes has also been renamed to props, which is shorter and cleaner. From now on, most Vue.js components will look like this:
There are also additional props-related improvements such as explicit one-time or one-way props, expression as props, methods as prop callbacks and more. You can find out more details in the 0.12 release notes linked above and the updated Component System section of the guide.
+
Filter Arguments Improvements
In 0.11, filters always receive their arguments as plain strings. An argument can be enclosed in quotes to include whitespace, but the quotes are not automatically stripped when passed into the filter function. Some users were also confused about how to retrive a dynamic value on the vm instead of a plain string.
+
In 0.12, the filter argument syntax now follows a simple rule: if an argument is enclosed in quotes, it will be passed in as a plain string; otherwise, it will be evaluated against the current vm as a dynamic value.
+
This means the usage of some existing filters will have to change:
But it would make custom filters that rely on dynamic values much easier to write:
+
{{ msg | concat otherMsg }}
+
Here the first argument to the concat filter will be the value of this.otherMsg.
+
Asynchronous Components
It is common practice to bundle all the JavaScript into one file when building large single page applications. But when the file becomes too large, we may want to defer loading parts of our application for a faster initial load. However, this does pose some constraints on how the application architecture should be designed. It could be very tricky to figure out how to properly split up your JavaScript bundles.
+
Well, with Vue.js we can already build our applications as decoupled components. If we can lazily load a dynamic component only when it is needed, wouldn’t it be awesome? As a matter of fact, in 0.12 this would be trivially easy with the new Asynchronous Component feature.
+
In 0.12, you can define a component as a factory function that asynchronously resolves a component definition (can be just a plain options object). Vue.js will only trigger the factory function when the component actually needs to be rendered, and will cache the result for future re-renders:
+
Vue.component('async-example', function (resolve, reject) { setTimeout(function () { resolve({ template: '<div>I am async!</div>' }) }, 1000) })
+
It is up to you to decide how to load the component from the server, e.g. $.getScript() or require.js; but the recommended usage is to pair it up with Webpack’s Code Splitting feature:
+
Vue.component('async-webpack-example', function (resolve, reject) { // In Webpack AMD like syntax indicates a code split point require(['./my-async-component'], resolve) })
+
That’s all you need to do. You can use the component just like before, without even thinking about it being async. Webpack will automatically split your final JavaScript into separate bundles with correct dependencies, and automatically load a bundle via Ajax when it is required. You can check out a fully functional example here.
+
Improved Transition System
Vue.js’ transition system is really easy to use, but in the past it has the limitation that you cannot mix CSS and JavaScript-based transitions together. In 0.12 that is no longer the case! The improved transition system now allows you to add JavaScript hooks to a CSS-based transition for additional control. The amount of hooks exposed have also been expanded to give you finer-grained control at every stage of the transition.
+
v-repeat now also ships with built-in support for staggering transitions. It is as simple as adding stagger="100" to your repeated element. It is also possible to define separate staggering for enter and leaving, or even dynamically calculate the staggering delay in a JavaScript hook.
+
For full details on the new transition system, check out the updated guide.
+
Performance Tuning
Vue.js’ precise dependency tracking makes it the one of the most efficient view layer for small hot updates, but there’s always room for improvement. In 0.12, internal instance creation and compilation refactors have improved first-render performance for large lists by up to 40%. With proper track-by usage, re-rendering with large, brand new dataset is also comparable to, or even faster than other Virtual-DOM based frameworks.
+
One More Thing…
With 0.12 out of the door, more efforts will now be spent on the official vue-router, a dedicated routing library for Vue.js with nested view matching, full transition support, and asynchronous data hooks. I have expressed that Vue.js core intends to stay as a no-frills, drop-in view layer library, and that will not change. The vue-router will be shipped separately and is totally optional, however you can expect it to work seamlessly with Vue.js core when you need it.
Vue.js 1.0 の全体的なゴールは、大規模プロジェクトに適合することです。これは多くの非推奨な API がある理由です。ほとんど使用されているものを除き、非推奨のために最も一般的な理由は、その機能が保守性の損害パターンの結果につながるということです、具体的には、私達が非推奨になる機能を維持するのと、プロジェクトの他の部分に影響を与えることなく、単独でコンポーネントをリファクタリングするのが難しいです。
Vue.js はまとめて DOM を更新するために非同期キューを使用します。これはあなたがいくつかのデータを変更するとき、DOM の更新は瞬時に発生しないことを意味します。それらはキューがフラッシュされたとき非同期に適用されます。そこで、あなたは DOM が更新されたときにどうやって知るのでしょうか?あなたがデータを変更後、Vue.nextTick を使用するのが正解です。キューがフラッシュされた後、あなたが渡すそのコールバック関数が一度だけ呼ばれます。
現在、非常に多くの実装があるので仮想 DOM は退屈に聞こえますが、これは違います。Vue のリアクティブシステムと組み合わせることで、あなたは何もすることもなく、形にとらわれない最適化された再レンダリングを提供します。各コンポーネントはレンダリング中にそのリアクティブな依存関係を追跡するため、再レンダリングするときシステムは正確に知っており、shouldComponentUpdate または不変(immutable)なデータは必要ありません。それだけで動作します。
+
また、Vue 2.0 はテンプレートから仮想 DOM にコンパイルするフェーズにいくつかの高度な最適化を適用します:
var parent = new Vue() // child1 と child2 は兄弟です var child1 = new Vue({ parent: parent }) var child2 = new Vue({ parent: parent }) // child3 は child2 下にネストされています var child3 = new Vue({ parent: child2 })
child1.$on('test', function () { console.log('child1 notified') }) child2.$on('test', function () { console.log('child2 notified') }) child3.$on('test', function () { console.log('child3 notified') })
Vue インスタンスの DOM 要素またはフラグメントを対象要素に追加します。対象には、要素またはクエリセレクタ文字列が指定できます。このメソッドは表示されている場合にトランジションをトリガします。トランジションが終了した後に(またはトランジションがトリガされなかった時は即座に)コールバックが発火します。
+
+
+
vm.$before( elementOrSelector, [callback] )
+
+
+
引数:
+
+
{Element | String} elementOrSelector
+
{Function} [callback]
+
+
+
戻り値:vm - インスタンス自身
+
+
使用方法:
+
Vue インスタンスの DOM 要素またはフラグメントを対象要素に挿入します。対象には、要素またはクエリセレクタ文字列が指定できます。このメソッドは表示されている場合にトランジションをトリガします。トランジションが終了した後に(またはトランジションがトリガされなかった時は即座に)コールバックが発火します。
+
+
+
vm.$after( elementOrSelector, [callback] )
+
+
+
引数:
+
+
{Element | String} elementOrSelector
+
{Function} [callback]
+
+
+
戻り値:vm - インスタンス自身
+
+
使用方法:
+
Vue インスタンスの DOM 要素またはフラグメントを対象要素の後に挿入します。対象には、要素またはクエリセレクタ文字列が指定できます。このメソッドは表示されている場合にトランジションをトリガします。トランジションが終了した後に(またはトランジションがトリガされなかった時は即座に)コールバックが発火します。
+
+
+
vm.$remove( [callback] )
+
+
+
引数:
+
+
{Function} [callback]
+
+
+
戻り値:vm - インスタンス自身
+
+
使用方法:
+
Vue インスタンスの DOM 要素またはフラグメントを DOM から削除します。このメソッドは表示されている場合にトランジションをトリガします。トランジションが終了した後に(またはトランジションがトリガされなかった時は即座に)コールバックが発火します。
+
+
+
vm.$nextTick( callback )
+
+
+
引数:
+
+
{Function} [callback]
+
+
+
使用方法:
+
callback を延期し、DOM の更新サイクル後に実行します。DOM の更新を待ち受けるためにいくつかのデータを更新した直後に使用してください。callback の this コンテキストは自動的にこのメソッドを呼びだすインスタンスにバインドされることを除いて、グローバルな Vue.nextTick と同じです。
+
+
例:
+
new Vue({ // ... methods: { // ... example: function () { // データを編集 this.message = 'changed' // DOM はまだ更新されない this.$nextTick(function () { // DOM が更新された // `this` は現在のインスタンスにバインドされる this.doSomethingElse() }) } } })
X が引数とすると、X ミリ秒の間デバウンスするために、指定されたハンドラを Wrap します。デフォルトでは 300ms です。デバウンスされたハンドラは、少なくとも呼び出された瞬間から X ミリ秒経過するまで遅延されます。遅延期間が終わる前に再びハンドラが呼ばれた場合、遅延期間は X ミリ秒にリセットされます。
+
+
例:
+
<input @keyup="onKeyup | debounce 500">
+
+
+
limitBy
+
適用対象制限:Array 値を要求するディレクティブ。例えば v-for。
+
+
引数:
+
+
{Number} limit
+
{Number} [offset]
+
+
+
使用方法:
+
引数によって指定されたように、最初の N 個に配列を制限します。任意の第 2 引数は開始するオフセットを設定するために提供することができます。
現在、非常に多くの実装があるので仮想 DOM は退屈に聞こえますが、これは違います。Vue のリアクティブシステムと組み合わせることで、あなたは何もすることもなく、形にとらわれない最適化された再レンダリングを提供します。各コンポーネントはレンダリング中にそのリアクティブな依存関係を追跡するため、再レンダリングするときシステムは正確に知っており、shouldComponentUpdate または不変(immutable)なデータは必要ありません。それだけで動作します。
また、Vue 2.0 はテンプレートから仮想 DOM にコンパイルするフェーズにいくつかの高度な最適化を適用します:
Vue.js はまとめて DOM を更新するために非同期キューを使用します。これはあなたがいくつかのデータを変更するとき、DOM の更新は瞬時に発生しないことを意味します。それらはキューがフラッシュされたとき非同期に適用されます。そこで、あなたは DOM が更新されたときにどうやって知るのでしょうか?あなたがデータを変更後、Vue.nextTick を使用するのが正解です。キューがフラッシュされた後、あなたが渡すそのコールバック関数が一度だけ呼ばれます。
Vue.js 1.0 の全体的なゴールは、大規模プロジェクトに適合することです。これは多くの非推奨な API がある理由です。ほとんど使用されているものを除き、非推奨のために最も一般的な理由は、その機能が保守性の損害パターンの結果につながるということです、具体的には、私達が非推奨になる機能を維持するのと、プロジェクトの他の部分に影響を与えることなく、単独でコンポーネントをリファクタリングするのが難しいです。
]]>
+
+
+
+ <blockquote>
+<p>こんにちは HN ! Vue.js に精通していない場合は、より高い概要について、この<a href="http://blog.evanyou.me/2015/10/25/vuejs-re-introduction/" target="_blank" rel="noopener">ブログ記事</a>を読みたいかもしれません。</p>
+</blockquote>
+<p>300 以上のコミットの後に、8 つのアルファ (alpha) バージョン 、4 つのベータ (beta) バージョン 、そして 2 つのリリース候補(RC)バージョン、今日、私は <a href="https://github.com/vuejs/vue/releases/tag/1.0.0" target="_blank" rel="noopener">Vue.js 1.0.0 エヴァンゲリオン (Evangelion)</a>のリリースを発表するのをとても誇りに思っています!それはコミュニティから全てのフィードバックなしには不可能でした。API の再設計プロセスに参加した全ての人びとに感謝します。</p>
+
+
+
+
+
+
+
+ Vue.js 0.12 released!
+
+ http://vuejs.org/2015/06/11/012-release/
+ 2015-06-11T08:37:30.000Z
+ 2020-09-20T15:47:21.589Z
+
+ I’m really excited to announce that Vue.js 0.12: Dragon Ball is finally here! Thanks to everyone who tried out the beta/rc versions and provided feedback / bug reports along the way.
There’s a lot to cover in this release, and we will talk about a few highlights below. However, it is still recommended to carefully go through the Full Release Note and updated docs if you are upgrading from 0.11. You can report bugs on GitHub, send questions to vuejs/Discussion, or join us in the Gitter chat channel.
More Consistent Component Syntax
Previously in 0.11 you have two ways to use a Vue.js component: using the v-component directive, or using custom elements. There are also two ways to pass data down to child components: using the v-with directive, or using the paramAttributes option. Although both custom elements and param attributes get compiled down to directives eventually, it is confusing and redundant to have two sets of syntax for the same functionality.
In addition, it should be noted that the component system is a first-class concept in Vue.js, even more important than directives. It defines how we encapsulate our higher-level view logic and compose our application. In the meanwhile, having a clear and declarative way to pass data into child components is also very important. Components and param attributes really deserve their own dedicated syntax to differentiate from other directives.
As a result, v-component and v-with have been deprecated in 0.12. paramAttributes has also been renamed to props, which is shorter and cleaner. From now on, most Vue.js components will look like this:
There are also additional props-related improvements such as explicit one-time or one-way props, expression as props, methods as prop callbacks and more. You can find out more details in the 0.12 release notes linked above and the updated Component System section of the guide.
Filter Arguments Improvements
In 0.11, filters always receive their arguments as plain strings. An argument can be enclosed in quotes to include whitespace, but the quotes are not automatically stripped when passed into the filter function. Some users were also confused about how to retrive a dynamic value on the vm instead of a plain string.
In 0.12, the filter argument syntax now follows a simple rule: if an argument is enclosed in quotes, it will be passed in as a plain string; otherwise, it will be evaluated against the current vm as a dynamic value.
This means the usage of some existing filters will have to change:
But it would make custom filters that rely on dynamic values much easier to write:
{{ msg | concat otherMsg }}
Here the first argument to the concat filter will be the value of this.otherMsg.
Asynchronous Components
It is common practice to bundle all the JavaScript into one file when building large single page applications. But when the file becomes too large, we may want to defer loading parts of our application for a faster initial load. However, this does pose some constraints on how the application architecture should be designed. It could be very tricky to figure out how to properly split up your JavaScript bundles.
Well, with Vue.js we can already build our applications as decoupled components. If we can lazily load a dynamic component only when it is needed, wouldn’t it be awesome? As a matter of fact, in 0.12 this would be trivially easy with the new Asynchronous Component feature.
In 0.12, you can define a component as a factory function that asynchronously resolves a component definition (can be just a plain options object). Vue.js will only trigger the factory function when the component actually needs to be rendered, and will cache the result for future re-renders:
Vue.component('async-example', function (resolve, reject) { setTimeout(function () { resolve({ template: '<div>I am async!</div>' }) }, 1000) })
It is up to you to decide how to load the component from the server, e.g. $.getScript() or require.js; but the recommended usage is to pair it up with Webpack’s Code Splitting feature:
Vue.component('async-webpack-example', function (resolve, reject) { // In Webpack AMD like syntax indicates a code split point require(['./my-async-component'], resolve) })
That’s all you need to do. You can use the component just like before, without even thinking about it being async. Webpack will automatically split your final JavaScript into separate bundles with correct dependencies, and automatically load a bundle via Ajax when it is required. You can check out a fully functional example here.
Improved Transition System
Vue.js’ transition system is really easy to use, but in the past it has the limitation that you cannot mix CSS and JavaScript-based transitions together. In 0.12 that is no longer the case! The improved transition system now allows you to add JavaScript hooks to a CSS-based transition for additional control. The amount of hooks exposed have also been expanded to give you finer-grained control at every stage of the transition.
v-repeat now also ships with built-in support for staggering transitions. It is as simple as adding stagger="100" to your repeated element. It is also possible to define separate staggering for enter and leaving, or even dynamically calculate the staggering delay in a JavaScript hook.
For full details on the new transition system, check out the updated guide.
Performance Tuning
Vue.js’ precise dependency tracking makes it the one of the most efficient view layer for small hot updates, but there’s always room for improvement. In 0.12, internal instance creation and compilation refactors have improved first-render performance for large lists by up to 40%. With proper track-by usage, re-rendering with large, brand new dataset is also comparable to, or even faster than other Virtual-DOM based frameworks.
One More Thing…
With 0.12 out of the door, more efforts will now be spent on the official vue-router, a dedicated routing library for Vue.js with nested view matching, full transition support, and asynchronous data hooks. I have expressed that Vue.js core intends to stay as a no-frills, drop-in view layer library, and that will not change. The vue-router will be shipped separately and is totally optional, however you can expect it to work seamlessly with Vue.js core when you need it.
]]>
+
+
+
+ <p>I’m really excited to announce that <a href="https://github.com/yyx990803/vue/releases/tag/0.12.0" target="_blank" rel="noopener">Vue.js 0.12: Dragon Ball</a> is finally here! Thanks to everyone who tried out the beta/rc versions and provided feedback / bug reports along the way.</p>
+<p>There’s a lot to cover in this release, and we will talk about a few highlights below. However, it is still recommended to carefully go through the <a href="https://github.com/yyx990803/vue/releases/tag/0.12.0" target="_blank" rel="noopener">Full Release Note</a> and updated docs if you are upgrading from 0.11. You can report bugs on GitHub, send questions to <a href="https://github.com/vuejs/Discussion/issues" target="_blank" rel="noopener">vuejs/Discussion</a>, or join us in the <a href="https://gitter.im/yyx990803/vue" target="_blank" rel="noopener">Gitter chat channel</a>.</p>
+
+
+
+
+
+
+
+ 0.11 Component Tips
+
+ http://vuejs.org/2014/12/08/011-component/
+ 2014-12-08T06:02:14.000Z
+ 2020-09-20T15:47:21.589Z
+
+ Note: this post contains information for the outdated 0.11 version. Please refer to the 0.12 release notes for the changes in the API.
The release of 0.11 introduced many changes, but the most important one is how the new component scope works. Previously in 0.10.x, components have inherited scope by default. That means in a child component template you can reference parent scope properties. This often leads to tightly-coupled components, where a child component assumes knowledge of what properties are present in the parent scope. It is also possible to accidentally refer to a parent scope property in a child component.
Isolated Scope and Data Passing
Starting in 0.11, all child components have isolated scope by default, and the recommended way to control component data access is via Explicit Data Passing using v-with or paramAttributes.
paramAttributes enables us to write Web Component style templates:
Vue.component('my-component', { paramAttributes: ['params'], compiled: function () { console.log(this.params) // passed from parent } })
<my-componentparams="{{params}}"></my-component>
Where Does It Belong?
Previously in 0.10, all directives on a component’s container element are compiled in the child component’s scope. Because it inherited parent scope, this worked in most situations. Starting in 0.11.1, we want to provide a cleaner separation between component scopes. The rule of thumbs is: if something appears in the parent template, it will be compiled in parent scope; if it appears in child template, it will be compiled in child scope. For example:
Everything in the parent template will be compiled in the parent’s scope, including the content that’s going to be inserted into the child component.
The only exception to the rule is v-with (and paramAttributes which compiles down to v-with), which works in both places - so you don’t need to worry about it too much.
Cleaner Event Communication
Previously the standard way for a child component to communicate to its parent is via dispatching events. However, with this approach, the event listeners on the parent component are not guaranteed to be listening on the desired child component only. It’s also possible to trigger undesired listners further up the chain if we do not cancel the event.
The most common use case is for a parent to react to the events from a specific, direct child component. So in 0.11.4, a new directive v-events has been introduced to enable exactly this behavior.
0.11.4 has already been released, go try it out!
]]>
+
+
+
+ <p class="tip">Note: this post contains information for the outdated 0.11 version. Please refer to the <a href="https://github.com/yyx990803/vue/releases" target="_blank" rel="noopener">0.12 release notes</a> for the changes in the API.</p>
+
+<p>The release of 0.11 introduced <a href="https://github.com/yyx990803/vue/blob/master/changes.md" target="_blank" rel="noopener">many changes</a>, but the most important one is how the new component scope works. Previously in 0.10.x, components have inherited scope by default. That means in a child component template you can reference parent scope properties. This often leads to tightly-coupled components, where a child component assumes knowledge of what properties are present in the parent scope. It is also possible to accidentally refer to a parent scope property in a child component.</p>
+
+
+
+
+
+
+
+ Vue.js 0.11 released!
+
+ http://vuejs.org/2014/11/09/vue-011-release/
+ 2014-11-09T00:23:40.000Z
+ 2020-09-20T15:47:21.591Z
+
+ After the long wait, Vue.js 0.11 Cowboy Bebop is finally here! Thanks to everyone who tried out the release candidate versions and provided feedback / bug reports along the way.
The 0.11 release introduced many new features and also a fair number of breaking changes, so please carefully read through the 0.11 Change List before upgrading. Aside from the API changes, 0.11 also ships with better code quality and test coverage, and is considerably more robust in almost every aspect.
This documentation site has been fully upgraded to match the new 0.11 API. For the now legacy 0.10.6 version, you can still find documentations for it at legacy.vuejs.org.
]]>
+
+
+
+ <p>After the long wait, <a href="https://github.com/yyx990803/vue/releases/tag/0.11.0" target="_blank" rel="noopener">Vue.js 0.11 <strong>Cowboy Bebop</strong></a> is finally here! Thanks to everyone who tried out the release candidate versions and provided feedback / bug reports along the way.</p>
+
+
+
+
+
+
+
+ Vue.js 0.10.6, and what's next
+
+ http://vuejs.org/2014/07/29/vue-next/
+ 2014-07-28T15:04:55.000Z
+ 2020-09-20T15:47:21.591Z
+
+ 0.10.6
Vue.js 0.10.6 has been released! This is another small bug-fix release and will be the last maintainance version before the next major release.
fix v-style error when value is falsy or a number. ( thanks to @dmfilipenko )
fix the built-in currency filter error when value is a string ( thanks to @dmfilipenko )
fix Vue.require for building with Component v1.0+ ( thanks to @kewah )
Allow template nodes to be passed as a template option ( thanks to @jordangarcia )
vm.$destroy() now accepts an optional argument noRemove. When passed in as true it will leave the vm’s DOM node intact after the vm is destroyed.
Vue-next
Some of you might have noticed there is a next branch in the repo. And yes, I am re-writing Vue.js from scratch. There are two main reasons:
Fix some issues that are caused by design flaws in the current version. Because these changes affect the design of some core modules, it is actually easier to rewrite than to apply on the current codebase.
Improve general code quality (in particular, compiler.js as of now is a big pile of mess, and comments are not consistent across the codebase.)
Take note that the next branch is still in very early stage. The internals will change a lot, and when it comes out it will break current applications. Despite that I will try to keep the API changes to a minimum. Major differences with current 0.10 branch are documented in changes.md. The list is obviously incomplete and subject to change, some of them are simply ideas, but it at least gives you a taste of what to expect, and I’d appreicate your feedback on any of the topics.
]]>
+
+
+
+ <h2 id="0-10-6"><a href="#0-10-6" class="headerlink" title="0.10.6"></a>0.10.6</h2><p>Vue.js 0.10.6 has been released! This is another small bug-fix release and will be the last maintainance version before the next major release.</p>
+
+
+
+
+
+
+
+ Vue.js 0.10 is here!
+
+ http://vuejs.org/2014/03/22/vuejs-010-release/
+ 2014-03-22T10:00:13.000Z
+ 2020-09-20T15:47:21.591Z
+
+ 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.
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.
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.
Added v-view 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.
Custom filters that access properties on its this context will be considered computed filters. Doc.
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
{{>yield}} syntax has been deprecated. A Web Components spec compatible content insertion mechanism using <content> 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.
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.
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.
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.
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.
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.
template option now directly clones native <template>‘s content when available.
Overall performance improvements for both initialization and rendering.
]]>
+
+
+
+ <p>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 <code>v-view</code> directive, array filters, and the option to configure interpolation delimiters. Internally, the codebase has received many refactoring and improvements which makes Vue.js <a href="http://vuejs.org/perf/">even faster</a>.</p>
+
+
+
+
+
+
+
diff --git a/blog/index.html b/blog/index.html
new file mode 100644
index 0000000..9f8cbcd
--- /dev/null
+++ b/blog/index.html
@@ -0,0 +1,211 @@
+
+
+
+
+ vue.js
+
+
+
+
+
+
+
+
+
+
+
+
+
+
I’m really excited to announce that Vue.js 0.12: Dragon Ball is finally here! Thanks to everyone who tried out the beta/rc versions and provided feedback / bug reports along the way.
+
There’s a lot to cover in this release, and we will talk about a few highlights below. However, it is still recommended to carefully go through the Full Release Note and updated docs if you are upgrading from 0.11. You can report bugs on GitHub, send questions to vuejs/Discussion, or join us in the Gitter chat channel.
Note: this post contains information for the outdated 0.11 version. Please refer to the 0.12 release notes for the changes in the API.
+
+
The release of 0.11 introduced many changes, but the most important one is how the new component scope works. Previously in 0.10.x, components have inherited scope by default. That means in a child component template you can reference parent scope properties. This often leads to tightly-coupled components, where a child component assumes knowledge of what properties are present in the parent scope. It is also possible to accidentally refer to a parent scope property in a child component.
After the long wait, Vue.js 0.11 Cowboy Bebop is finally here! Thanks to everyone who tried out the release candidate versions and provided feedback / bug reports along the way.
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.