web前端開發之vue.js：初識vue

官網

英文官網:https://vuejs.org/

中文官網:https://cn.vuejs.org/

介紹

Vue (讀音 /vju?/，類似于?view) 是一套用于構建用戶界面的漸進式框架。與其它大型框架不同的是，Vue 被設計為可以自底向上逐層應用。Vue 的核心庫只關注視圖層，不僅易于上手，還便于與第三方庫或既有項目整合。另一方面，當與現代化的工具鏈以及各種支持類庫結合使用時，Vue 也完全能夠為復雜的單頁應用提供驅動。

漸進式 javaScript 框架

作用: 動態構建用戶界面

模式

MVVM 是Model-View-ViewModel 的縮寫，它是一種基于前端開發的架構模式。

1.Model指代的就是vue對象的data屬性里面的數據。這里的數據要顯示到頁面中。

2.View指代的就是vue中數據要顯示的HTML頁面，在vue中，也稱之為“視圖模板” 。

3.ViewModel指代的是vue.js中我們編寫代碼時的vm對象了，它是vue.js的核心，

特點

遵循 MVVM 模式

編碼簡潔, 體積小, 運行效率高, 適合移動/PC 端開發

它本身只關注 UI, 可以輕松引入 vue 插件或其它第三庫開發項目

與其它前端 JS 框架的關聯

1) 借鑒 angular 的模板和數據綁定技術

2) 借鑒 react 的組件化和虛擬 DOM 技術

Vue 擴展插件

1) vue-cli:vue 腳手架

2) vue-resource(axios):ajax 請求

3) vue-router: 路由

4) vuex: 狀態管理

5) vue-lazyload: 圖片懶加載

6) vue-scroller: 頁面滑動相關

7) mint-ui: 基于 vue 的 UI 組件庫(移動端)

8) element-ui: 基于 vue 的 UI 組件庫(PC 端)

vue的生命周期是什么

vue每個組件都是獨立的，每個組件都有一個屬于它的生命周期，從一個組件創建、數據初始化、掛載、更新、銷毀，這就是一個組件所謂的生命周期。在組件中具體的方法有:

beforeCreate

created

beforeMount

mounted

(

beforeUpdate

updated

)

beforeDestroy

destroyed

動畫

CSS 動畫用法同 CSS 過渡，區別是在動畫中?v-enter?類名在節點插入 DOM 后不會立即刪除，而是在?animationend?事件觸發時刪除。

同時使用過渡和動畫

Vue 為了知道過渡的完成，必須設置相應的事件-。它可以是?transitionend?或?animationend，這取決于給元素應用的 CSS 規則。如果你使用其中任何一種，Vue 能自動識別類型并設置監聽。但是，在一些場景中，你需要給同一個元素同時設置兩種過渡動效，比如?animation?很快的被觸發并完成了，而?transition?效果還沒結束。在這種情況中，你就需要使用?type?attribute 并設置?animation?或?transition?來明確聲明你需要 Vue 監聽的類型。

過濾器

Vue.js 允許你自定義過濾器，可被用于一些常見的文本格式化。過濾器可以用在兩個地方：雙花括號插值和?v-bind?表達式?(后者從 2.1.0+ 開始支持)。過濾器應該被添加在 javaScript 表達式的尾部，由“管道”符號指示：

{{?message?|?capitalize?}}