首頁 > 開發者 > JavaScript
標籤：建構函式 專註 雙向資料繫結 也會 技術 文字 dom 視圖 hello
vue.js是一個用於建立web互動頁面的庫
從技術角度講，vue專註於MVVM模型的viewModel層，它通過雙向資料繫結把view層和model層串連起來，實際DOM封裝和輸出格式都被抽象為Directive和Filters。
概念綜述：
ViewModel
一個同步model和view的對象，在vue中，每個vue執行個體都是一個ViewModel。他通過建構函式vue或其他子類被建立出來的。
var vm=new Vue({/*options*/})
這是你作為一個開發人員在使用vue時主要打交道的對象。
View（視圖）
被vue執行個體管理的DOM節點
vm.$el //The View
vue使用基於Dom的模板，每個vue執行個體都關聯著一個DOM元素。當一個vue執行個體被建立時，他會地櫃遍曆根項目的所有節點，同時完成必要的資料繫結，當這個視圖被編譯後，他會自動相應資料變化。
在使用vue時，除了已定義指令，幾乎不必直接接觸DOM。當資料發生變化時，視圖將會自動發生更新，更新精確到一個文位元組點。同時為了更好地效能，這些更新是批量非同步執行的。
Model（模型）
是一個輕微改動過的原生js對象
vm.$data
vue中的模型就是普通的js對象，也可以叫做資料對象，一旦某對象被作為Vue執行個體中的資料，他就成為一個“反應式“的對象了，你可以操作他們的屬性，同時正在觀察他的Vue執行個體也會提示，每當資料變化時，視圖都會在下一幀更新。
vue執行個體代理了他們觀察到的資料對象的所有屬性，所以一旦一個對象{a:1}被觀察，那麼vm.$data.a和vm.a將會返回相同的值，而設定vm.a=2則也會修改vm.$data
<body><div id="div1">{{a}}</div></body><script>var vm=new Vue({el:"#div1",data:{a:1}});</script>
一旦資料被觀察，vue就不會再偵測到新加入或者刪除的屬性了，作為彌補，會為觀察的對象增加$add,$set和$delete方法
下面是vue資料觀測機制實現的高層概覽
Directives（指令）
帶特殊首碼的html屬性，可以讓vue對一個Dom元素做各種處理
<div v-text="message"></div>
這裡的div元素有一個v-text指令，其值為message。vue會讓該div的常值內容與vue執行個體中的message屬性保持一致。
Directives可以封裝任何DOM操作，比如v-attr會操作一個元素的特性；v-repeat會基於數組來複製一個元素；v-on會綁定事件等。
Mustache風格綁定
也可以使用mustache風格的綁定，不管在文本還是在屬性中，他們在底層會被轉換成v-text和v-attr的指令。
比如
<div id="person-{{id}}">Hello{{name}}</div>
這主要注意一些事項
一個<img>的src屬性在賦值時會產生一個HTTP請求，所以當模板在第一次被解析時會產生404請求。這種情況適合用v-attr。
IE在解析html時會移除非法的內聯style屬性，所以如果你想支援IE，請在綁定內聯css的時候始終使用v-style。
你可以使用三對花括弧來迴避html代碼，而這種寫法會在底層轉換為v-html；
{{{safeHTMLString}}}
這種寫法會留下XSS攻擊隱患，所以建議只對絕對信任的資料來源使用三對花括弧的寫法，或者先通過自訂的過濾器filter對不可信任的html進行過濾
最後，你可以在你的mustache綁定裡加入*來註明這裡是一個一次性撰寫的資料，這樣的話他就不會相應後續的資料變化：
{{*onlyOnce}}
過濾器（Filters）
過濾器是用於在更新視圖之前處理原始數值的函數。他們通過一個“管道”在指令或綁定中進行處理；
<div>{{message | capitalize}}</div>
這樣在div常值內容被更新之前，message的值會先傳給capitalize函數處理。
Components（組件）
在vue中，每個組件都是一個簡單的vue執行個體。一個樹形嵌套的各種組件就代表了你的應用程式的各種介面。通過Vue.extend返回的自訂建構函式可以把這些組件執行個體化，不過更加 推薦聲明式的用法是通過Vue.component(id,constructor)註冊這些組件，一旦組件被註冊，他們就可以在vue執行個體的模板中以自訂元素形式使用了
例如
<my-component>
<!--internals handled by my-component-->
</my-compomnent>
這個簡單的機制使得我們可以以類似文本web Components的聲明形式對Vue組件進行複用和組合，同時無需最新版本的瀏覽器。
javascript-vue介紹
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
