Vue 入門指南

英文：http://vuejs.org/guide/index.html

介紹

vue.js 是用來構建web應用接口的一個庫

技術上，Vue.js 重點集中在MVVM模式的ViewModel層，它鏈接視圖和數據綁定模型經過兩種方式。實際的DOM操做和輸出格式被抽象的方式到指令（Directives）和過濾器（Filters）

在哲學領域內,儘可能讓MVVM數據綁定API儘量簡單。模塊化和可組合性也是重要的設計考慮。vue不是一個全面的框架,它被設計成簡單的和靈活的。你能夠用它快速原型,或混合和匹配與其餘庫定義前端堆棧。

Vue。js的API是參考了AngularJS、KnockoutJS Ractive.js Rivets.js。儘管有類似之處,我相信Vue.js提供一個有價值可以讓你在如今的一些現有框架中舍取其價值

即便你已經熟悉其中的一些術語,建議您經過如下概念的概述,由於你的這些術語的概念可能在Vue.js的下文中有所不一樣

 

概念概述

ViewModel

一個對象,同步模型和視圖. 在Vue.js中,ViewModels是實例化的Vue的構造器或者是它的子類

var vm = new Vue({ /* options */ })

這是主要的對象,你會與做爲開發人員在使用Vue.js交互。更多細節請參閱Class: Vue.

 

View

用戶看到的實際HTML / DOM

vm.$el // The View

當使用Vue.js時候，除了本身自定義的指令你幾乎不會觸碰到DOM的操做，當數據更新後視圖的更新將會自動的觸發，視圖的更新能夠很精確的到每個testNode節點，他們也批處理和異步執行從而提供更好的性能。

 

Model

這是一個略微修改的Javascript對象

vm.$data // The Model

在Vue.js中，模型只是簡單的Javascript對象,數據對象,你可以操控他們的屬性和視圖模型，觀察他們的從而能獲取通知後更改。Vue.js在data對象胡總用ES5的 getter/setter 把屬性轉化了，它容許直接操做而不須要髒檢查。

data對象在適當的時候會產生突變，因此修改它與經過引用修改vm.$data是同樣的效果。這也方便了多個ViewModel實例觀察同一塊數據。

技術細節請看Instantiation Options: data.

 

Directives

私有的HTML屬性是告訴Vue.js作一些關於DOM的處理

<div v-text="message"></div>

這裏的div元素有一個v-text的指令，值是message.意思是告訴Vue.js 保持這個div節點的內容與viewMode中的message屬性同步

指令能夠封裝任意DOM操做。例如v-attr 操做一個屬性元素,v-repeat克隆基於數組的一個元素，v-on附加事件監聽，咱們稍後討論.

 

Mustache Bindings

您還可使用mustache-style綁定,在文本和屬性。他們翻譯成v-text v-attr指令。例如:

<div id="person-{{id}}">Hello {{name}}!</div>

雖然方便,但有幾件事你須要注意的:

若是設置一個image的src屬性的時候，會發送一個HTTP請求，因此當模板是第一次解析出現404，此時用v-attr比較好

當解析HTML的時候，Internet Explorer將會刪除無效的內部style屬性，因此咱們想要支持IE綁定內聯的CSS 我就老是用v-style

在v-html內部，非轉義的HTML你能用三個大括號{{{像這樣}}}處理，可是這樣會有潛在的XSS攻擊，能打開windows,因此建議是絕對安全的數據全的時候才這樣作，或者經過自定義管道過濾器清理不可信的HTML

 

Filters

在更新視圖以前能夠用函數來處理這個原始的數據。他們正在用一個「管道」指令或綁定:

<div>{{message | capitalize}}</div>

如今在div的文本內容要更新以前，這個message的值將會經過capitalize函數處理。詳細請看Filters in Depth.

 

Components

在Vue.js,一個組件是一個簡單的視圖模型構造函數，經過Vue.component(ID, constructor)註冊。經過一個關聯的ID，能夠嵌套另外的視圖模型的模板的v-component指令。這種簡單的機制使聲明視圖模型的重用和組合方式相似於Web組件,而不須要最新的瀏覽器或重型polyfills。經過將應用程序分解成更小的組件,其結果是一個高度解耦和可維護的代碼庫。更多細節,請參閱Composing ViewModels.

 

A Quick Example

<div id="demo">
    <h1>{{title | uppercase}}</h1>
    <ul>
        <li
            v-repeat="todos"
            v-on="click: done = !done"
            class="{{done ? 'done' : ''}}">
            {{content}}
        </li>
    </ul>
</div>

 

var demo = new Vue({
    el: '#demo',
    data: {
        title: 'todos',
        todos: [
            {
                done: true,
                content: 'Learn JavaScript'
            },
            {
                done: false,
                content: 'Learn vue.js'
            }
        ]
    }
})

 

粗略翻譯，有錯誤請指出