介紹

vue.js 是用來(lái)構(gòu)建web應(yīng)用接口的一個(gè)庫(kù)

技術(shù)上，Vue.js 重點(diǎn)集中在MVVM模式的ViewModel層，它連接視圖和數(shù)據(jù)綁定模型通過(guò)兩種方式。實(shí)際的DOM操作和輸出格式被抽象的方式到指令（Directives）和過(guò)濾器（Filters）

在哲學(xué)領(lǐng)域內(nèi),盡量讓MVVM數(shù)據(jù)綁定API盡可能簡(jiǎn)單。模塊化和可組合性也是重要的設(shè)計(jì)考慮。vue不是一個(gè)全面的框架,它被設(shè)計(jì)成簡(jiǎn)單的和靈活的。你可以用它快速原型,或混合和匹配與其他庫(kù)定義前端堆棧。

Vue。js的API是參考了AngularJS、KnockoutJS Ractive.js Rivets.js。盡管有相似之處,我相信Vue.js提供一個(gè)有價(jià)值能夠讓你在現(xiàn)在的一些現(xiàn)有框架中舍取其價(jià)值

即使你已經(jīng)熟悉其中的一些術(shù)語(yǔ),建議您通過(guò)以下概念的概述,因?yàn)槟愕倪@些術(shù)語(yǔ)的概念可能在Vue.js的下文中有所不同

概念概述

ViewModel

一個(gè)對(duì)象,同步模型和視圖. 在Vue.js中,ViewModels是實(shí)例化的Vue的構(gòu)造器或者是它的子類(lèi)

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

這是主要的對(duì)象,你會(huì)與作為開(kāi)發(fā)人員在使用Vue.js交互。更多細(xì)節(jié)請(qǐng)參閱Class: Vue.

View

用戶(hù)看到的實(shí)際HTML / DOM

vm.$el // The View

當(dāng)使用Vue.js時(shí)候，除了自己自定義的指令你幾乎不會(huì)觸碰到DOM的操作，當(dāng)數(shù)據(jù)更新后視圖的更新將會(huì)自動(dòng)的觸發(fā)，視圖的更新可以很精確的到每一個(gè)testNode節(jié)點(diǎn)，他們也批處理和異步執(zhí)行從而提供更好的性能。

Model

這是一個(gè)略微修改的Javascript對(duì)象

vm.$data // The Model

在Vue.js中，模型只是簡(jiǎn)單的Javascript對(duì)象,數(shù)據(jù)對(duì)象,你能夠操控他們的屬性和視圖模型，觀察他們的從而能獲取通知后更改。Vue.js在data對(duì)象胡總用ES5的 getter/setter 把屬性轉(zhuǎn)化了，它允許直接操作而不需要臟檢查。

data對(duì)象在適當(dāng)?shù)臅r(shí)候會(huì)產(chǎn)生突變，所以修改它與通過(guò)引用修改vm.$data是一樣的效果。這也方便了多個(gè)ViewModel實(shí)例觀察同一塊數(shù)據(jù)。

技術(shù)細(xì)節(jié)請(qǐng)看Instantiation Options: data.

Directives

私有的HTML屬性是告訴Vue.js做一些關(guān)于DOM的處理

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

這里的div元素有一個(gè)v-text的指令，值是message.意思是告訴Vue.js 保持這個(gè)div節(jié)點(diǎn)的內(nèi)容與viewMode中的message屬性同步

指令可以封裝任意DOM操作。例如v-attr 操作一個(gè)屬性元素,v-repeat克隆基于數(shù)組的一個(gè)元素，v-on附加事件監(jiān)聽(tīng)，我們稍后討論.

Mustache Bindings

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

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

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

如果設(shè)置一個(gè)image的src屬性的時(shí)候，會(huì)發(fā)送一個(gè)HTTP請(qǐng)求，所以當(dāng)模板是第一次解析出現(xiàn)404，此時(shí)用v-attr比較好

當(dāng)解析HTML的時(shí)候，Internet Explorer將會(huì)刪除無(wú)效的內(nèi)部style屬性，所以我們想要支持IE綁定內(nèi)聯(lián)的CSS 我就總是用v-style

在v-html內(nèi)部，非轉(zhuǎn)義的HTML你能用三個(gè)大括號(hào){{{像這樣}}}處理，但是這樣會(huì)有潛在的XSS攻擊，能打開(kāi)windows,所以建議是絕對(duì)安全的數(shù)據(jù)全的時(shí)候才這樣做，或者通過(guò)自定義管道過(guò)濾器清理不可信的HTML

Filters

在更新視圖之前可以用函數(shù)來(lái)處理這個(gè)原始的數(shù)據(jù)。他們正在用一個(gè)“管道”指令或綁定:

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

現(xiàn)在在div的文本內(nèi)容要更新之前，這個(gè)message的值將會(huì)通過(guò)capitalize函數(shù)處理。詳細(xì)請(qǐng)看Filters in Depth.

Components

在Vue.js,一個(gè)組件是一個(gè)簡(jiǎn)單的視圖模型構(gòu)造函數(shù)，通過(guò)Vue.component(ID, constructor)注冊(cè)。通過(guò)一個(gè)關(guān)聯(lián)的ID，可以嵌套另外的視圖模型的模板的v-component指令。這種簡(jiǎn)單的機(jī)制使聲明視圖模型的重用和組合方式類(lèi)似于Web組件,而不需要最新的瀏覽器或重型polyfills。通過(guò)將應(yīng)用程序分解成更小的組件,其結(jié)果是一個(gè)高度解耦和可維護(hù)的代碼庫(kù)。更多細(xì)節(jié),請(qǐng)參閱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'
      }
    ]
  }
})

粗略翻譯，有錯(cuò)誤請(qǐng)指出

最新評(píng)論