1. 認識Vue
1.1 Vue是什么
vue.js是一套漸進式 <span style="color:red">JavaScript</span> 框架,
vue是一款友好的,多途徑且高性能的JavaScript框架,可維護和測試更強的代碼
作用: 動態(tài)構(gòu)建用戶界面
和其他前端框架的關(guān)聯(lián)
- 借鑒了angular的模板和數(shù)據(jù)綁定技術(shù)
- 借鑒了react的組件化和虛擬DOM 技術(shù)
1.2 了解庫和框架
-
框架 vue
擁有一個完整的解決方案.,我們開發(fā)好以后,他就能調(diào)用我們的代碼
vue的核心是庫,使用他vue核心庫和一些插件就是框架,
-
庫 jQuery
庫是別人開發(fā)好以后,我們?nèi)フ{(diào)用庫的方法
庫的的概念和意義是用來提供一些方法的集合疚鲤，避免重復(fù)定義相同功能的函數(shù)，并具有一定的模式兼容性。
框架，更應(yīng)該是規(guī)范開發(fā)者按照框架的設(shè)計去做一些事，而非簡單的工具集的概念误阻，框架可以提供相應(yīng)的庫或者基于庫來實現(xiàn)的插件，但庫一般不會具備框架的規(guī)范性。
1.3. vue的特點
- 核心只關(guān)注視圖層
- 易學(xué),輕量,靈活的特點
- 編碼簡潔,體積小,運行效率高,適合移動/PC開發(fā)
- 漸進式框架
- 遵循MVVM模式
1.4. 漸進式的理解
通過組合,完成一個完整的框架
通俗的來說,漸進式,就是vue有一個核心庫, 和一堆的插件, 當(dāng)核心庫能完成的內(nèi)容就用核心庫就行了, 如果需要什么插件在下載什么插件使用
Vue全家通, vuejs + vue-router + vuex+ axios
聲明式渲染 (不關(guān)心是如何實現(xiàn)的用就可以了)
組件系統(tǒng) (大型項目,很多部分可以復(fù)用,這就是組件)
客戶端路由(vue-router)
大規(guī)模狀態(tài)管理(vuex)
構(gòu)建工具(vue-cli)
1.5. MV**
-
MVC 單向
model 模型 view 視圖 controller 控制器
mvc.jpg -
MVVM 雙向
model 模型 view 視圖 viewModel 視圖模型
1.6 Vue擴展插件
- vue-cli: Vue 腳手架
- vue-resource: ajax請求, 官網(wǎng)已經(jīng)不推薦使用了,推薦axios
- vue-router: 路由
- vuex: 狀態(tài)管理
- vue-lazyload: 圖片懶加載
- vue-scroller : 頁面滑動相關(guān)
- element-ui: 基于vue的UI組件庫(PC端)
- mint-ui: 基于vue的UI組件庫(移動端)
2. 安裝vue
2.1. 了解vue的兼容性
`Vue`不支持`IE8`及以下版本旭愧，因為`Vue`使用的是`IE8`無法模擬的`ECMAScript 5`特性。vue.js支持所有兼容`ECMAScript 5`的瀏覽器.
Object.definedProperty(es5) 的沒有替代方案,所以不支持IE8及以下
2.2. 直接用<script>引入
- 直接下載并用
<script>標簽引入宙暇，Vue會被注冊位一個全局變量输枯。 - 引入在線cdn
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.17/dist/vue.js"></script>
2.3. npm安裝
npm init
會生成一個package.json文件,這個文件用來描述項目的依賴,
不能有大寫 特殊字母 中文,而且不要和安裝的包的名字相同
也可以一鍵生成
npm init -y
需要注意的點：
- 一鍵生成要主要,項目的名字會自動使用文件夾的名字,
- 所以此時文件夾的名字不能是中文,特殊大寫字母
安裝vue
npm install vue
