好程式設計師web前端培訓分享小白學web常見的問題

　　好程式設計師web 前端培訓分享小白學 web 常見的問題， 今天跟大家分享 的是 小白學web 常見的問題。希望本篇文章能夠對小夥伴們有所幫助。

　　 1 、 Vue.js 是什麼 ?

　　 漸進式框架

　　 自底向上增量開發的設計

　　 易學習

　　 易整合

　　 Vue.js( 讀音 /vju ː /, 類似於 view) 是一套構建使用者介面的 漸進式框架。與其他重量級框架不同的是， Vue 採用自底向上增量開發的設計。 Vue 的核心庫只關注檢視層，並且非常容易學習，非常容易與其它庫或已有專案整合。另一方面， Vue 完全有能力驅動採用單檔案元件和 Vue 生態系統支援的庫開發的複雜單頁應用。

　　 2 、 vue.js 到底適合做哪種型別的介面 ?

　　 a 、表單項繁多

　　 b 、內容需要根據使用者的操作進行修改

　　 Vue.js 就是一個用於搭建類似於網頁版知乎這種表單項繁多，且內容需要根據使用者的操作進行修改的網頁版應用。

　　 3 、單頁應用程式 (SPA) 是什麼 ?

　　 一個頁面就是應用( 子應用 )

　　 顧名思義，單頁應用一般指的就是一個頁面就是應用，當然也可以是一個子應用，比如說知乎的一個頁面就可以視為一個子應用。單頁應用程式中一般互動處理非常多，而且頁面中的內容需要根據使用者的操作動態變化。

　　 4 、 前面說的網頁版知乎我也可以用 JQuery 寫啊，為什麼要用 Vue.js 呢 ?

　　 a 、產品是絕對需要反覆修改的

　　 b 、修改可能會導致 DOM 的關聯與巢狀層次要發生改變從而使 jquery 結構相關程式碼變的異常複雜

　　 c 、 vue.js 可以解決這個問題

　　 你是否還記得你當初寫JQuery 的時候，有寫過 ('#xxx').parent().parent().parent() 這種程式碼呢 ? 當你第一次寫的時候，你覺得頁面元素不多，不就是找這個元素的爸爸的爸爸的爸爸嗎，我大不了在註釋裡面寫清楚這個元素的爸爸的爸爸的爸爸不就好了。但是萬一過幾天之後你的專案組長或者你的產品經理突然對你做的網頁提出修改要求，這個修改要求將會影響頁面的結構，也就是 DOM 的關聯與巢狀層次要發生改變，那麼 ( ‘ #xxx ’ ).parent().parent().parent() 可能就會變成 $( ‘ #xxx ’ ).parent().parent().parent().parent().parent() 了。

　　 這還不算什麼，等以後產品迭代越來越快，修改越來越多，而且頁面中類似的關聯和巢狀DOM 元素不止一個，那麼修改起來將非常費勁。而且 JQuery 選擇器查詢頁面元素以及 DOM 操作本身也是有效能損失的，可能到時候開啟這個頁面，會變得越來越卡，而你卻無從下手。

　　 這個時候如果你學過Vue.js ，那麼這些抱怨將不復存在。

　　 5 、前端裡面常說的檢視層是什麼 ?

　　 我們把HTML 中的 DOM 就可以與其他的部分獨立開來劃分出一個層次，這個層次就叫做檢視層。

　　 Vue 的核心庫只關注檢視層

　　 6 、使用 jquery 開發完整頁面的流程 ?

　　 a 、 html 寫構架

　　 b 、 css 裝飾

　　 c 、 js 互動

　　 講到JQuery ，就不得不說到 JavaScript 的 DOM 操作了。如果你用 JQuery 來開發一個知乎，那麼你就需要用 JQuery 中的各種 DOM 操作方法去操作 HTML 的 DOM 結構了。

　　 現在我們把一個網頁應用抽象一下，那麼HTML 中的 DOM 其實就是檢視，一個網頁就是透過 DOM 的組合與巢狀，形成了最基本的檢視結構，再透過 CSS 的修飾，在基本的檢視結構上“化妝”讓他們看起來更加美觀。最後涉及到互動部分，就需要用到 JavaScript 來接受使用者的互動請求，並且透過事件機制來響應使用者的互動操作，並且在事件的處理函式中進行各種資料的修改，比如說修改某個 DOM 中的 innerHTML 或者 innerText 部分。

　　 7 、 Vue.js 為什麼能讓基於網頁的前端應用程式開發起來這麼方便 ?

　　 a 、有宣告式

　　 b 、響應式的資料繫結

　　 c 、元件化的開發

　　 d 、 Virtual DOM

　　 因為Vue.js 有宣告式，響應式的資料繫結，與元件化的開發，並且還使用了 Virtual DOM 這個看名字就覺得高大上的技術。

　　 8 、 vue.js 中常說的資料動態繫結是什麼 ?

　　 就是vue.js 會自動響應資料的變化情況，並且根據使用者在程式碼中預先寫好的繫結關係，對所有繫結在一起的資料和檢視內容都進行修改。而這種繫結關係，在圖上是以 input 標籤的 v-model 屬性來宣告的，因此你在別的地方可能也會看到有人粗略的稱 vue.js 為宣告式渲染的模版引擎。

　　 9 、前端中為什麼要元件化開發 ?

　　 a 、非元件化開發程式碼和工作量都非常大

　　 b 、修改起來生不如死

　　 但是現在我們做單頁應用，頁面互動和結構十分複雜，一個頁面上就有許許多多的模組需要編寫，而且往往一個模組的程式碼量和工作量就非常龐大，如果還按照原先的方法來開發，那麼會累死人。而且遇到以後的產品需求變更，修改起來也非常麻煩，生怕動了其中一個div 之後，其他 div 跟著雪崩，整個頁面全部亂套，或者由於 JavaScript 的事件冒泡機制，導致修改一些內層的 DOM 事件處理函式之後，出現各種莫名其妙的詭異 BUG 。

　　 10 、前端中如何進行元件化開發 ?

　　 a 、借用的後端的物件導向中的模組化思想 ( 把一些大功能拆分成許多函式，然後分配給不同的人來開發 )

　　 b 、把一個單頁應用中的各種模組拆分到一個一個單獨的元件 (component) 中，我們只要先在父級應用中寫好各種元件標籤 ( 佔坑 ) ，並且在元件標籤中寫好要傳入元件的引數 ( 就像給函式傳入引數一樣，這個引數叫做元件的屬性 ) ，然後再分別寫好各種元件的實現 ( 填坑 )

　　 在物件導向程式設計中，我們可以使用物件導向的思想將各種模組打包成類或者把一個大的業務模組拆分成更多更小的幾個類。在程式導向程式設計中，我們也可以把一些大功能拆分成許多函式，然後分配給不同的人來開發。

　　 在前端應用，我們是否也可以像程式設計一樣把模組封裝呢? 這就引入了元件化開發的思想。

　　 Vue.js 透過元件，把一個單頁應用中的各種模組拆分到一個一個單獨的元件 (component) 中，我們只要先在父級應用中寫好各種元件標籤 ( 佔坑 ) ，並且在元件標籤中寫好要傳入元件的引數 ( 就像給函式傳入引數一樣，這個引數叫做元件的屬性 ) ，然後再分別寫好各種元件的實現 ( 填坑 ) ，然後整個應用就算做完了。