Vue.js基礎知識匯總_其它

介紹

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 id="title-uppercase">{{title | uppercase}}</h1>
  <ul>
    <li
      v-repeat="todos"
      v-on="click: done = !done"
      class="{{done &#63; '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'
      }
    ]
  }
})

粗略翻譯，有錯誤請指出