Vue.js v2.0.0-beta.2 發布，一個構建數據驅動的 web 界面的庫

jopen 8年前發布 | 27K 次閱讀 Vue.js web 數據驅動

Vue.js（讀音 /vju?/, 類似于 view）是一個構建數據驅動的 web 界面的庫。Vue.js 的目標是通過盡可能簡單的 API 實現響應的數據綁定和組合的視圖組件。

Vue.js 自身不是一個全能框架——它只聚焦于視圖層。因此它非常容易學習，非常容易與其它庫或已有項目整合。另一方面，在與相關工具和支持庫一起使用時，Vue.js 也能完美地驅動復雜的單頁應用。

如果你喜歡下面這些，那你一定會喜歡 Vue.js：

可擴展的數據綁定機制
原生對象即模型
簡潔明了的 API
組件化 UI 構建
多個輕量庫搭配使用

10 秒鐘看懂 Vue.js

更新日志

重大更改

Transition API Change

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.

The <transition> component

All single-element transition effects are now applied by wrapping the target element/component with the <transition> 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.

The simplest usage example:
```
<transition>
  <div v-if="ok">toggled content</div>
</transition>
```
The component defines a number of props and events that maps directly to the old transition definition options:

Props
- name: String
  
  Used to automatically generate transition CSS class names. e.g. name: 'fade' will auto expand to .fade-enter, .fade-enter-active, etc. Defaults to "v".
- appear: Boolean
  
  Whether to apply transition on initial render. Defaults to false.
- css: Boolean
  
  Whether to apply CSS transition classes. Defaults to true. If set to false, will only trigger JavaScript hooks registered via component events.
- mode: String
  
  Controls the timing sequence of leaving/entering transitions. Available modes are "out-in"and "in-out"; defaults to simultaneous.
- enterClass, leaveClass, enterActiveClass, leaveActiveClass, appearClass, appearActiveClass: String
  
  Individually configure transition CSS classes.
Example applying transition to dynamic components:
```
<transition name="fade" mode="out-in" appear>
  <component :is="view"></component>
</transition>
```
Events

Corresponds to the JavaScript hooks available in 1.x API.
- before-enter
- enter
- after-enter
- before-leave
- leave
- after-leave
- before-appear
- appear
- after-appear
Example:
```
<transition @after-enter="transitionComplete">
  <div v-show="ok">toggled content</div>
</transition>
```
When the entering transition completes, the component's transitionComplete method will be called with the transitioned DOM element as the argument.

Difference from beta.1

The second vm argument has been removed, since now the hooks must be component methods and naturally has access to the owner component's this context. For enter and leave hooks, the presence of cb as the second argument indicates the user wants explicit control of the ending timing of the transition.
</li>
The <transition-group> component

All multi-element transition effects are now applied by wrapping the elements with the <transition-group> built-in component. It exposes the same props and events as <transition> does. The difference being that:
1. Unlike <transition>, <transition-group> renders a real DOM element. By default it renders a<span>, and you can configure what element is should render via the tag prop. You can also use it with the is attribute, e.g. <ul is="transition-group">.
2. <transition-group> does not support the mode prop.
3. Every child in a <transition-group> must be uniquely keyed.
4. Creating Reusable Transitions
  
  Now that transitions are applied via components, they are no longer considered an asset type, so the global Vue.transition() method and the transition 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):
```
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)
  }
})
```
  You can then use it like this:
```
<fade>
  <div v-if="ok">toggled content</div>
</fade>
```

Vue.js v2.0.0-beta.2 發布，一個構建數據驅動的 web 界面的庫

更新日志

重大更改

Transition API Change

Bug修復

下載

相關資訊

相關經驗

相關文檔