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 maintenance 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 appreciate 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 listeners 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.
Hi HN! If you are not familiar with Vue.js, you might want to read this blog post for a higher level overview.
+
+
After 300+ commits, 8 alphas, 4 betas and 2 release candidates, today I am very proud to announce the release of Vue.js 1.0.0 Evangelion! Many thanks to all those who participated in the API re-design process - it would not have been possible without all the input from the community.
+
+
Improved Template Syntax
The 1.0 template syntax resolves a lot of subtle consistency issues and makes Vue templates more concise and more readable in general. The most notable new feature is the shorthand syntax for v-on and v-bind:
+
<!-- short for v-bind:href --> <a:href="someURL"></a>
<!-- short for v-on:click --> <button @click="onClick"></button>
+
When used on a child component, v-on listens for custom events and v-bind can be used to bind props. The shorthands using child components very succinct:
The overall goal for Vue.js 1.0 is to make it suitable for larger projects. This is why there are many API deprecations. Except for ones that are barely used, the most common reason for a deprecation is that the feature leads to patterns that damages maintainability. Specifically, we are deprecating features that make it hard to maintain and refactor a component in isolation without affecting the rest of the project.
+
For example, the default asset resolution in 0.12 has implicit fallbacks to parents in the component tree. This makes the assets available to a component non-deterministic and subject how it is used at runtime. In 1.0, all assets are now resolved in strict mode and there are no longer implicit fallbacks to parent. The inherit option is also removed, because it too often leads to tightly coupled components that are hard to refactor.
+
Faster Initial Rendering
1.0 replaces the old v-repeat directive with v-for. In addition to providing the same functionality and more intuitive scoping, v-for provides up to 100% initial render performance boost when rendering large lists and tables!
+
More Powerful Tooling
There are also exciting things going on outside of Vue.js core - vue-loader and vueify have received major upgrades including:
+
+
Hot component reloading. When a *.vue component is edited, all of its active instances are hot swapped without reloading the page. This means when making small changes, e.g. tweaking the styles or the template, your app doesn’t need to fully reload; the state of the app the swapped component can be preserved, drastically improving the development experience.
+
+
Scoped CSS. By simply adding a scoped attribute to your *.vue component style tags, the component’s template and final generated CSS are magically re-written to ensure a component’s styles are only applied to its own elements. Most importantly, the styles specified in a parent component does not leak down to child components nested within it.
+
+
ES2015 by default. JavaScript is evolving. You can write much cleaner and expressive code using the latest syntax. vue-loader and vueify now transpiles the JavaScript in your *.vue components out of the box, without the need for extra setup. Write future JavaScript today!
+
+
+
Combined with vue-router, Vue.js is now more than a library - it provides a solid foundation for building complex SPAs.
+
What’s Next?
As what 1.0.0 usually suggests, the core API will stay stable for the foreseeable future and the library is ready for production use. Future development will focus on:
+
+
Improving vue-router and make it production ready.
+
+
Streamlining the developer experience, e.g. a better devtool and a CLI for scaffolding Vue.js projects and components.
+
+
Providing more learning resources such as tutorials and examples.
A very common question from new Vue users, especially those who used Angular before, is “can I have templateURL?”. I have answered this so many times and I figure it’s better to write something about it.
+
+
In Angular, templateURL or ng-include allows the user to dynamically load a remote template file at runtime. This seems pretty convenient as a built-in feature, but let’s rethink what problem it solves.
+
First, it allows us to write our template in a separate HTML file. This gives us proper syntax highlighting in editors, which is probably why many prefer to do so. But is splitting your JavaScript code and the template really the best way? For a Vue.js component, its template and its JavaScript is tightly coupled by nature - it’s in fact much simpler if things are just in the same file. The context switching of jumping back and forth between two files actually makes the development experience much worse. Conceptually, components are the basic building block of a Vue.js app, not templates. Every Vue.js template is coupled to an accompanying JavaScript context - there’s no point in splitting them further apart.
+
Second, because templateURL loads the template via Ajax at runtime, you don’t need a build step in order to split up your files. This is convenient during development, but comes at a serious cost when you want to deploy it to production. Before HTTP/2 is universally supported, the number of HTTP requests is still probably the most critical factor in your app’s initial load performance. Now imagine you use templateURL for every component in your app - the browser needs to perform dozens of HTTP requests before even being able to display anything! In case you don’t know, most browsers limit the number of parallel requests it can perform to a single server. When you exceed that limit, your app’s initial rendering will suffer for every extra round trip the browser has to wait for. Sure, there are build tools that can help you pre-register all those templates in $templateCache - but that shows us a build step is, in fact, inevitable for any serious frontend development.
+
So, without templateURL, how do we deal with the development experience problem? Writing templates as inline JavaScript strings is terrible, faking templates with <script type="x/template"> also feels like a hack. Well, maybe it’s time to up the game a bit and use a proper module bundler like Webpack or Browserify. It might seem daunting if you’ve never dealt with them before, but trust me it’s worth it to take the leap. Proper modularization is a necessity if you want to build anything large and maintainable. More importantly, you get to write your Vue components in a single file, with proper syntax highlighting and the extra benefits of custom pre-processors, hot-reloading, ES2015 by default, autoprefixing and scoped CSS, which makes the development experience 10 times better.
+
Finally, Vue does allow you to lazy load your components, and with Webpack it is trivially easy. Although this is only a concern when your initial bundle is so large that you are better off splitting it apart.
Recently there has been a lot of discussion around the tooling hurdle when you start a React project. Luckily for Vue.js, all you need to do to start with a quick prototype is including it from a CDN via a <script> tag, so we’ve got that part covered. However, that’s not how you’d build a real world application. In real world applications we inevitably need a certain amount of tooling to give us modularization, transpilers, pre-processors, hot-reload, linting and testing. These tools are necessary for the long-term maintainability and productivity of large projects, but the initial setup can be a big pain. This is why we are announcing vue-cli, a simple CLI tool to help you quickly scaffold Vue.js projects with opinionated, battery-included build setups.
+
+
Just The Scaffolding
The usage looks like this:
+
npm install -g vue-cli vue init webpack my-project # answer prompts cd my-project npm install npm run dev # tada!
+
All the CLI does is pulling down templates from the vuejs-templates organization on GitHub. Dependencies are handled via NPM, and build tasks are simply NPM scripts.
+
Official Templates
The purpose of official Vue project templates is providing opinionated, battery-included development tooling setups so that users can get started with actual app code as fast as possible. However, these templates are un-opinionated in terms of how you structure your app code and what libraries you use in addition to Vue.js.
+
All official project templates are repos in the vuejs-templates organization. When a new template is added to the organization, you will be able to run vue init <template-name> <project-name> to use that template. You can also run vue list to see all available official templates.
+
Current available templates include:
+
+
browserify - A full-featured Browserify + vueify setup with hot-reload, linting & unit testing.
+
+
browserify-simple - A simple Browserify + vueify setup for quick prototyping.
+
+
webpack - A full-featured Webpack + vue-loader setup with hot reload, linting, testing & css extraction.
+
+
webpack-simple - A simple Webpack + vue-loader setup for quick prototyping.
+
+
+
Bring Your Own Setup
If you are not happy with the official templates, you can fork these templates, modify them to fit your specific needs (or even create your own from scratch), and use them via vue-cli too, because vue-cli can work directly on GitHub repos:
+
vue init username/repo my-project
+
Vue Components Everywhere
There are different templates for different purposes: simple setups for quick prototyping, and full-featured setups for ambitious applications. A common feature among these templates though, is that they all support *.vue single file components. This means any third party Vue components written as valid *.vue files can be shared among projects using these setups, and simply be distributed over NPM - let’s create more reusable components!
There are few types of questions that we frequently see from users who are new to Vue.js. Although they are all mentioned somewhere in the guide, they are easy to miss and can be hard to find when you do get bitten by the gotchas. Therefore we are aggregating them in this post and hopefully it can save you some time!
+
+
Why isn’t the DOM updating?
Most of the time, when you change a Vue instance’s data, the view updates. But there are two edge cases:
+
+
When you are adding a new property that wasn’t present when the data was observed. Due to the limitation of ES5 and to ensure consistent behavior across browsers, Vue.js cannot detect property addition/deletions. The best practice is to always declare properties that need to be reactive upfront. In cases where you absolutely need to add or delete properties at runtime, use the global Vue.set or Vue.delete methods.
+
+
When you modify an Array by directly setting an index (e.g. arr[0] = val) or modifying its length property. Similarly, Vue.js cannot pickup these changes. Always modify arrays by using an Array instance method, or replacing it entirely. Vue provides a convenience method arr.$set(index, value) which is syntax sugar for arr.splice(index, 1, value).
Vue.js uses an asynchronous queue to batch DOM updates. This means when you modify some data, the DOM updates do not happen instantly: they are applied asynchronously when the queue is flushed. So how do you know when the DOM has been updated? Use Vue.nextTick right after you modify the data. The callback function you pass to it will be called once the queue has been flushed.
In the basic examples, we declare the data directly as a plain object. This is because we are creating only a single instance with new Vue(). However, when defining a component, data must be declared as a function that returns the initial data object. Why? Because there will be many instances created using the same definition. If we still use a plain object for data, that same object will be shared by reference across all instance created! By providing a data function, every time a new instance is created we can call it to return a fresh copy of the initial data.
All Vue.js templates are valid, parsable HTML markup, and Vue.js relies on spec-compliant parsers to process its templates. However, as specified in the standard, HTML is case-insensitive when matching tag and attribute names. This means camelCase attributes like :myProp="123" will be matched as :myprop="123". As a rule of thumb, you should use camelCase in JavaScript and kebab-case in templates. For example a prop defined in JavaScript as myProp should be bound in templates as :my-prop.
We are also discussing the possibility of eliminating this inconsistency by resolving props and components in a case-insensitive manner. Join the conversation here.
Vue’s growth in the past year has been nothing short of amazing. As of today we are at over 15,000 stars on GitHub, over 500k downloads from npm, and over 2,000 users in the Gitter channel. What’s more exciting though, is that the community successfully organized the first London Vue.js Meetup and the first Paris Vue.js Meetup! A big shoutout to the awesome organizers: Jack, James and Eduardo.
+
+
If you are interested in connecting with Vue.js users near you and share your experiences in using Vue.js, joining a local Meetup is a great idea - even better, maybe you can organize one :)
There are many other great projects - too many to be listed here - but you can check them all out in awesome-vue. If you’ve built great things with Vue, you should also add them to the list!
+
A New Vision For the Project
Some of you may have noticed that the development on the Vue.js core repo has slowed down lately - in the meanwhile, a lot of efforts went into other sub projects, namely Vuex, vue-devtools and the official Webpack project boilerplate. The next step is a new release for vue-router, and better documentation/examples demonstrating how Vue.js core, Vuex and vue-router work together in a large single page application.
+
All this adds together towards a new vision for the Vue.js project: a progressive framework that can adapt to different complexity levels. Vue.js core will remain “just the view layer” - you can still drop it on whatever existing page to replace jQuery, but the Vue.js project also includes other pieces like vue-router, Vuex, vue-loader/vueify and vue-cli that works together as a more complete, opinionated framework for single page applications. More on this in a later post.
+
Vue.js needs your help!
Open source is awesome, and I’m proud that Vue.js is helping people build real products all over the world. However, as the scope of the project grows, pushing new features while maintaining everything becomes a very demanding job. The good news is you can help!
+
Looking for collaborators
There are already users who frequently helps out in various ways, but this is an invitation to make things official. I’m looking for contributors to join the “team”, which is currently mostly just me. If that sounds interesting to you, take a look at the application here.
+
Looking for sponsors
Another way to help making Vue development sustainable is providing direct financial support. The more financial support I receive, the more time I get to spend on making Vue even better.
+
If you run a business and is using Vue in a revenue-generating product, it would make business sense to sponsor Vue development: it ensures the project that your product relies on stays healthy and actively maintained. It can also help your exposure in the Vue community and makes it easier to attract Vue developers.
+
If you are an individual user and have enjoyed the productivity of using Vue, consider donating as a sign of appreciation - like buying me coffee once in a while :)
+
In either case, you can provide recurring funding through Vue’s Patreon campaign, or provide one-time donations via PayPal. There are many ideas for Vue that I have lined up but haven’t had the time to embark on, and I would love to be able to work on them full time - I hope you can help me make that happen!
Today I am thrilled to announce the first public preview of Vue.js 2.0, which brings along many exciting improvements and new features. Let’s take a peek at what’s in store!
+
+
Even Leaner, Even Faster
Vue.js has always focused on staying light and fast, but 2.0 pushes it even further. The rendering layer is now based on a lightweight virtual-DOM implementation (based on Snabbdom) that improves initial rendering speed and memory consumption by up to 2~4x in most scenarios (check out these benchmarks). The template-to-virtual-DOM compiler and the runtime can be separated, so you can pre-compile templates and ship your app with only the runtime, which is less than 12KB min+gzip (as a reference, React 15 is 44KB min+gzip). The compiler also works in the browser, which means you can still drop in one script tag and start hacking, just like before. Even with the compiler included, the build is sitting at 17KB min+gzip, still lighter than the current 1.0 build.
+
Not Your Average Virtual-DOM
Now, just virtual-DOM sounds boring because there are so many implementations out there - but this one is different. Combined with Vue’s reactivity system, it provides optimized re-rendering out of the box without you having to do anything. Each component keeps track of its reactive dependencies during its render, so the system knows precisely when to re-render, and which components to re-render. No need for shouldComponentUpdate or immutable data structures - it just works.
+
In addition, Vue 2.0 applies some advanced optimizations during the template-to-virtual-DOM compilation phase:
+
+
It detects static class names and attributes so that they are never diffed after the initial render.
+
+
It detects the maximum static sub trees (sub trees with no dynamic bindings) and hoist them out of the render function. So on each re-render, it directly reuses the exact same virtual nodes and skips the diffing.
+
+
+
These advanced optimizations can usually only be achieved via Babel plugins when using JSX, but with Vue 2.0 you can get them even using the in-browser compiler.
+
The new rendering system also allows you to disable reactive conversions by simply freezing your data and manually force updates, essentially giving you full control over the re-rendering process.
+
With these techniques combined, Vue 2.0 ensures blazing fast performance in every possible scenario while requiring minimal optimization efforts from the developer.
+
Templates, JSX, or Hyperscript?
Developers tend to have strong opinions on templates vs. JSX. On the one hand, templates are closer to HTML - they map better to the semantic structure of your app and make it much easier to think visually about the design, layout and styling. On the other hand, templates are limited to the DSL while the programmatic nature of JSX/hyperscript provides the full expressive power of a turing-complete language.
+
Being a designer/developer hybrid, I prefer writing most of my interfaces in templates, but in certain cases I do miss the flexibility of JSX/hyperscript. An example would be writing a component that programmatically handles its children, something not feasible with just the template-based slot mechanism.
+
Well, why not have both? In Vue 2.0, you can keep using the familiar template syntax, or drop down to the virtual-DOM layer whenever you feel constrained by the template DSL. Instead of the template option, just replace it with a render function. You can even embed render functions in your templates using the special <render> tag! The best of both worlds, in the same framework.
+
Streaming Server-side Rendering
With the migration to virtual-DOM, Vue 2.0 naturally supports server-side rendering with client-side hydration. One pain point of current mainstream server rendering implementations, such as React’s, is that the rendering is synchronous so it can block the server’s event loop if the app is complex. Synchronous server-side rendering may even adversely affect time-to-content on the client. Vue 2.0 provides built-in streaming server-side rendering, so that you can render your component, get a readable stream back and directly pipe it to the HTTP response. This ensures your server is responsive, and gets the rendered content to your users faster.
+
Unlocking More Possibilities
With the new architecture, there are even more possibilities to explore - for example, rendering to native interfaces on mobile. Currently, we are exploring a port of Vue.js 2.0 that uses weex as a native rendering backend, a project maintained by engineers at Alibaba Group, the biggest tech enterprise of China. It is also technically feasible to adapt Vue 2.0’s virtual-DOM to run inside ReactNative. We are excited to see how it goes!
+
Compatibility and What to Expect Next
Vue.js 2.0 is still in pre-alpha, but you can checkout the source code here. Despite being a full rewrite, the API is largely compatible with 1.0 with the exception of some intentional deprecations. Check out the same official examples written in 2.0 - you will see that not much has changed!
+
The feature deprecations are part of our continued effort to provide the simplest API possible for maximum developer productivity. You can check out a 1.0 vs. 2.0 feature comparison here. This does mean that it will take some effort to migrate an existing app if you happen to use some of these deprecated features heavily, but we will provide detailed upgrade guides in the future.
+
There is still much work left to be done. We will be releasing the first alpha once we reach satisfactory test coverage, and we are aiming for beta by end of May / early June. In addition to more tests, we also need to update the supporting libraries (vue-router, Vuex, vue-loader, vueify…). Currently only Vuex works with 2.0 out of the box, but we will make sure that everything works smoothly together when 2.0 ships.
+
We are also not forgetting about 1.x! 1.1 will be released alongside 2.0 beta, with an LTS period of 6-month critical bug fixes and 9-month security updates. It will also ship with optional deprecation warnings to get you prepared for upgrading to 2.0. Stay tuned!
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/CNAME b/CNAME
new file mode 100644
index 0000000000..998cc417c8
--- /dev/null
+++ b/CNAME
@@ -0,0 +1 @@
+vuejs.org
diff --git a/LICENSE b/LICENSE
deleted file mode 100644
index 4d747eb68c..0000000000
--- a/LICENSE
+++ /dev/null
@@ -1,21 +0,0 @@
-The MIT License (MIT)
-
-Copyright (c) 2013-present Yuxi Evan You
-
-Permission is hereby granted, free of charge, to any person obtaining a copy
-of this software and associated documentation files (the "Software"), to deal
-in the Software without restriction, including without limitation the rights
-to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
-copies of the Software, and to permit persons to whom the Software is
-furnished to do so, subject to the following conditions:
-
-The above copyright notice and this permission notice shall be included in
-all copies or substantial portions of the Software.
-
-THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
-IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
-FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
-AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
-LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
-OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
-THE SOFTWARE.
diff --git a/README.md b/README.md
deleted file mode 100644
index bed7c6049c..0000000000
--- a/README.md
+++ /dev/null
@@ -1,129 +0,0 @@
-# v2.vuejs.org
-
-> Important: This repository is for Vue 1.x and 2.x only. Issues and pull requests related to 3.x are managed in the [v3 doc repo](https://github.com/vuejs/docs-next).
-
-This site is built with [hexo](http://hexo.io/). Site content is written in Markdown format located in `src`. Pull requests welcome!
-
-## Writing
-
-See the [Vue Docs Writing Guide](https://github.com/vuejs/v2.vuejs.org/blob/master/writing-guide.md) for our rules and recommendations on writing and maintaining documentation.
-
-## Developing
-
-``` bash
-$ npm install
-$ npm start # dev server at http://localhost:4000
-```
-
-## Deploying
-
-The site is automatically deployed when commits land in `master`, via [Netlify](https://www.netlify.com/).
-
-If you are the maintainer of a community translation fork and would like to deploy via Netlify instead of GitHub pages, please ping @yyx990803 in an issue to request a Netlify team membership and DNS update.
-
-## On Translations
-
-Translations for this documentation project are currently maintained in separate repositories forked from this original one.
-
-### Arabic
-
-Arabic translation is maintained by [Interstellar Club](https://github.com/InterstellarClub)
-
-* Translation Repo - [/interstellarClub/ar.vuejs.org](https://github.com/interstellarClub/ar.vuejs.org)
-* Primary Maintainers :
- * [Ilyes Chouia](https://github.com/celyes)
- * [Ahmed Aissaoui](https://github.com/Aissaoui-Ahmed)
-
-### French
-
-French translation is maintained by Vuejs-FR.
-* Translation Repo - [/vuejs-fr/vuejs.org](https://github.com/vuejs-fr/vuejs.org)
-
-### Italian
-
-* Translation Repo - [/vuejs/it.vuejs.org](https://github.com/vuejs/it.vuejs.org)
-
-### Japanese
-
-Japanese translation is maintained by [Vue.js japan user group](https://github.com/vuejs-jp)
-
-* Translation Repo - [/vuejs/jp.vuejs.org](https://github.com/vuejs/jp.vuejs.org)
-* Primary maintainer - [kazupon](https://github.com/kazupon)
-* Secondary Maintainers:
- * [re-fort](https://github.com/re-fort)
- * [potato4d](https://github.com/potato4d)
- * [oohira](https://github.com/oohira)
-
-### Korean
-
-Korean translation is maintained by [Vue.js Korean User group](https://github.com/vuejs-kr).
-
-* Translation Repo - [/vuejs-kr/kr.vuejs.org](https://github.com/vuejs-kr/kr.vuejs.org)
-* Primary maintainer - [ChangJoo Park](https://github.com/ChangJoo-Park)
-
-### Mandarin
-
-* Translation Repo - [/vuejs/cn.vuejs.org](https://github.com/vuejs/cn.vuejs.org)
-
-### Persian (Farsi)
-
-Persian translation is maintained by VueJS-fa.
-
-* Translation Repo - [/vuejs-fa/fa.vuejs.org](https://github.com/vuejs-fa/fa.vuejs.org)
-* Primary maintainer - [Pooya Parsa](https://github.com/pi0)
-
-### Português-Br
-
-Português-Br translation is maintained by [Vuejs-Br](https://github.com/vuejs-br).
-
-* Translation Repo - [/vuejs-br/br.vuejs.org](https://github.com/vuejs-br/br.vuejs.org)
-
-### Russian
-
-Russian translation is maintained by Translation Gang.
-
-* Translation Repo - [/translation-gang/ru.vuejs.org](https://github.com/translation-gang/ru.vuejs.org)
-* Primary maintainer - [Grigoriy Beziuk](https://gbezyuk.github.io)
-
-### Spanish
-
-* Translation Repo - [/1950Labs/vuejs.org](https://github.com/1950Labs/vuejs.org)
-* Spanish translation is maintained by:
-
-[1950Labs](https://1950labs.com) & [Vue.js Montevideo](https://www.meetup.com/Montevideo-Vue-JS-Meetup/):
-
-- [Leonel More](https://github.com/leonelmore) | [Twitter](https://twitter.com/leonelmore)
-- [Sebastián Camacho](https://github.com/sxcamacho) | [Twitter](https://twitter.com/sxcamacho)
-- [Diana Rodríguez](https://github.com/alphacentauri82) | [Twitter](https://twitter.com/cotufa82)
-- [Alejandro Parada](https://github.com/alejandro8605)
-- [José Javier Señaris](https://github.com/pepesenaris) | [Twitter](https://twitter.com/pepesenaris)
-- [Federico Kauffman](https://github.com/fedekau) | [Twitter](https://twitter.com/fedekauffman)
-- [Fabián Larrañaga](https://github.com/FLarra) | [Twitter](https://twitter.com/FLarraa)
-- [Pablo Marcano](https://github.com/Pablosky12) | [Twitter](https://twitter.com/stiv_ml)
-- [Nicolás Tinte](https://github.com/Tintef) | [Twitter](https://twitter.com/NicoTinte)
-- [Diego Barreiro](https://github.com/faliure)
-- [Matías Verdier](https://github.com/MatiasVerdier) | [Twitter](https://twitter.com/matiasvj)
-- [Pablo Kz](https://github.com/pabloKz)
-- [Leonardo Fagundez](https://github.com/lfgdzdev) | [Twitter](https://twitter.com/Lfgdz)
-
-
-### Vietnamese
-
-Vietnamese translation is maintained by [Vue.js Vietnam User group](https://github.com/vuejs-vn/).
-
-* Translation Repo: [/vuejs-vn/vuejs.org](https://github.com/vuejs-vn/vuejs.org)
-* Primary maintainer - [phanan](https://github.com/phanan)
-
-### Bahasa Indonesia
-
-Bahasa Indonesia translation is maintained by [Vue.js Indonesia](https://github.com/vuejs-id/).
-
-* Translation Repo: [/vuejs-id/docs](https://github.com/vuejs-id/docs)
-
-### Want to help with the translation?
-
-If you feel okay with translating quite alone, you can fork the repo, post a comment on the [Community Translation Announcements](https://github.com/vuejs/v2.vuejs.org/issues/2015) issue page to inform others that you're doing the translation and go for it.
-
-If you are more of a team player, Translation Gang might be for you. Let us know somehow that you're ready to join this international open-source translators community. Feel free to contact [Grigoriy Beziuk](https://gbezyuk.github.io) or anybody else from [the team](https://github.com/orgs/translation-gang/people).
-
-And thank you in advance ;)
diff --git a/_config.yml b/_config.yml
deleted file mode 100644
index 38ce868cd3..0000000000
--- a/_config.yml
+++ /dev/null
@@ -1,196 +0,0 @@
-# Hexo Configuration
-## Docs: https://hexo.io/docs/
-## Source: https://github.com/hexojs/hexo
-
-# Site
-title: Vue.js
-subtitle:
-description: "The Progressive JavaScript Framework"
-author: Evan You
-email:
-language:
-
-# URL
-## If your site is put in a subdirectory, set url as 'http://yoursite.com/child' and root as '/child/'
-url: https://v2.vuejs.org
-root: /
-permalink: :year/:month/:day/:title/
-tag_dir: tags
-archive_dir: archives
-category_dir: categories
-code_dir: downloads/code
-
-# Directory
-source_dir: src
-public_dir: public
-
-# Writing
-new_post_name: :title.md # File name of new posts
-default_layout: post
-auto_spacing: false # Add spaces between asian characters and western characters
-titlecase: false # Transform title into titlecase
-external_link:
- enable: true # Open external links in new tab
-max_open_file: 100
-multi_thread: true
-filename_case: 0
-render_drafts: false
-post_asset_folder: false
-highlight:
- enable: true
- line_number: false
- tab_replace:
- hljs: true
-
-# Category & Tag
-default_category: uncategorized
-category_map:
-tag_map:
-
-# Archives
-## 2: Enable pagination
-## 1: Disable pagination
-## 0: Fully Disable
-archive: 0
-category: 0
-tag: 0
-
-# Server
-## Hexo uses Connect as a server
-## You can customize the logger format as defined in
-## http://www.senchalabs.org/connect/logger.html
-port: 4000
-logger: false
-logger_format:
-
-# Date / Time format
-## Hexo uses Moment.js to parse and display date
-## You can customize the date format as defined in
-## http://momentjs.com/docs/#/displaying/format/
-date_format: MMM D YYYY
-time_format: H:mm:ss
-
-# Pagination
-## Set per_page to 0 to disable pagination
-per_page: 10
-pagination_dir: page
-
-# Disqus
-disqus_shortname:
-
-# Include/Exclude Files/Folders
-exclude:
-## Exclude example code from Nunjucks
- - "v2/examples/vue-20-*/*"
-
-# Extensions
-## Plugins: https://github.com/hexojs/hexo/wiki/Plugins
-## Themes: https://github.com/hexojs/hexo/wiki/Themes
-theme: vue
-exclude_generator:
-
-# Markdown
-## https://github.com/chjj/marked
-markdown:
- gfm: true
- pedantic: false
- sanitize: false
- tables: true
- breaks: true
- smartLists: true
- smartypants: true
-
-# Offline
-## Config passed to sw-precache
-## https://github.com/JLHwung/hexo-offline
-# offline:
-# maximumFileSizeToCacheInBytes: 10485760
-# staticFileGlobs:
-# - public/**/*.{js,html,css,png,jpg,jpeg,gif,svg,eot,ttf,woff,woff2,json,xml}
-# stripPrefix: public
-# verbose: true
-# runtimeCaching:
-# # Ad Sources - should be networkFirst
-# - urlPattern: /*
-# handler: networkFirst
-# options:
-# origin: sendgrid.sp1.convertro.com
-# - urlPattern: /*
-# handler: networkFirst
-# options:
-# origin: ad.doubleclick.net
-# # CDNs - should be cacheFirst, since they should be used specific versions so should not change
-# - urlPattern: /*
-# handler: cacheFirst
-# options:
-# origin: cdn.jsdelivr.net
-# - urlPattern: /*
-# handler: cacheFirst
-# options:
-# origin: fonts.googleapis.com
-# - urlPattern: /*
-# handler: cacheFirst
-# options:
-# origin: fonts.gstatic.com
-# - urlPattern: /*
-# handler: cacheFirst
-# options:
-# origin: cdnjs.cloudflare.com
-# - urlPattern: /*
-# handler: cacheFirst
-# options:
-# origin: maxcdn.bootstrapcdn.com
-
-# Deployment
-## Docs: https://hexo.io/docs/one-command-deployment
-deploy:
- type: git
- repository: git@github.com:vuejs/v2.vuejs.org.git
-
-feed:
- type: atom
- path: atom.xml
- limit: 20
-
-alias:
- api/index.html: v2/api/index.html
- guide/class-and-style.html: v2/guide/class-and-style.html
- guide/comparison.html: v2/guide/comparison.html
- guide/components.html: v2/guide/components.html
- guide/computed.html: v2/guide/computed.html
- guide/conditional.html: v2/guide/conditional.html
- guide/custom-directive.html: v2/guide/custom-directive.html
- guide/deployment.html: v2/guide/deployment.html
- guide/events.html: v2/guide/events.html
- guide/forms.html: v2/guide/forms.html
- guide/index.html: v2/guide/index.html
- guide/installation.html: v2/guide/installation.html
- guide/instance.html: v2/guide/instance.html
- guide/join.html: v2/guide/join.html
- guide/list.html: v2/guide/list.html
- guide/migration-vue-router.html: v2/guide/migration-vue-router.html
- guide/migration-vuex.html: v2/guide/migration-vuex.html
- guide/migration.html: v2/guide/migration.html
- guide/mixins.html: v2/guide/mixins.html
- guide/plugins.html: v2/guide/plugins.html
- guide/reactivity.html: v2/guide/reactivity.html
- guide/render-function.html: v2/guide/render-function.html
- guide/routing.html: v2/guide/routing.html
- guide/single-file-components.html: v2/guide/single-file-components.html
- guide/ssr.html: v2/guide/ssr.html
- guide/state-management.html: v2/guide/state-management.html
- guide/syntax.html: v2/guide/syntax.html
- guide/transitioning-state.html: v2/guide/transitioning-state.html
- guide/transitions.html: v2/guide/transitions.html
- guide/unit-testing.html: v2/guide/unit-testing.html
- examples/commits.html: v2/examples/commits.html
- examples/elastic-header.html: v2/examples/elastic-header.html
- examples/firebase.html: v2/examples/firebase.html
- examples/grid-component.html: v2/examples/grid-component.html
- examples/hackernews.html: v2/examples/hackernews.html
- examples/index.html: v2/examples/index.html
- examples/modal.html: v2/examples/modal.html
- examples/select2.html: v2/examples/select2.html
- examples/svg.html: v2/examples/svg.html
- examples/todomvc.html: v2/examples/todomvc.html
- examples/tree-view.html: v2/examples/tree-view.html
diff --git a/_scripts/pre-deploy.js b/_scripts/pre-deploy.js
deleted file mode 100644
index bf435118ed..0000000000
--- a/_scripts/pre-deploy.js
+++ /dev/null
@@ -1,61 +0,0 @@
-// udpate to latest built files of Vue
-require('./sync-sponsors')
-
-const fs = require('fs')
-const zlib = require('zlib')
-const axios = require('axios')
-const execSync = require('child_process').execSync
-
-const themeconfPath = 'themes/vue/_config.yml'
-const installPath = 'src/v2/guide/installation.md'
-const themeconfig = fs.readFileSync(themeconfPath, 'utf-8')
-const installation = fs.readFileSync(installPath, 'utf-8')
-
-// get latest Vue version
-console.log(`Checking latest Vue version...`)
-const localVersion = themeconfig.match(/vue_version: (.*)/)[1]
-const version = execSync('npm view vue@v2-latest version').toString().trim()
-
-if (localVersion === version) {
- console.log(`Version is up-to-date.`)
- process.exit(0)
-}
-
-console.log(`Latest version: ${version}. Downloading dist files...`)
-
-// replace version in theme config
-fs.writeFileSync(
- themeconfPath,
- themeconfig.replace(/vue_version: .*/, 'vue_version: ' + version)
-)
-
-// grab it from unpkg
-Promise.all([download(`vue.js`), download(`vue.min.js`)])
- .then(([devSize, prodSize]) => {
- // replace installation page version and size
- fs.writeFileSync(
- installPath,
- installation
- .replace(/vue_version: .*/, 'vue_version: ' + version)
- .replace(/gz_size:.*/g, `gz_size: "${prodSize}"`)
- .replace(/\/vue@[\d\.]+/g, `/vue@${version}`)
- )
- console.log(
- `\nSuccessfully updated Vue version (${version}) and gzip file size (${prodSize}kb).\n`
- )
- })
- .catch((err) => {
- console.error(err)
- process.exit(1)
- })
-
-function download(file) {
- return axios({
- url: `http://unpkg.com/vue@${version}/dist/${file}`,
- method: 'get'
- }).then((res) => {
- fs.writeFileSync(`themes/vue/source/js/${file}`, res.data)
- const zipped = zlib.gzipSync(Buffer.from(res.data))
- return (zipped.length / 1024).toFixed(2)
- })
-}
diff --git a/_scripts/sync-sponsors.js b/_scripts/sync-sponsors.js
deleted file mode 100644
index 60c726da62..0000000000
--- a/_scripts/sync-sponsors.js
+++ /dev/null
@@ -1,18 +0,0 @@
-// sync latest data from sponsor.vuejs.org
-const fs = require('fs')
-const path = require('path')
-const axios = require('axios')
-const yaml = require('js-yaml')
-
-const configPath = path.resolve(__dirname, '../themes/vue/_config.yml')
-
-;(async () => {
- const { data } = await axios(`https://sponsors.vuejs.org/data.json`)
- const yml = yaml.dump(data)
- const config = fs.readFileSync(configPath, 'utf-8')
- const updated = config.replace(
- /(# START SPONSORS)[^]*(# END SPONSORS)/,
- `$1\n${yml}$2`
- )
- fs.writeFileSync(configPath, updated)
-})()
diff --git a/api/index.html b/api/index.html
new file mode 100644
index 0000000000..e42ff377e5
--- /dev/null
+++ b/api/index.html
@@ -0,0 +1,3 @@
+Redirecting...
\ No newline at end of file
diff --git a/archives/2014/03/index.html b/archives/2014/03/index.html
new file mode 100644
index 0000000000..8da0b76784
--- /dev/null
+++ b/archives/2014/03/index.html
@@ -0,0 +1,531 @@
+
+
+
+
+
+ Vue.js
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+