首頁 > web前端 > 前端問答 > vuejs和bulma的差別是什麼

vuejs和bulma的差別是什麼

青灯夜游
發布: 2023-01-07 11:47:34
原創
2980 人瀏覽過

區別:vuejs是一套建構使用者介面的漸進式JavaScript框架,其目標是透過盡可能簡單的API實現響應式的資料綁定和可組合的視圖元件;而Bulma則是基於Flexbox的現代化的CSS框架,用於實現各種簡單或複製的響應式內容佈局。

vuejs和bulma的差別是什麼

本教學操作環境:windows7系統、vue2.9.6版,DELL G3電腦。

vuejs是什麼?

Vue.js(讀音/vju:/,發音類似view)是一套建構使用者介面的漸進式框架。與其他重量級框架不同的是,Vue 採用自底向上增量開發的設計。

Vue 的核心函式庫只專注於視圖層,而且非常容易學習,也非常容易與其他函式庫或已有專案整合。 Vue 完全有能力驅動採用單一文件元件和 Vue 生態系統支援的函式庫開發的複雜單頁應用。

Vue.js 還提供了MVVM 資料綁定和一個可組合的元件系統,具有簡單、靈活的API,其目標是透過盡可能簡單的API 實現響應式的資料綁定和可組合的視圖組件。

我們也可以說 Vue.js 是一套響應式系統(Reactivity System)。資料模型層(Model)只是普通 JavaScript 對象,如下圖所示,{ }代表一個 JavaScript 對象,修改它則更新相應的 HTML 片段(DOM),這些 HTML 片段也稱為“視圖(view)”。這會讓狀態管理變得非常簡單且直觀,可實現資料的雙向綁定,所以我們也稱之為響應式系統。

vuejs和bulma的差別是什麼

Vue.js 的主要特點

Vue.js 是優秀的前端介面開發JavaScript 函式庫,它之所以非常火,是因為有眾多突出的特點,其中主要的特點有以下幾個。

1) 輕量級的框架

Vue.js 能夠自動追蹤依賴的模板表達式和計算屬性,提供MVVM 資料綁定和一個可組合的元件系統,具有簡單、靈活的API,讓讀者更容易理解,能更快上手。

2) 雙向資料綁定

宣告式渲染是資料雙向綁定的主要體現,同樣也是Vue.js 的核心,它允許採用簡潔的模板語法將資料宣告式渲染整合進DOM。

3) 指令

Vue.js 與頁面進行交互,主要是透過內建指令來完成的,指令的作用是當其表達式的值改變時相應地將某些行為應用到DOM 上。

4) 元件化

元件(Component)是 Vue.js 最強大的功能之一。元件可以擴充 HTML 元素,封裝可重複使用的程式碼。

在 Vue 中,父子元件透過 props 傳遞通信,從父向子單傳遞。子元件與父元件通信,透過觸發事件通知父元件改變資料。這樣就形成了一個基本的父子通訊模式。

在開發中元件和 HTML、JavaScript 等有非常緊密的關係時,可以根據實際的需求自訂元件,使開發變得更加便利,可大幅減少程式碼編寫量。

元件也支援熱重載(hotreload)。當我們做了修改時,不會刷新頁面,只是對元件本身進行立刻重載,不會影響整個應用程式目前的狀態。 CSS 也支援熱重載。

5) 客戶端路由

Vue-router 是 Vue.js 官方的路由插件,與 Vue.js 深度集成,用於建立單頁應用程式。 Vue 單頁面應用程式是基於路由和元件的,路由用於設定存取路徑,並將路徑和元件映射起來,傳統的頁面是透過超連結實現頁面的切換和跳躍的。

6) 狀態管理

狀態管理實際上是單向的資料流,State 驅動View 的渲染,而使用者對View 進行操作產生Action,使State 產生變化,從而使View重新渲染,形成一個單獨的元件。

bulma是什麼?

Bulma 是一個基於Flexbox 的現代化的 CSS 框架,設計的初衷就是行動優先(Mobile First),模組化設計,可以輕鬆用來實現各種簡單或複製的回應式內容佈局,瀏覽器支援:瀏覽器支援:Chrome、Edge、Firefox、Internet Explorer (10 )、Opera 以及Safari。

bulma有以下特性:

  • #輕量級的現代CSS框架,使用Flexbox

  • 支援響應式佈局,網格等

  • 純CSS,沒有Javascript程式碼

  • 可自訂、模組化

優點:

  • 為電腦、平板和手機提供響應式設計

  • 純CSS框架,很容易與JavaScript框架集成,如VueJS, ReactJS等

  • 代碼優雅簡潔

運行效果

列的範例。只要新增列,它們會自動調整自己的大小

vuejs和bulma的差別是什麼

魔術磁磚(Magic tiles)

Metro UI CSS 網格的單一元素

vuejs和bulma的差別是什麼

相關推薦: 《vue.js教程

以上是vuejs和bulma的差別是什麼的詳細內容。更多資訊請關注PHP中文網其他相關文章!

相關標籤:
來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板