Vue.js v2.0.0-beta.2 发布,一个构建数据驱动的 web 界面的库

jopen 8年前
   <p style="text-align: center;"><img alt="" src="https://simg.open-open.com/show/1f02a7efb50dcca3bb1e01e5ef4f8d97.png" /></p>    <p>Vue.js(读音 /vjuː/, 类似于 view)是一个构建数据驱动的 web 界面的库。Vue.js 的目标是通过尽可能简单的 API 实现响应的数据绑定和组合的视图组件。</p>    <p>Vue.js 自身不是一个全能框架——它只聚焦于视图层。因此它非常容易学习,非常容易与其它库或已有项目整合。另一方面,在与相关工具和支持库一起使用时,Vue.js 也能完美地驱动复杂的单页应用。</p>    <p>如果你喜欢下面这些,那你一定会喜欢 Vue.js:</p>    <ul>     <li>可扩展的数据绑定机制</li>     <li>原生对象即模型</li>     <li>简洁明了的 API</li>     <li>组件化 UI 构建</li>     <li>多个轻量库搭配使用</li>    </ul>    <p style="text-align: center;"><img alt="" src="https://simg.open-open.com/show/b34b5ccc53962c052f47eb0e71aa1690.png" /></p>    <p style="text-align: center;"><strong>10 秒钟看懂 Vue.js</strong></p>    <p style="text-align: center;"><img alt="" src="https://simg.open-open.com/show/82a4e3be0ecdc5e00b7cd2322560c91b.png" /></p>    <h2>更新日志</h2>    <h3>重大更改</h3>    <h3>Transition API Change</h3>    <p>Unfortunately, we have to make some breaking changes to the transition API to ensure it works as expected in all cases when combined with the virtual-dom rendering layer. The good news is that the new API makes transition effects more declarative and flexible, and brings in a few new features.</p>    <ul>     <li> <p>The <code><transition></code> component</p> <p>All single-element transition effects are now applied by wrapping the target element/component with the <code><transition></code> built-in component. This is an abstract component, which means it does not render an extra DOM element, nor does it show up in the inspected component hierarchy. It simply applies the transition behavior to the wrapped content inside.</p> <p>The simplest usage example:</p> <pre>  <transition>    <div v-if="ok">toggled content</div>  </transition></pre> <p>The component defines a number of props and events that maps directly to the old transition definition options:</p> <p><strong>Props</strong></p>      <ul>       <li> <p><strong>name: String</strong></p> <p>Used to automatically generate transition CSS class names. e.g. <code>name: 'fade'</code> will auto expand to <code>.fade-enter</code>, <code>.fade-enter-active</code>, etc. Defaults to <code>"v"</code>.</p> </li>       <li> <p><strong>appear: Boolean</strong></p> <p>Whether to apply transition on initial render. Defaults to <code>false</code>.</p> </li>       <li> <p><strong>css: Boolean</strong></p> <p>Whether to apply CSS transition classes. Defaults to <code>true</code>. If set to <code>false</code>, will only trigger JavaScript hooks registered via component events.</p> </li>       <li> <p><strong>mode: String</strong></p> <p>Controls the timing sequence of leaving/entering transitions. Available modes are <code>"out-in"</code>and <code>"in-out"</code>; defaults to simultaneous.</p> </li>       <li> <p><strong>enterClass, leaveClass, enterActiveClass, leaveActiveClass, appearClass, appearActiveClass: String</strong></p> <p>Individually configure transition CSS classes.</p> </li>      </ul> <p>Example applying transition to dynamic components:</p> <pre>  <transition name="fade" mode="out-in" appear>    <component :is="view"></component>  </transition></pre> <p><strong>Events</strong></p> <p>Corresponds to the JavaScript hooks available in 1.x API.</p>      <ul>       <li><strong>before-enter</strong></li>       <li><strong>enter</strong></li>       <li><strong>after-enter</strong></li>       <li><strong>before-leave</strong></li>       <li><strong>leave</strong></li>       <li><strong>after-leave</strong></li>       <li><strong>before-appear</strong></li>       <li><strong>appear</strong></li>       <li><strong>after-appear</strong></li>      </ul> <p>Example:</p> <pre>  <transition @after-enter="transitionComplete">    <div v-show="ok">toggled content</div>  </transition></pre> <p>When the entering transition completes, the component's <code>transitionComplete</code> method will be called with the transitioned DOM element as the argument.</p> <p><strong>Difference from beta.1</strong></p> <p>The second <code>vm</code> argument has been removed, since now the hooks must be component methods and naturally has access to the owner component's <code>this</code> context. For <code>enter</code> and <code>leave</code> hooks, the presence of <code>cb</code> as the second argument indicates the user wants explicit control of the ending timing of the transition.</p> </li>     <li> <p>The <code><transition-group></code> component</p> <p>All multi-element transition effects are now applied by wrapping the elements with the <code><transition-group></code> built-in component. It exposes the same props and events as <code><transition></code> does. The difference being that:</p>      <ol>       <li> <p>Unlike <code><transition></code>, <code><transition-group></code> renders a real DOM element. By default it renders a<code><span></code>, and you can configure what element is should render via the <code>tag</code> prop. You can also use it with the <code>is</code> attribute, e.g. <code><ul is="transition-group"></code>.</p> </li>       <li> <p><code><transition-group></code> does not support the <code>mode</code> prop.</p> </li>       <li> <p>Every child in a <code><transition-group></code> must be <strong>uniquely keyed</strong>.</p> </li>      </ol> <p>Example:</p> <pre>  <transition-group tag="ul" name="slide">    <li v-for="item in items" :key="item.id">      {{ item.text }}    </li>  </transition-group></pre> <p><strong>Moving Transitions</strong></p> <p><code><transition-group></code> supports <strong>moving transitions</strong> via CSS transform. When a child's position on screen has changed after an updated, it will get applied a moving CSS class (auto generated from the <code>name</code> prop or configured with the <code>moveClass</code> prop). If the CSS <code>transform</code> property is "transition-able" when the moving class is applied, the element will be smoothly animated to its destination using the <a href="/misc/goto?guid=4958992201826355074">FLIP technique</a>.</p> <p>See a <a href="/misc/goto?guid=4958992201924271093">live demo</a> here.</p> </li>     <li> <p>Creating Reusable Transitions</p> <p>Now that transitions are applied via components, they are no longer considered an asset type, so the global <code>Vue.transition()</code> method and the <code>transition</code> option are both deprecated. You can just configure the transition inline with component props and events. But how do we create reusable transition effects now, especially those with custom JavaScript hooks? Well, the answer is creating your own transition components (they are particularly suitable as functional components):</p> <pre>  Vue.component('fade', {    functional: true,    render (createElement, { children }) {      const data = {        props: {          name: 'fade'        },        on: {          enter () { console.log('enter') },          leave () { console.log('leave') }        }      }      return createElement('transition', data, children)    }  })</pre> <p>You can then use it like this:</p> <pre>  <fade>    <div v-if="ok">toggled content</div>  </fade></pre> </li>    </ul>    <h3>Bug修复</h3>    <ul>     <li><a href="/misc/goto?guid=4958992202016610443">#3259</a> fix slot names incorrectly passed down to nested children</li>     <li>Fix incorrect component warning for <code><body></code> and <code><aside></code> (<a href="/misc/goto?guid=4958992202114167657">@tommyZZM</a>)</li>    </ul>    <h2>下载</h2>    <ul>     <li><a href="/misc/goto?guid=4958992202202849587" rel="nofollow"><strong>Source code</strong> (zip)</a></li>     <li><a href="/misc/goto?guid=4958992202299470594" rel="nofollow"><strong>Source code</strong> (tar.gz)</a></li>    </ul>