cytoscape.jsvue的簡單介紹

本文目錄一覽：

• 1、關於Vue.js 和 react.js 的異同
• 2、Vue.JS入門篇–列表渲染
• 3、Vue.js入門教程（三）雙向綁定和數據渲染
• 4、Vue中使用Cytoscape.js

關於Vue.js 和 react.js 的異同

react.js和vue.js的異同：

vue—react.js 的相同點：

vue和react是兩個不像相同的框架，但是他們之間也是用共同特點的，所有的前端框架都有一些相同的特點，vue和react之間最關鍵的相同之處在於，它們在被設計出來時所用的思想或者說理念是一樣的，比如說都用到了component組件，props參數傳遞，組件之間的通信，state狀態管理器，lifecircle聲明周期等等，似乎現在的前端框架都已經成為了mvc或則mvvc的樣子，雖然還有一部分前端開發還是傳統模式，但是必然會被node+webpack+vue /react—之類的自動化逐漸替代…

vue—-react.js 的不同之處：

vue和react.js最大的不同之處在於它們對DOM的渲染方式不同，vue可以直接在vue文件中使用html標籤，數據綁定時類似angular，可以進行條件渲染，而react.js則採用了jsx語法，運用虛擬DOM 的概念進行DOM對頁面元素進行渲染，獲取頁面元素需要用ref來獲取，似乎更加安全。

Vue.JS入門篇–列表渲染

查看一下效果，應該很容易得到結果

有時我們可能需要重複一個包含多個節點的塊，這時可以用 template 標籤包裹這個塊。這裡的 template 標籤只起到語義上的包裹作用，其本身不會被渲染出來。例如：

簡單值 (primitive value) 即字符串、數字、boolean 等並非對象的值。對於包含簡單值的數組，你可用 $value 直接訪問值:

有時我們可能想要更明確地訪問當前作用域的變量而不是隱式地回退到父作用域。你可以通過提供一個參數給 v-repeat 指令並用它作為將被迭代項的別名:

Vue.js 內部對被觀察數組的變異方法 (mutating methods，包括 push(), pop(), shift(), unshift(), splice(), sort() 和 reverse()) 進行了攔截，因此調用這些方法也將自動觸發視圖更新。

下面是一個演示的例子，點擊按鈕的時候數據項會被移除

Vue.js 給被觀察數組添加了兩個便捷方法：$set() 和 $remove() 。

你應該避免直接通過索引來設置數據綁定數組中的元素，比如 demo.items[0] = {}，因為這些改動是無法被 Vue.js 偵測到的。你應該使用擴展的 $set() 方法:

$remove() 只是 splice()方法的語法糖。它將移除給定索引處的元素。當參數不是數值時，$remove() 將在數組中搜索該值並刪除第一個發現的對應元素。

當你使用非變異方法，比如filter(), concat() 或 slice()，返回的數組將是一個不同的實例。在此情況下，你可以用新數組替換舊的數組:

你可能會認為這將導致整個列表的 DOM 被銷毀並重新渲染。但別擔心，Vue.js 能夠識別一個數組元素是否已有關聯的 Vue 實例， 並儘可能地進行有效復用。

在某些情況下，你可能需要以全新的對象（比如 API 調用所返回的對象）去替換數組。如果你的每一個數據對象都有一個唯一的 id 屬性，那麼你可以使用 track-by 特性參數給 Vue.js 一個提示，這樣它就可以復用已有的具有相同 id 的 Vue 實例和 DOM 節點。

例如：你的數據是這個樣子的

那麼你可以像這樣給出提示:

在替換 items 數組時，Vue.js 如果碰到一個有 _uid: ’88f869d’ 的新對象，它就會知道可以直接復用有同樣 _uid 的已有實例。 在使用全新數據重新渲染大型 v-repeat 列表時，合理使用 track-by 能極大地提升性能。

你也可以使用 v-repeat 遍歷一個對象的所有屬性。每個重複的實例會有一個特殊的屬性 $key。對於簡單值，你也可以象訪問數組中的簡單值那樣使用 $value 屬性。

在 ECMAScript 5 中，對於給對象添加一個新屬性，或是從對象中刪除一個屬性時，沒有機制可以檢測到這兩種情況。針對這個問題，Vue.js 中的被觀察對象會被添加三個擴展方法: $add(key, value), $set(key, value) 和 $delete(key)。這些方法可以被用於在添加 / 刪除觀察對象的屬性時觸發對應的視圖更新。方法 $add 和 $set 的不同之處在於當指定的鍵已經在對象中存在時 $add 將提前返回，所以調用 obj.$add(key) 並不會以 undefined 覆蓋已有的值。

v-repeat 也可以接受一個整數。在這種情況下，它將重複顯示一個模板多次。 下面的例子將迭代3次。

有時候我們只需要顯示一個數組的過濾或排序過的版本，而不需要實際改變或重置原始數據。Vue 提供了兩個內置的過濾器來簡化此類需求： filterBy 和 orderBy。

Vue.js入門教程（三）雙向綁定和數據渲染

既然清楚了原理，那麼，接下來進入正題——我知道了vue怎麼安裝，那麼我怎麼使用呢？

在告訴你基礎用法之前，我還是要先告訴你一個情況。

可能要令你有點失望。vue主要是側重於數據端的。他的目的就是渲染數據和在前端調整一下數據邏輯。

他不是像jquery那樣讓你用來做特技的。就算你要做特技。你也應該通過css3/canvas而不是dom。

所謂的雙向綁定，你可以理解就是把view。（你還不清楚mvc的話，請看第一章）

和model綁定到一起。說白了，就是你js中的綁定值變了。你dom中的內容就跟着一塊變了。

vue是通過解析{{文字..}}來生成內容的。後面綁定方法，輸出內容的時候都會講到。

列表輸出使用 v-for，這些v開頭加橫杠的叫做命令

這些命令是可以自定義的。但是那都屬於高級操作，我們不用它也完全足夠支撐做一個大型項目了。

其實你回發現，這裡無論是v-for或者是v-什麼其他玩意

它都深刻的遵循了es6的語法。這裡不就是一個典型的for in 循環嗎。不過我們現在都用for of了。

你記住這個用法，它就長這樣。

前後端分離開發的關鍵在於：後台只提供接口。

我們獲得的數據多數情況下，僅僅是一個json，而mvvm的關鍵就再於解析數據在前端完成了。如果你了解jsp或者php你會了解，數據的解析在mvc中，

是由後端完成的，而html只負責顯示。

所以，當你了解了數據綁定和渲染以後，你可以第一時間先把數據輸出到頁面了。

我們前端最厲害的地方不就是處理能看得見的東西嗎？

Vue中使用Cytoscape.js

在Vue中使用一些第三方庫時，很容易犯的錯誤是直接把第三方庫的對象放在Vue的data屬性中。

例如在使用 Cytoscape.js 時，用下面這種聲明方式。

這樣做的確是方便後面的操作，但問題是，這種對象特別大，嵌套層級很深，如下圖所示，如果直接放在data里，vue的響應式機制，會監聽cy的每個屬性，開銷巨大，CPU佔用瞬間到100%。

所以在使用 Cytoscape.js 、 Echarts.js 與vue結合時，要避免直接放在data屬性中。一種方法是，在 mounted() 里引入該對象。

另一種方法是用 Object.freeze()

這兩個方法，都能避免vue的響應式開銷，後面也能夠正常操作 this.cy 對象。