Vue.js v2.0.0-alpha.5 发布,一个构建数据驱动的 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><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> <ul> <li> <p>The <code>render</code> function now receives the component instance's <code>$createElement</code> method as its only argument. This avoids having to aliasing <code>this.$createElement</code> to something less verbose:</p> <pre> Vue.extend({ render (h) { return h('div', null, 'hello!') } })</pre> </li> <li> <p><strong>Functional components:</strong></p> <p>A component can be defined as a stateless functional component with <code>functional: true</code>.</p> <ul> <li>A functional component <strong>has no instance</strong> and is simply a function that receives props and children vnodes via arguments, and also return vnode(s).</li> <li>Unlike stateful components, functional components are not restricted by the "single root node" rule and can return an Array of multiple vnodes.</li> <li>A functional component's render function receives the following arguments: <ul> <li><code>createElement</code>: the parent component's <code>$createElement</code> method.</li> <li><code>props</code>: an object containing props</li> <li><code>children</code>: children inside the component's tag as vnodes</li> </ul> </li> </ul> <p>Example usage:</p> <pre> Vue.component('wrap-with-tag', { functional: true, props: ['tag'], render (h, props, children) { return h(props.tag, null, children) } })</pre> <p>When used in template:</p> <pre> <wrap-with-tag tag="div">hello</wrap-with-tag></pre> <p>Will render:</p> <pre> <div>hello</div></pre> </li> </ul> <h3>重大更改</h3> <ul> <li> <p><code>v-ref</code> is now no longer a directive: it is now a special attribute similar to <code>key</code> and <code>transition</code>:</p> <pre> <!-- before --> <comp v-ref:foo></comp> <!-- after --> <comp ref="foo"></comp></pre> <p>Dynamic ref bindings are now also supported:</p> <pre> <comp :ref="dynamicRef"></comp></pre> </li> <li> <p>The <code><render></code> tag is removed in favor of stateless functional components.</p> </li> <li> <p>It is now prohibited to replace a component instance's root <code>$data</code>. This prevents some edge cases in the reactivity system and makes the component state more predictable (especially with type-checking systems).</p> </li> </ul> <h2>下载</h2> <ul> <li><a href="/misc/goto?guid=4958991534823726985" rel="nofollow"><strong>Source code</strong> (zip)</a></li> <li><a href="/misc/goto?guid=4958991534944591320" rel="nofollow"><strong>Source code</strong> (tar.gz)</a></li> </ul>