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>