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的構造器或者是它的子類

View

用戶看到的實際HTML / DOM

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

Model

這是一個略微修改的Javascript對象
在Vue.js中,模型只是簡單的Javascript對象,數據對象,你能夠操控他們的屬性和視圖模型,觀察他們的從而能獲取通知後更改。Vue.js在data對象胡總用ES5的 getter/setter 把屬性轉化了,它允許直接操作而不需要髒檢查

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

Directives

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

Hello {{name}}!

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

指令可以封裝任意DOM操作。例如v-attr 操作一個屬性元素,v-repeat克隆基於數組的一個元素,v-on附加事件監聽,

Mustache Bindings

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

Hello {{name}}!

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

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

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

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

Filters

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

{{message | capitalize}}

現在在div的文本內容要更新之前,這個message的值將會通過capitalize函數處理

http://vuejs.org/guide/filters.html

Components

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

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章