atom.xml

<?xml version="1.0" encoding="utf-8"?>
<feed xmlns="http://www.w3.org/2005/Atom">
  <title>Vue.js</title>
  
  <link href="/atom.xml" rel="self"/>
  
  <link href="http://vuejs.org/"/>
  <updated>2016-08-13T18:01:13.000Z</updated>
  <id>http://vuejs.org/</id>
  
  <author>
    <name>Evan You</name>
    
  </author>
  
  <generator uri="http://hexo.io/">Hexo</generator>
  
  <entry>
    <title>Announcing Vue.js 2.0</title>
    <link href="http://vuejs.org/2016/04/27/announcing-2.0/"/>
    <id>http://vuejs.org/2016/04/27/announcing-2.0/</id>
    <published>2016-04-27T11:33:00.000Z</published>
    <updated>2016-08-13T18:01:13.000Z</updated>
    
    <content type="html"><![CDATA[<p>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!</p>
<a id="more"></a>
<h2 id="Even-Leaner-Even-Faster"><a href="#Even-Leaner-Even-Faster" class="headerlink" title="Even Leaner, Even Faster"></a>Even Leaner, Even Faster</h2><p>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 <a href="https://github.com/paldepind/snabbdom" target="_blank" rel="external">Snabbdom</a>) that improves initial rendering speed and memory consumption by up to 2~4x in most scenarios (check out <a href="https://github.com/vuejs/vue/tree/next/benchmarks" target="_blank" rel="external">these benchmarks</a>). 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.</p>
<h2 id="Not-Your-Average-Virtual-DOM"><a href="#Not-Your-Average-Virtual-DOM" class="headerlink" title="Not Your Average Virtual-DOM"></a>Not Your Average Virtual-DOM</h2><p>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 <code>shouldComponentUpdate</code> or immutable data structures - <strong>it just works</strong>.</p>
<p>In addition, Vue 2.0 applies some advanced optimizations during the template-to-virtual-DOM compilation phase:</p>
<ol>
<li><p>It detects static class names and attributes so that they are never diffed after the initial render.</p>
</li>
<li><p>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.</p>
</li>
</ol>
<p>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.</p>
<p>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.</p>
<p>With these techniques combined, Vue 2.0 ensures blazing fast performance in every possible scenario while requiring minimal optimization efforts from the developer.</p>
<h2 id="Templates-JSX-or-Hyperscript"><a href="#Templates-JSX-or-Hyperscript" class="headerlink" title="Templates, JSX, or Hyperscript?"></a>Templates, JSX, or Hyperscript?</h2><p>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.</p>
<p>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.</p>
<p>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 <code>template</code> option, just replace it with a <code>render</code> function. You can even embed render functions in your templates using the special <code>&lt;render&gt;</code> tag! The best of both worlds, in the same framework.</p>
<h2 id="Streaming-Server-side-Rendering"><a href="#Streaming-Server-side-Rendering" class="headerlink" title="Streaming Server-side Rendering"></a>Streaming Server-side Rendering</h2><p>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.</p>
<h2 id="Unlocking-More-Possibilities"><a href="#Unlocking-More-Possibilities" class="headerlink" title="Unlocking More Possibilities"></a>Unlocking More Possibilities</h2><p>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 <a href="http://alibaba.github.io/weex/" target="_blank" rel="external">weex</a> 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!</p>
<h2 id="Compatibility-and-What-to-Expect-Next"><a href="#Compatibility-and-What-to-Expect-Next" class="headerlink" title="Compatibility and What to Expect Next"></a>Compatibility and What to Expect Next</h2><p>Vue.js 2.0 is still in pre-alpha, but you can checkout the source code <a href="https://github.com/vuejs/vue/tree/next/" target="_blank" rel="external">here</a>. Despite being a full rewrite, the API is largely compatible with 1.0 with the exception of some intentional deprecations. Check out <a href="https://github.com/vuejs/vue/tree/next/examples" target="_blank" rel="external">the same official examples written in 2.0</a> - you will see that not much has changed!</p>
<p>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 <a href="https://github.com/vuejs/vue/wiki/2.0-features" target="_blank" rel="external">here</a>. 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.</p>
<p>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.</p>
<p>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!</p>
]]></content>
    
    <summary type="html">
    
      &lt;p&gt;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!&lt;/p&gt;
    
    </summary>
    
    
  </entry>
  
  <entry>
    <title>March 2016 Update</title>
    <link href="http://vuejs.org/2016/03/14/march-update/"/>
    <id>http://vuejs.org/2016/03/14/march-update/</id>
    <published>2016-03-14T17:45:00.000Z</published>
    <updated>2016-08-13T18:01:13.000Z</updated>
    
    <content type="html"><![CDATA[<h2 id="Growing-Community"><a href="#Growing-Community" class="headerlink" title="Growing Community"></a>Growing Community</h2><p>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 <a href="http://www.meetup.com/London-Vue-js-Meetup/" target="_blank" rel="external">London Vue.js Meetup</a> and the first <a href="http://www.meetup.com/Vuejs-Paris/?scroll=true" target="_blank" rel="external">Paris Vue.js Meetup</a>! A big shoutout to the awesome organizers: <a href="https://twitter.com/JackBarham" target="_blank" rel="external">Jack</a>, <a href="https://twitter.com/onejamesbrowne/" target="_blank" rel="external">James</a> and <a href="https://twitter.com/posva/" target="_blank" rel="external">Eduardo</a>.</p>
<a id="more"></a>
<p>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 :)</p>
<h2 id="Cool-Things-Being-Built"><a href="#Cool-Things-Being-Built" class="headerlink" title="Cool Things Being Built"></a>Cool Things Being Built</h2><p>More and more amazing things are being built with Vue. There are products like <a href="https://pagekit.com/" target="_blank" rel="external">PageKit</a>, Laravel Spark (coming soon) and <a href="https://v2.statamic.com/" target="_blank" rel="external">Statamic</a>, sleek apps like <a href="http://koel.phanan.net/" target="_blank" rel="external">Koel</a> and <a href="https://github.com/Zhangdroid/Gokotta" target="_blank" rel="external">Gokotta</a>, UI components like <a href="http://yuche.github.io/vue-strap/" target="_blank" rel="external">VueStrap</a> and <a href="http://posva.net/vue-mdl/" target="_blank" rel="external">Vue-MDL</a>, and smooth, interactive experiences like <a href="https://adblitz.withyoutube.com" target="_blank" rel="external">YouTube Adblitz</a> and even the <a href="https://newsfeed.fb.com/" target="_blank" rel="external">Facebook NewsFeed Marketing Site</a>!</p>
<p>There are many other great projects - too many to be listed here - but you can check them all out in <a href="https://github.com/vuejs/awesome-vue" target="_blank" rel="external">awesome-vue</a>. If you’ve built great things with Vue, you should also add them to the list!</p>
<h2 id="A-New-Vision-For-the-Project"><a href="#A-New-Vision-For-the-Project" class="headerlink" title="A New Vision For the Project"></a>A New Vision For the Project</h2><p>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 <a href="https://github.com/vuejs/vuex" target="_blank" rel="external">Vuex</a>, <a href="https://github.com/vuejs/vue-devtools" target="_blank" rel="external">vue-devtools</a> and the official <a href="https://github.com/vuejs-templates/webpack" target="_blank" rel="external">Webpack project boilerplate</a>. The next step is a new release for <a href="https://github.com/vuejs/vue-router" target="_blank" rel="external">vue-router</a>, and better documentation/examples demonstrating how Vue.js core, Vuex and vue-router work together in a large single page application.</p>
<p>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.</p>
<h2 id="Vue-js-needs-your-help"><a href="#Vue-js-needs-your-help" class="headerlink" title="Vue.js needs your help!"></a>Vue.js needs your help!</h2><p>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!</p>
<h3 id="Looking-for-collaborators"><a href="#Looking-for-collaborators" class="headerlink" title="Looking for collaborators"></a>Looking for collaborators</h3><p>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 <a href="https://docs.google.com/forms/d/1SgDgKZqyivEf5xl0EOWNfs68Xy3f4oBzLXIlwlS0BIs/viewform" target="_blank" rel="external">here</a>.</p>
<h3 id="Looking-for-sponsors"><a href="#Looking-for-sponsors" class="headerlink" title="Looking for sponsors"></a>Looking for sponsors</h3><p>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.</p>
<p>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.</p>
<p>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 :)</p>
<p>In either case, you can provide recurring funding through Vue’s <a href="https://www.patreon.com/evanyou" target="_blank" rel="external">Patreon campaign</a>, or provide one-time donations via <a href="https://www.paypal.me/evanyou" target="_blank" rel="external">PayPal</a>. 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!</p>
]]></content>
    
    <summary type="html">
    
      &lt;h2 id=&quot;Growing-Community&quot;&gt;&lt;a href=&quot;#Growing-Community&quot; class=&quot;headerlink&quot; title=&quot;Growing Community&quot;&gt;&lt;/a&gt;Growing Community&lt;/h2&gt;&lt;p&gt;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 &lt;a href=&quot;http://www.meetup.com/London-Vue-js-Meetup/&quot;&gt;London Vue.js Meetup&lt;/a&gt; and the first &lt;a href=&quot;http://www.meetup.com/Vuejs-Paris/?scroll=true&quot;&gt;Paris Vue.js Meetup&lt;/a&gt;! A big shoutout to the awesome organizers: &lt;a href=&quot;https://twitter.com/JackBarham&quot;&gt;Jack&lt;/a&gt;, &lt;a href=&quot;https://twitter.com/onejamesbrowne/&quot;&gt;James&lt;/a&gt; and &lt;a href=&quot;https://twitter.com/posva/&quot;&gt;Eduardo&lt;/a&gt;.&lt;/p&gt;
    
    </summary>
    
    
  </entry>
  
  <entry>
    <title>Common Beginner Gotchas</title>
    <link href="http://vuejs.org/2016/02/06/common-gotchas/"/>
    <id>http://vuejs.org/2016/02/06/common-gotchas/</id>
    <published>2016-02-06T09:00:00.000Z</published>
    <updated>2016-08-13T18:01:13.000Z</updated>
    
    <content type="html"><![CDATA[<p>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!</p>
<a id="more"></a>
<h3 id="Why-isn’t-the-DOM-updating"><a href="#Why-isn’t-the-DOM-updating" class="headerlink" title="Why isn’t the DOM updating?"></a>Why isn’t the DOM updating?</h3><p>Most of the time, when you change a Vue instance’s data, the view updates. But there are two edge cases:</p>
<ol>
<li><p>When you are <strong>adding a new property</strong> 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 <a href="/api/#Vue-set"><code>Vue.set</code></a> or <a href="/api/#Vue-delete"><code>Vue.delete</code></a> methods.</p>
</li>
<li><p>When you modify an Array by directly setting an index (e.g. <code>arr[0] = val</code>) or modifying its <code>length</code> 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 <code>arr.$set(index, value)</code> which is just syntax sugar for <code>arr.splice(index, 1, value)</code>.</p>
</li>
</ol>
<p>Further reading: <a href="/guide/reactivity.html">Reactivity in Depth</a> and <a href="http://vuejs.org/guide/list.html#Array-Change-Detection">Array Change Detection</a>.</p>
<h3 id="When-is-the-DOM-updated"><a href="#When-is-the-DOM-updated" class="headerlink" title="When is the DOM updated?"></a>When is the DOM updated?</h3><p>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 <code>Vue.nextTick</code> right after you modify the data. The callback function you pass to it will be called once the queue has been flushed.</p>
<p>Further reading: <a href="/guide/reactivity.html#Async-Update-Queue">Async Update Queue</a>.</p>
<h3 id="Why-does-data-need-to-be-a-function"><a href="#Why-does-data-need-to-be-a-function" class="headerlink" title="Why does data need to be a function?"></a>Why does <code>data</code> need to be a function?</h3><p>In the basic examples, we declare the <code>data</code> directly as a plain object. This is because we are creating only a single instance with <code>new Vue()</code>. However, when defining a <strong>component</strong>, <code>data</code> 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 <code>data</code>, that same object will be <strong>shared by reference</strong> across all instance created! By providing a <code>data</code> function, every time a new instance is created, we can simply call it to return a fresh copy of the initial data.</p>
<p>Further reading: <a href="/guide/components.html#Component-Option-Caveats">Component Option Caveats</a>.</p>
<h3 id="HTML-case-insensitivity"><a href="#HTML-case-insensitivity" class="headerlink" title="HTML case insensitivity"></a>HTML case insensitivity</h3><p>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 <code>:myProp=&quot;123&quot;</code> will be matched as <code>:myprop=&quot;123&quot;</code>. As a rule of thumb, you should use camelCase in JavaScript and kebab-case in templates. For example a prop defined in JavaScript as <code>myProp</code> should be bound in templates as <code>:my-prop</code>.</p>
<p>Further reading: <a href="http://vuejs.org/guide/components.html#camelCase-vs-kebab-case">camelCase vs. kebab-case</a>.</p>
<p>We are also discussing the possibility of eliminating this inconsistency by resolving props and components in a case-insensitive manner. Join the conversation <a href="https://github.com/vuejs/vue/issues/2308" target="_blank" rel="external">here</a>.</p>
]]></content>
    
    <summary type="html">
    
      &lt;p&gt;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!&lt;/p&gt;
    
    </summary>
    
    
  </entry>
  
  <entry>
    <title>Announcing vue-cli</title>
    <link href="http://vuejs.org/2015/12/28/vue-cli/"/>
    <id>http://vuejs.org/2015/12/28/vue-cli/</id>
    <published>2015-12-27T23:00:00.000Z</published>
    <updated>2016-08-13T18:01:13.000Z</updated>
    
    <content type="html"><![CDATA[<p>Recently there has been a lot of <a href="https://medium.com/@ericclemmons/javascript-fatigue-48d4011b6fc4#.chg95e5p6" target="_blank" rel="external">discussion around the tooling hurdle</a> 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 <code>&lt;script&gt;</code> 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 <a href="https://github.com/vuejs/vue-cli" target="_blank" rel="external">vue-cli</a>, a simple CLI tool to help you quickly scaffold Vue.js projects with opinionated, battery-included build setups.</p>
<a id="more"></a>
<h3 id="Just-The-Scaffolding"><a href="#Just-The-Scaffolding" class="headerlink" title="Just The Scaffolding"></a>Just The Scaffolding</h3><p>The usage looks like this:</p>
<figure class="highlight bash"><table><tr><td class="code"><pre><div class="line">npm install -g vue-cli</div><div class="line">vue init webpack my-project</div><div class="line"><span class="comment"># answer prompts</span></div><div class="line"><span class="built_in">cd</span> my-project</div><div class="line">npm install</div><div class="line">npm run dev <span class="comment"># tada!</span></div></pre></td></tr></table></figure>
<p>All the CLI does is pulling down templates from the <a href="https://github.com/vuejs-templates" target="_blank" rel="external">vuejs-templates</a> organization on GitHub. Dependencies are handled via NPM, and build tasks are simply NPM scripts.</p>
<h3 id="Official-Templates"><a href="#Official-Templates" class="headerlink" title="Official Templates"></a>Official Templates</h3><p>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.</p>
<p>All official project templates are repos in the <a href="https://github.com/vuejs-templates" target="_blank" rel="external">vuejs-templates organization</a>. When a new template is added to the organization, you will be able to run <code>vue init &lt;template-name&gt; &lt;project-name&gt;</code> to use that template. You can also run <code>vue list</code> to see all available official templates.</p>
<p>Current available templates include:</p>
<ul>
<li><p><a href="https://github.com/vuejs-templates/browserify" target="_blank" rel="external">browserify</a> - A full-featured Browserify + vueify setup with hot-reload, linting &amp; unit testing.</p>
</li>
<li><p><a href="https://github.com/vuejs-templates/browserify-simple" target="_blank" rel="external">browserify-simple</a> - A simple Browserify + vueify setup for quick prototyping.</p>
</li>
<li><p><a href="https://github.com/vuejs-templates/webpack" target="_blank" rel="external">webpack</a> - A full-featured Webpack + vue-loader setup with hot reload, linting, testing &amp; css extraction.</p>
</li>
<li><p><a href="https://github.com/vuejs-templates/webpack-simple" target="_blank" rel="external">webpack-simple</a> - A simple Webpack + vue-loader setup for quick prototyping.</p>
</li>
</ul>
<h3 id="Bring-Your-Own-Setup"><a href="#Bring-Your-Own-Setup" class="headerlink" title="Bring Your Own Setup"></a>Bring Your Own Setup</h3><p>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 <code>vue-cli</code> too, because <code>vue-cli</code> can work directly on GitHub repos:</p>
<figure class="highlight bash"><table><tr><td class="code"><pre><div class="line">vue init username/repo my-project</div></pre></td></tr></table></figure>
<h3 id="Vue-Components-Everywhere"><a href="#Vue-Components-Everywhere" class="headerlink" title="Vue Components Everywhere"></a>Vue Components Everywhere</h3><p>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 <code>*.vue</code> single file components. This means any third party Vue components written as valid <code>*.vue</code> files can be shared among projects using these setups, and simply be distributed over NPM - let’s create more reusable components!</p>
]]></content>
    
    <summary type="html">
    
      &lt;p&gt;Recently there has been a lot of &lt;a href=&quot;https://medium.com/@ericclemmons/javascript-fatigue-48d4011b6fc4#.chg95e5p6&quot;&gt;discussion around the tooling hurdle&lt;/a&gt; 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 &lt;code&gt;&amp;lt;script&amp;gt;&lt;/code&gt; 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 &lt;a href=&quot;https://github.com/vuejs/vue-cli&quot;&gt;vue-cli&lt;/a&gt;, a simple CLI tool to help you quickly scaffold Vue.js projects with opinionated, battery-included build setups.&lt;/p&gt;
    
    </summary>
    
    
  </entry>
  
  <entry>
    <title>Why Vue.js doesn&#39;t support templateURL</title>
    <link href="http://vuejs.org/2015/10/28/why-no-template-url/"/>
    <id>http://vuejs.org/2015/10/28/why-no-template-url/</id>
    <published>2015-10-28T09:56:00.000Z</published>
    <updated>2016-08-13T18:01:13.000Z</updated>
    
    <content type="html"><![CDATA[<p>A very common question from new Vue users, especially those who used Angular before, is “can I have <code>templateURL</code>?”. I have answered this so many times and I figure it’s better to write something about it.</p>
<a id="more"></a>
<p>In Angular, <code>templateURL</code> or <code>ng-include</code> 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.</p>
<p>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.</p>
<p>Second, because <code>templateURL</code> 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 <code>templateURL</code> 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 <code>$templateCache</code> - but that shows us a build step is, in fact, inevitable for any serious frontend development.</p>
<p>So, without <code>templateURL</code>, how do we deal with the development experience problem? Writing templates as inline JavaScript strings is terrible, faking templates with <code>&lt;script type=&quot;x/template&quot;&gt;</code> also feels like a hack. Well, maybe it’s time to up the game a bit and use a proper module bundler like <a href="http://webpack.github.io/" target="_blank" rel="external">Webpack</a> or <a href="http://browserify.org/" target="_blank" rel="external">Browserify</a>. 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 <a href="http://vuejs.org/guide/application.html#Single-File-Components">Vue components in a single file</a>, 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.</p>
<p>Finally, Vue does allow you to <a href="http://vuejs.org/guide/components.html#Async-Components">lazy load your components</a>, 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.</p>
<p>Think in components, not templates.</p>
]]></content>
    
    <summary type="html">
    
      &lt;p&gt;A very common question from new Vue users, especially those who used Angular before, is “can I have &lt;code&gt;templateURL&lt;/code&gt;?”. I have answered this so many times and I figure it’s better to write something about it.&lt;/p&gt;
    
    </summary>
    
    
  </entry>
  
  <entry>
    <title>Vue.js 1.0.0 Released</title>
    <link href="http://vuejs.org/2015/10/26/1.0.0-release/"/>
    <id>http://vuejs.org/2015/10/26/1.0.0-release/</id>
    <published>2015-10-26T09:00:00.000Z</published>
    <updated>2016-08-13T18:01:13.000Z</updated>
    
    <content type="html"><![CDATA[<blockquote>
<p>Hi HN! If you are not familiar with Vue.js, you might want to read this <a href="http://blog.evanyou.me/2015/10/25/vuejs-re-introduction/" target="_blank" rel="external">blog post</a> for a higher level overview.</p>
</blockquote>
<p>After 300+ commits, 8 alphas, 4 betas and 2 release candidates, today I am very proud to announce the release of <a href="https://github.com/vuejs/vue/releases/tag/1.0.0" target="_blank" rel="external">Vue.js 1.0.0 Evangelion</a>! 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.</p>
<a id="more"></a>
<h3 id="Improved-Template-Syntax"><a href="#Improved-Template-Syntax" class="headerlink" title="Improved Template Syntax"></a>Improved Template Syntax</h3><p>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 <code>v-on</code> and <code>v-bind</code>:</p>
<figure class="highlight html"><table><tr><td class="code"><pre><div class="line"><span class="comment">&lt;!-- short for v-bind:href --&gt;</span></div><div class="line"><span class="tag">&lt;<span class="name">a</span> <span class="attr">:href</span>=<span class="string">"someURL"</span>&gt;</span><span class="tag">&lt;/<span class="name">a</span>&gt;</span></div><div class="line"></div><div class="line"><span class="comment">&lt;!-- short for v-on:click --&gt;</span></div><div class="line"><span class="tag">&lt;<span class="name">button</span> @<span class="attr">click</span>=<span class="string">"onClick"</span>&gt;</span><span class="tag">&lt;/<span class="name">button</span>&gt;</span></div></pre></td></tr></table></figure>
<p>When used on a child component, <code>v-on</code> listens for custom events and <code>v-bind</code> can be used to bind props. The shorthands using child components very succinct:</p>
<figure class="highlight html"><table><tr><td class="code"><pre><div class="line"><span class="tag">&lt;<span class="name">item-list</span></span></div><div class="line">  <span class="attr">:items</span>=<span class="string">"items"</span></div><div class="line">  @<span class="attr">ready</span>=<span class="string">"onItemsReady"</span></div><div class="line">  @<span class="attr">update</span>=<span class="string">"onItemsUpdate"</span>&gt;</div><div class="line"><span class="tag">&lt;/<span class="name">item-list</span>&gt;</span></div></pre></td></tr></table></figure>
<h3 id="API-Cleanup"><a href="#API-Cleanup" class="headerlink" title="API Cleanup"></a>API Cleanup</h3><p>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.</p>
<p>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 <code>inherit</code> option is also removed, because it too often leads to tightly coupled components that are hard to refactor.</p>
<h3 id="Faster-Initial-Rendering"><a href="#Faster-Initial-Rendering" class="headerlink" title="Faster Initial Rendering"></a>Faster Initial Rendering</h3><p>1.0 replaces the old <code>v-repeat</code> directive with <code>v-for</code>. In addition to providing the same functionality and more intuitive scoping, <code>v-for</code> provides up to <strong>100%</strong> initial render performance boost when rendering large lists and tables!</p>
<h3 id="More-Powerful-Tooling"><a href="#More-Powerful-Tooling" class="headerlink" title="More Powerful Tooling"></a>More Powerful Tooling</h3><p>There are also exciting things going on outside of Vue.js core - <a href="https://github.com/vuejs/vue-loader" target="_blank" rel="external">vue-loader</a> and <a href="https://github.com/vuejs/vueify" target="_blank" rel="external">vueify</a> have received major upgrades including:</p>
<ul>
<li><p>Hot component reloading. When a <code>*.vue</code> 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.</p>
</li>
<li><p>Scoped CSS. By simply adding a <code>scoped</code> attribute to your <code>*.vue</code> 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 <strong>does not</strong> leak down to child components nested within it.</p>
</li>
<li><p>ES2015 by default. JavaScript is evolving. You can write much cleaner and expressive code using the latest syntax. <code>vue-loader</code> and <code>vueify</code> now transpiles the JavaScript in your <code>*.vue</code> components out of the box, without the need for extra setup. Write future JavaScript today!</p>
</li>
</ul>
<p>Combined with <a href="https://github.com/vuejs/vue-router" target="_blank" rel="external">vue-router</a>, Vue.js is now more than a library - it provides a solid foundation for building complex SPAs.</p>
<h3 id="What’s-Next"><a href="#What’s-Next" class="headerlink" title="What’s Next?"></a>What’s Next?</h3><p>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:</p>
<ol>
<li><p>Improving <code>vue-router</code> and make it production ready.</p>
</li>
<li><p>Streamlining the developer experience, e.g. a better devtool and a CLI for scaffolding Vue.js projects and components.</p>
</li>
<li><p>Providing more learning resources such as tutorials and examples.</p>
</li>
</ol>
]]></content>
    
    <summary type="html">
    
      &lt;blockquote&gt;
