Vue 近階段學習總結

2021-09-27 10:49:16 字數 2829 閱讀 3111

老話說的好『工欲善其事,必先利其器』,在我們程式設計師的世界裡要想開發出一款優秀的專案,乙個好的開發環境是必需的。

vue的開發環境是node.js和git的結合,尤其是node.js現在更是成為了我們前端開發者在面試時的加分項,甚者是必須項,今天的主角是vue,所以node.js就不多講了。不過可以為喜愛他的童鞋提供幾篇高質量的文章

環境搭建:

vue2.0史上最全入坑教程(上)—— 搭建vue腳手架(vue-cli)

vue2.0史上最全入坑教程(中)—— 腳手架**詳解

以下兩篇是乙個實戰專案,需要的童鞋可以看一下;

vue2.0史上最全入坑教程(下)—— 實戰案例

vue2.0史上最全入坑教程(完)—— 實戰案例

node.js:

node.js - 收藏集 - 掘金(其中有幾十篇高質量文章)

注:在學習開始之前,先看一篇文章,作為vue學習的引子我們來看看尤大神談vue.js

vue-cli

vue指令

vue元件系統

vue-router

vuex

vue外掛程式

axios

webpack

vue前端框架(muse-ui, element-ui)

sass,less, stylus

1.非同步批量的dom更新:避免乙個資料產生多餘的dom操作

2.動畫系統:使定義animation,transition變得更加單的同時還可以使用鉤子函式對動畫進行控制

3.可擴充套件性:自定義指令,過濾器,和元件,還有mixins的可以多個元件中復用共同的特性

vue-cli是我們建立vue專案的vue依賴環境,而vue-cli的依賴於的node.js,因為vue-cli是node.js的乙個外掛程式,

而開發乙個專案我們都會牽涉到專案版本的管理,所以需要乙個版本控制系統,而git剛好是這樣乙個好用的工具,

在專案的開發和發布過程中需要乙個管理工具這個管理工具是webpack,現在很流行的一款工具。

在非mvvm開發過程中我們使用的jquery,zepto.js, 我們使用它最多的是對dom的操作,一部分是ajax請求;

而在mvvm專案中如angular和vue,我們對dom的操作使用的是指令

補充:在非mvvm專案中我們採用的模組化開發使用的是sea.js,require.js,對業務模組進行管理;

而在mvvm專案中我們我們的模組化在vue中的體現就是元件系統

元件vue中的核心概念,幾乎所有的應用都是圍繞著元件來展開的。在vue的設計中將元件作為基礎元素,由它組成了整個應用的布局。

因此整個專案的架構看起來就像是乙個元件樹

如果按照尤大神說元件系統是vue的核心的話,那麼那麼如果將元件在形式上連線起來就需要vue-router,為什麼說是形式上呢?

其一因為乙個專案不可能在乙個頁面上展現所有的業務,這樣的應用使用起來不方便,也不利於維護,所以需要將專案分為若干個頁面;

另一點是,vue元件間的通訊有自己的機制,就是props,event up, vue空例項**匯流排。

vue官方文件

vuex其實可以理解為乙個解決方案,在一般的中小專案因為應用的業務比較單一,業務邏輯也不複雜,不同邏輯間的資料傳遞使用

props,event up,外加vue空例項**匯流排就可以滿足,但是大型專案有業務繁多,業務邏輯也比較複雜,所以整個專案的元件會達到數千個,

甚至上萬個。這樣只憑上面三板斧,一般的程式設計師無法駕馭這種級別的專案,而vuex正是解決這種情況的官方方案。

有的人認為vue有了元件系統為什麼還需要外掛程式這個東西,其實也沒什麼,就比如我們有了雙手後為什麼還要使用工具一樣,解放生產力嗎?

axio原文

axios 官方文件翻譯已經很詳盡了,如果想快速上手下面有一篇文章

文章:系列一: youngwind的github blog專案

系列二: arry_huang的segmentdefault中的系列文章

muse-ui(檢視開發文件)

element-ui(檢視開發文件)

sass: 阮一峰老師的sass用法指南

stylus: 張鑫旭的使用指南

知道了以上的內容我們可以開發出更優秀的專案,但是這有乙個前提,我們還需要了解其他的vue知識,這包括

全域性配置(待學習)

silent

optionmergestrategies

devtools

errorhandler

warnhandler

ignoredelements

keycodes

performance

productiontip

全域性api

vue.extend

vue.nexttick

vue.set

vue.delete

vue.directive

vue.mixin

vue.compile

vue.filter

vue.component

vue.use

vue.version

vue/選項

選項包括:

dom,

資料(data,props,propsdata,computed,method,watch),

生命週期鉤子,

資源(元件,指令,過濾器),

組合(parent,mixins,extends,provide/inject),

其它vue的例項

官網提供的其他常用元件

transition

slot

keep-alive

現階段所接觸和實現過的大致就是以上的內容,希望可以給初學的同學啟發

Vue 近階段學習總結

老話說的好 工欲善其事,必先利其器 在我們程式設計師的世界裡要想開發出一款優秀的專案,乙個好的開發環境是必需的。vue的開發環境是node.js和git的結合,尤其是node.js現在更是成為了我們前端開發者在面試時的加分項,甚者是必須項,今天的主角是vue,所以node.js就不多講了。不過可以為...

近階段學習總結

工作日誌 要養成寫工作日誌的習慣 記錄下每天的學習情況,包括新學的知識和每天的收穫 要對每天新學的知識加以總結,讓每一天的時間不至於白費,一定要總結,當天學到的新的知識點,尤其要反覆更新和學習,才能舉一反三。要專注於自己的事情,不要為外界的事情分心,一定要專注於自己的事情,才能讓自己走的更遠。要把握...

近階段python學習總結

學習python是自己誤打誤撞開始的,最開始接觸的是print hello world 然後就真正的開啟了新世界的大門。最近這段時間學習的主要內容有 1.print print i m fine print ok t nlet us go 2.input 預設通過input 輸入的內容是字串型別,訪...