1-Vue基本概念

weixin_33806914發表於2019-02-18

0.url

https://cn.vuejs.org/

4395895-dbf0c1f17e24cdd4.png
image.png

一.什麼是Vue

Vue.js是一套構建使用者介面的框架,只關注檢視層,它不僅易於上手,還便於與第三方庫或既有專案整合.(Vue有配套的第三方類庫,可以整合起來做大型的專案開發).Vue是前端主流框架之一,和Angular.js,React.js一起,並稱前端三大主流框架

二.框架和庫的區別

框架:一套完整的解決方案;對專案的侵入性較大,專案如果需要更換框架,則需要重新構架整個專案
庫(外掛):提供某一個小功能;對專案的侵入性較小,如果某個庫無法實現某些需求,,可以很容易的切換到其它庫實現需求
常見的庫:Swiper,jQuery,zepto,如果要將jQuery切換到zepto,只需要更換匯入的檔案以及修改使用該庫的程式碼即可

三.為什麼要學習流行框架

提升開發效率:在企業開發中,時間就是效率,效率就是金錢

前端提升開發效率的發展歷程:
原生JS-->jQuery/Swiper/zepto等類庫--->前端模板引擎-->三大主流開發框架
原生JS:通過JS操作DOM元素(選中/監聽/修改)
庫(jQuery/zepto):快速查詢,動畫,網路請求,但還是利用JS操縱找到的DOM元素
前端模板引擎:直接把資料給前端模板,會自動把資料渲染出來
三大主流框架:介面上做邏輯處理,傳送請求,獲取資料,用模板渲染介面

四.Vue的優勢

1.Vue能夠幫助我們減少不必要的DOM操作,解放程式設計師的雙手,讓程式設計師有更多的時間關注業務邏輯
2.Vue的核心概念之一在於通過Data驅動介面的更新和展示,而非JS中通過操作DOM來改變頁面的顯示
3.Vue在框架設計上採用MVVM(Model-View-ViewModel)模式,其中ViewModel是Vue.js的核心,它是一個Vue的例項(物件),這個例項作用於介面上某個HTML元素

4395895-fd127dd1b213cfad.png
image.png

4395895-b98c2528ebc5ac27.png
image.png

4.4Vue的核心概念之二,就是頁面的元件化,它提供了一種抽象,讓我們可以用獨立可複用的小元件來構建大型應用
4395895-247edb9d6d345547.png
image.png

比如:電商網站中,秒殺/拼團/普通商品展示可以構建三個不同的元件,實現複用