&lt;p&gt;Hi HN! If you are not familiar with Vue.js, you might want to read this &lt;a href=&quot;http://blog.evanyou.me/2015/10/25/vuejs-re-introduction/&quot;&gt;blog post&lt;/a&gt; for a higher level overview.&lt;/p&gt;
&lt;/blockquote&gt;
&lt;p&gt;After 300+ commits, 8 alphas, 4 betas and 2 release candidates, today I am very proud to announce the release of &lt;a href=&quot;https://github.com/vuejs/vue/releases/tag/1.0.0&quot;&gt;Vue.js 1.0.0 Evangelion&lt;/a&gt;! 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.&lt;/p&gt;
    
    </summary>
    
    
  </entry>
  
  <entry>
    <title>Vue.js 0.12 released!</title>
    <link href="http://vuejs.org/2015/06/11/012-release/"/>
    <id>http://vuejs.org/2015/06/11/012-release/</id>
    <published>2015-06-11T15:37:30.000Z</published>
    <updated>2016-08-13T18:01:13.000Z</updated>
    
    <content type="html"><![CDATA[<p>I’m really excited to announce that <a href="https://github.com/yyx990803/vue/releases/tag/0.12.0" target="_blank" rel="external">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="external">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="external">vuejs/Discussion</a>, or join us in the <a href="https://gitter.im/yyx990803/vue" target="_blank" rel="external">Gitter chat channel</a>.</p>
<a id="more"></a>
<h3 id="More-Consistent-Component-Syntax"><a href="#More-Consistent-Component-Syntax" class="headerlink" title="More Consistent Component Syntax"></a>More Consistent Component Syntax</h3><p>Previously in 0.11 you have two ways to use a Vue.js component: using the <code>v-component</code> directive, or using custom elements. There are also two ways to pass data down to child components: using the <code>v-with</code> directive, or using the <code>paramAttributes</code> 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.</p>
<p>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.</p>
<p>As a result, <code>v-component</code> and <code>v-with</code> have been deprecated in 0.12. <code>paramAttributes</code> has also been renamed to <code>props</code>, which is shorter and cleaner. From now on, most Vue.js components will look like this:</p>
<figure class="highlight html"><table><tr><td class="code"><pre><div class="line"><span class="tag">&lt;<span class="name">my-component</span> <span class="attr">prop</span>=<span class="string">"&#123;&#123;parentData&#125;&#125;"</span>&gt;</span><span class="tag">&lt;/<span class="name">my-component</span>&gt;</span></div></pre></td></tr></table></figure>
<p>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 <a href="/guide/components.html">Component System</a> section of the guide.</p>
<h3 id="Filter-Arguments-Improvements"><a href="#Filter-Arguments-Improvements" class="headerlink" title="Filter Arguments Improvements"></a>Filter Arguments Improvements</h3><p>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.</p>
<p>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.</p>
<p>This means the usage of some existing filters will have to change:</p>
<figure class="highlight html"><table><tr><td class="code"><pre><div class="line"><span class="tag">&lt;<span class="name">a</span> <span class="attr">v-on</span>=<span class="string">"keyup: onKeyUp | key 'enter'"</span>&gt;</span><span class="tag">&lt;/<span class="name">a</span>&gt;</span></div><div class="line">&#123;&#123; items.length | pluralize 'item' &#125;&#125;</div></pre></td></tr></table></figure>
<p>But it would make custom filters that rely on dynamic values much easier to write:</p>
<figure class="highlight html"><table><tr><td class="code"><pre><div class="line">&#123;&#123; msg | concat otherMsg &#125;&#125;</div></pre></td></tr></table></figure>
<p>Here the first argument to the <code>concat</code> filter will be the value of <code>this.otherMsg</code>.</p>
<h3 id="Asynchronous-Components"><a href="#Asynchronous-Components" class="headerlink" title="Asynchronous Components"></a>Asynchronous Components</h3><p>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.</p>
<p>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.</p>
<p>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:</p>
<figure class="highlight js"><table><tr><td class="code"><pre><div class="line">Vue.component(<span class="string">'async-example'</span>, <span class="function"><span class="keyword">function</span> (<span class="params">resolve, reject</span>) </span>&#123;</div><div class="line">  setTimeout(<span class="function"><span class="keyword">function</span> (<span class="params"></span>) </span>&#123;</div><div class="line">    resolve(&#123;</div><div class="line">      template: <span class="string">'&lt;div&gt;I am async!&lt;/div&gt;'</span></div><div class="line">    &#125;)</div><div class="line">  &#125;, <span class="number">1000</span>)</div><div class="line">&#125;)</div></pre></td></tr></table></figure>
<p>It is up to you to decide how to load the component from the server, e.g. <code>$.getScript()</code> or require.js; but the recommended usage is to pair it up with Webpack’s <a href="http://webpack.github.io/docs/code-splitting.html" target="_blank" rel="external">Code Splitting feature</a>:</p>
<figure class="highlight js"><table><tr><td class="code"><pre><div class="line">Vue.component(<span class="string">'async-webpack-example'</span>, <span class="function"><span class="keyword">function</span> (<span class="params">resolve, reject</span>) </span>&#123;</div><div class="line">  <span class="comment">// In Webpack AMD like syntax indicates a code split point</span></div><div class="line">  <span class="built_in">require</span>([<span class="string">'./my-async-component'</span>], resolve)</div><div class="line">&#125;)</div></pre></td></tr></table></figure>
<p>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 <a href="https://github.com/vuejs/vue-webpack-example" target="_blank" rel="external">here</a>.</p>
<h3 id="Improved-Transition-System"><a href="#Improved-Transition-System" class="headerlink" title="Improved Transition System"></a>Improved Transition System</h3><p>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.</p>
<p><code>v-repeat</code> now also ships with built-in support for staggering transitions. It is as simple as adding <code>stagger=&quot;100&quot;</code> 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.</p>
<p>For full details on the new transition system, check out the <a href="/guide/transitions.html">updated guide</a>.</p>
<h3 id="Performance-Tuning"><a href="#Performance-Tuning" class="headerlink" title="Performance Tuning"></a>Performance Tuning</h3><p>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 <code>track-by</code> usage, <a href="http://vuejs.github.io/js-repaint-perfs/vue/" target="_blank" rel="external">re-rendering with large, brand new dataset</a> is also comparable to, or even faster than other Virtual-DOM based frameworks.</p>
<h3 id="One-More-Thing…"><a href="#One-More-Thing…" class="headerlink" title="One More Thing…"></a>One More Thing…</h3><p>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>
]]></content>
    
    <summary type="html">
    
      &lt;p&gt;I’m really excited to announce that &lt;a href=&quot;https://github.com/yyx990803/vue/releases/tag/0.12.0&quot;&gt;Vue.js 0.12: Dragon Ball&lt;/a&gt; is finally here! Thanks to everyone who tried out the beta/rc versions and provided feedback / bug reports along the way.&lt;/p&gt;
&lt;p&gt;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 &lt;a href=&quot;https://github.com/yyx990803/vue/releases/tag/0.12.0&quot;&gt;Full Release Note&lt;/a&gt; and updated docs if you are upgrading from 0.11. You can report bugs on GitHub, send questions to &lt;a href=&quot;https://github.com/vuejs/Discussion/issues&quot;&gt;vuejs/Discussion&lt;/a&gt;, or join us in the &lt;a href=&quot;https://gitter.im/yyx990803/vue&quot;&gt;Gitter chat channel&lt;/a&gt;.&lt;/p&gt;
    
    </summary>
    
    
  </entry>
  
  <entry>
    <title>0.11 Component Tips</title>
    <link href="http://vuejs.org/2014/12/08/011-component/"/>
    <id>http://vuejs.org/2014/12/08/011-component/</id>
    <published>2014-12-08T14:02:14.000Z</published>
    <updated>2016-08-13T18:01:13.000Z</updated>
    
    <content type="html"><![CDATA[<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="external">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="external">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>
<a id="more"></a>
<h3 id="Isolated-Scope-and-Data-Passing"><a href="#Isolated-Scope-and-Data-Passing" class="headerlink" title="Isolated Scope and Data Passing"></a>Isolated Scope and Data Passing</h3><p>Starting in 0.11, all child components have isolated scope by default, and the recommended way to control component data access is via <a href="/guide/components.html#Explicit_Data_Passing">Explicit Data Passing</a> using <a href="/api/directives.html#v-with"><code>v-with</code></a> or <a href="/api/options.html#paramAttributes"><code>paramAttributes</code></a>.</p>
<p><code>paramAttributes</code> enables us to write Web Component style templates:</p>
<figure class="highlight js"><table><tr><td class="code"><pre><div class="line">Vue.component(<span class="string">'my-component'</span>, &#123;</div><div class="line">  paramAttributes: [<span class="string">'params'</span>],</div><div class="line">  compiled: <span class="function"><span class="keyword">function</span> (<span class="params"></span>) </span>&#123;</div><div class="line">    <span class="built_in">console</span>.log(<span class="keyword">this</span>.params) <span class="comment">// passed from parent</span></div><div class="line">  &#125;</div><div class="line">&#125;)</div></pre></td></tr></table></figure>
<figure class="highlight html"><table><tr><td class="code"><pre><div class="line"><span class="tag">&lt;<span class="name">my-component</span> <span class="attr">params</span>=<span class="string">"&#123;&#123;params&#125;&#125;"</span>&gt;</span><span class="tag">&lt;/<span class="name">my-component</span>&gt;</span></div></pre></td></tr></table></figure>
<h3 id="Where-Does-It-Belong"><a href="#Where-Does-It-Belong" class="headerlink" title="Where Does It Belong?"></a>Where Does It Belong?</h3><p>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:</p>
<figure class="highlight html"><table><tr><td class="code"><pre><div class="line"><span class="comment">&lt;!-- parent template --&gt;</span></div><div class="line"><span class="tag">&lt;<span class="name">div</span> <span class="attr">v-component</span>=<span class="string">"child"</span> <span class="attr">v-on</span>=<span class="string">"click:onParentClick"</span>&gt;</span></div><div class="line">  <span class="tag">&lt;<span class="name">p</span>&gt;</span>&#123;&#123;parentMessage&#125;&#125;<span class="tag">&lt;/<span class="name">p</span>&gt;</span></div><div class="line"><span class="tag">&lt;/<span class="name">div</span>&gt;</span></div></pre></td></tr></table></figure>
<figure class="highlight html"><table><tr><td class="code"><pre><div class="line"><span class="comment">&lt;!-- child template, with replace: true --&gt;</span></div><div class="line"><span class="tag">&lt;<span class="name">div</span> <span class="attr">v-on</span>=<span class="string">"click:onChildClick"</span>&gt;</span></div><div class="line">  <span class="tag">&lt;<span class="name">h1</span>&gt;</span>&#123;&#123;childMessage&#125;&#125;<span class="tag">&lt;/<span class="name">h1</span>&gt;</span></div><div class="line">  <span class="tag">&lt;<span class="name">content</span>&gt;</span><span class="tag">&lt;/<span class="name">content</span>&gt;</span></div><div class="line"><span class="tag">&lt;/<span class="name">div</span>&gt;</span></div></pre></td></tr></table></figure>
<p>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.</p>
<p>The only exception to the rule is <code>v-with</code> (and <code>paramAttributes</code> which compiles down to <code>v-with</code>), which works in both places - so you don’t need to worry about it too much.</p>
<h3 id="Cleaner-Event-Communication"><a href="#Cleaner-Event-Communication" class="headerlink" title="Cleaner Event Communication"></a>Cleaner Event Communication</h3><p>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.</p>
<p>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 href="/api/directives.html#v-events">a new directive <code>v-events</code></a> has been introduced to enable exactly this behavior.</p>
<p>0.11.4 has already been released, go try it out!</p>
]]></content>
    
    <summary type="html">
    
      &lt;p class=&quot;tip&quot;&gt;Note: this post contains information for the outdated 0.11 version. Please refer to the &lt;a href=&quot;https://github.com/yyx990803/vue/releases&quot;&gt;0.12 release notes&lt;/a&gt; for the changes in the API.&lt;/p&gt;

&lt;p&gt;The release of 0.11 introduced &lt;a href=&quot;https://github.com/yyx990803/vue/blob/master/changes.md&quot;&gt;many changes&lt;/a&gt;, 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.&lt;/p&gt;
    
    </summary>
    
    
  </entry>
  
  <entry>
    <title>Vue.js 0.11 released!</title>
    <link href="http://vuejs.org/2014/11/09/vue-011-release/"/>
    <id>http://vuejs.org/2014/11/09/vue-011-release/</id>
    <published>2014-11-09T08:23:40.000Z</published>
    <updated>2016-08-13T18:01:13.000Z</updated>
    
    <content type="html"><![CDATA[<p>After the long wait, <a href="https://github.com/yyx990803/vue/releases/tag/0.11.0" target="_blank" rel="external">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>
<a id="more"></a>
<p>The 0.11 release introduced many new features and also a fair number of breaking changes, so please carefully read through the <a href="https://github.com/yyx990803/vue/blob/master/changes.md" target="_blank" rel="external">0.11 Change List</a> before upgrading. Aside from the API changes, 0.11 also ships with better <a href="https://codeclimate.com/github/yyx990803/vue" target="_blank" rel="external">code quality</a> and <a href="https://coveralls.io/r/yyx990803/vue" target="_blank" rel="external">test coverage</a>, and is considerably more robust in almost every aspect.</p>
<p>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 <a href="http://legacy.vuejs.org" target="_blank" rel="external">legacy.vuejs.org</a>.</p>
]]></content>
    
    <summary type="html">
    
      &lt;p&gt;After the long wait, &lt;a href=&quot;https://github.com/yyx990803/vue/releases/tag/0.11.0&quot;&gt;Vue.js 0.11 &lt;strong&gt;Cowboy Bebop&lt;/strong&gt;&lt;/a&gt; is finally here! Thanks to everyone who tried out the release candidate versions and provided feedback / bug reports along the way.&lt;/p&gt;
    
    </summary>
    
    
  </entry>
  
  <entry>
    <title>Vue.js 0.10.6, and what&#39;s next</title>
    <link href="http://vuejs.org/2014/07/29/vue-next/"/>
    <id>http://vuejs.org/2014/07/29/vue-next/</id>
    <published>2014-07-28T22:04:55.000Z</published>
    <updated>2016-08-13T18:01:13.000Z</updated>
    
    <content type="html"><![CDATA[<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>
<a id="more"></a>
<ul>
<li>fix <code>v-style</code> error when value is falsy or a number. ( thanks to <a href="https://github.com/dmfilipenko" target="_blank" rel="external">@dmfilipenko</a> )</li>
<li>fix the built-in <code>currency</code> filter error when value is a string ( thanks to <a href="https://github.com/dmfilipenko" target="_blank" rel="external">@dmfilipenko</a> )</li>
<li>fix <code>Vue.require</code> for building with Component v1.0+ ( thanks to <a href="https://github.com/kewah" target="_blank" rel="external">@kewah</a> )</li>
<li>Allow template nodes to be passed as a template option ( thanks to <a href="https://github.com/jordangarcia" target="_blank" rel="external">@jordangarcia</a> )</li>
<li><code>vm.$destroy()</code> now accepts an optional argument <code>noRemove</code>. When passed in as <code>true</code> it will leave the vm’s DOM node intact after the vm is destroyed.</li>
</ul>
<h2 id="Vue-next"><a href="#Vue-next" class="headerlink" title="Vue-next"></a>Vue-next</h2><p>Some of you might have noticed there is a <a href="https://github.com/yyx990803/vue/tree/next" target="_blank" rel="external">next</a> branch in the repo. And yes, I am re-writing Vue.js from scratch. There are two main reasons:</p>
<ul>
<li>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.</li>
<li>Improve general code quality (in particular, <code>compiler.js</code> as of now is a big pile of mess, and comments are not consistent across the codebase.)</li>
</ul>
<p>Take note that the <code>next</code> branch is still in <strong>very</strong> early stage. The internals will change a lot, and when it comes out it <strong>will</strong> 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 <a href="https://github.com/yyx990803/vue/blob/next/changes.md" target="_blank" rel="external"><code>changes.md</code></a>. 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.</p>
<p>Share your thoughts at <a href="https://github.com/vuejs/Discussion/issues" target="_blank" rel="external">vuejs/Discussion</a>.</p>
]]></content>
    
    <summary type="html">
    
      &lt;h2 id=&quot;0-10-6&quot;&gt;&lt;a href=&quot;#0-10-6&quot; class=&quot;headerlink&quot; title=&quot;0.10.6&quot;&gt;&lt;/a&gt;0.10.6&lt;/h2&gt;&lt;p&gt;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.&lt;/p&gt;
    
    </summary>
    
    
  </entry>
  
  <entry>
    <title>Vue.js 0.10 is here!</title>
    <link href="http://vuejs.org/2014/03/22/vuejs-010-release/"/>
    <id>http://vuejs.org/2014/03/22/vuejs-010-release/</id>
    <published>2014-03-22T18:00:13.000Z</published>
    <updated>2016-08-13T18:01:13.000Z</updated>
    
    <content type="html"><![CDATA[<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>
<a id="more"></a>
<p>See the <a href="/guide/installation.html">Installation</a> page for the latest builds.</p>
<h3 id="New"><a href="#New" class="headerlink" title="New"></a>New</h3><ul>
<li>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 <code>v-component=&quot;{{type}}&quot;</code>. <a href="/guide/directives.html#Literal_Directives">Doc</a>.</li>
<li>Attributes listed in the <code>paramAttributes</code> option now accept mustache interpolations too. They will also only be evaluated once.</li>
<li><code>v-repeat</code> now accepts an argument which will be used as the identifier for the wrapped object. This allows more explicit property access in repeaters. <a href="/guide/list.html#Using_an_Identifier">Doc</a>.</li>
<li>Added <code>v-view</code> directive which binds to a string value and dynamically instantiate different components using that string as the component ID. <a href="/api/directives.html#v-view">Doc</a>.</li>
<li>Added <code>filterBy</code> and <code>orderBy</code> filters for <code>v-repeat</code>. <a href="/api/filters.html#filterBy">Doc</a>.</li>
<li>Custom filters that access properties on its <code>this</code> context will be considered <strong>computed filters</strong>. <a href="/guide/custom-filter.html#Filter_Context">Doc</a>.</li>
<li>You can now access the event in <code>v-on</code> handler expressions as <code>$event</code>. Example: <code>&lt;a v-on=&quot;click:handle(&#39;hello&#39;, $event)&quot;&gt;Hello&lt;/a&gt;</code></li>
<li>Interpolation delimiters can now be customized via the <code>delimiters</code> global config option. Example: <code>Vue.config({ delimiters: [&quot;[&quot;, &quot;]&quot;] })</code> will change the matched interpolation tags to <code>[[ ]]</code> for text bindings and <code>[[[ ]]]</code> for html bindings.</li>
</ul>
<h3 id="Changed"><a href="#Changed" class="headerlink" title="Changed"></a>Changed</h3><ul>
<li><code>{{>yield}}</code> syntax has been deprecated. A Web Components spec compatible content insertion mechanism using <code>&lt;content&gt;</code> elements has been introduced. <a href="/guide/components.html#Content_Insertion">Doc</a>.</li>
<li>To use a component as a custom element, the component ID must now contain a hyphen (<code>-</code>). This is consistent with the current custom element spec draft.</li>
<li><code>v-repeat</code> Arrays’ augmented methods have been renamed from <code>set</code> to <code>$set(index, value)</code> and <code>remove</code> to <code>$remove(index | value)</code>. The prefix better differentiates them from native methods. The <code>replace</code> method has been removed.</li>
<li>When iterating over an Object with <code>v-repeat</code>, the object no longer gets a <code>$repeater</code> array. Instead, the object is now augmented with two methods: <code>$add(key, value)</code> and <code>$delete(key)</code>, which will trigger corresponding view updates.</li>
<li><code>v-if</code> 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 <code>v-repeat</code>. Use <code>v-show</code> or the new built-in array filters instead.</li>
<li><code>v-with</code> can no longer be used alone. It now must be used with either <code>v-component</code> or <code>v-view</code>. <code>v-component</code> can also be used as an empty directive just to create a child VM using the default <code>Vue</code> constructor.</li>
<li>Production build now strips all warnings and debug logs. To leverage <code>debug: true</code>, use the development version. The development version now has more detailed warning messages.</li>
</ul>
<h3 id="Fixed"><a href="#Fixed" class="headerlink" title="Fixed"></a>Fixed</h3><ul>
<li><code>event.stopPropagation()</code> and <code>event.preventDefault()</code> inside <code>v-on</code> handlers now work as expected.</li>
<li><code>parent</code> option now works properly when used in <code>Vue.extend</code></li>
<li>Mustache bindings inside <code>&lt;textarea&gt;</code> are now properly interpolated before being set as value.</li>
</ul>
<h3 id="Internal"><a href="#Internal" class="headerlink" title="Internal"></a>Internal</h3><ul>
<li><code>v-component</code>, <code>v-with</code> and <code>v-if</code> have been re-written for a cleaner compile flow.</li>
<li><code>v-repeat</code> 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.</li>
<li><code>template</code> option now directly clones native <code>&lt;template&gt;</code>‘s content when available.</li>
<li>Overall performance improvements for both initialization and rendering.</li>
</ul>
]]></content>
    
    <summary type="html">
    
      &lt;p&gt;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 &lt;code&gt;v-view&lt;/code&gt; directive, array filters, and the option to configure interpolation delimiters. Internally, the codebase has received many refactoring and improvements which makes Vue.js &lt;a href=&quot;http://vuejs.org/perf/&quot;&gt;even faster&lt;/a&gt;.&lt;/p&gt;
    
    </summary>
    
    
  </entry>
  
</feed>