android

Vue.js教程-目錄


簡介

  • 本目錄作為Vue教程的首頁,所以會持續更新。
  • 如果某篇章節中有錯誤的地方,希望大家能夠指出來,我會更正,私信和評論裡說都可以,不懂的地方也可以說,如果我也不會那就請教一下大佬們吧,畢竟我對前端的東西也不是特別瞭解,多多包涵!嘿嘿。

章節列表

章節名稱 地址
Vue.js教程-安裝和HelloWorld https://coderhqf.blog.csdn.net/article/details/107574556
Vue.js教程-Vue專案的目錄結構和.vue檔案的構成 https://coderhqf.blog.csdn.net/article/details/107621070
Vue.js教程-Vue基本指令 https://coderhqf.blog.csdn.net/article/details/107677588
Vue.js教程-元件化開發 https://coderhqf.blog.csdn.net/article/details/107783664

Vue簡介

  • Vue官網
  • Vue (讀音 /vjuː/,類似於 view) 是一套用於構建使用者介面的漸進式框架。與其它大型框架不同的是,Vue 被設計為可以自底向上逐層應用。
  • Vue 的核心庫只關注檢視層,不僅易於上手,還便於與第三方庫或既有專案整合。另一方面,當與現代化的工具鏈以及各種支援類庫結合使用時,Vue 也完全能夠為複雜的單頁應用提供驅動。
  • Vue. 的目標是透過儘可能簡單的 API 實現響應的資料繫結和組合的檢視元件。

Vue特點

  • 易用:在有HTML CSS JavaScript的基礎上,快速上手。
  • 靈活:簡單小巧的核心,漸進式技術棧,足以應付任何規模的應用。
  • 效能:20kb min+gzip 執行大小、超快虛擬 DOM 、最省心的最佳化。

Vue中資料觀測的實現

  • Vue.js利用了ES5的Object.defineProperty方法,直接將原生資料物件的屬性改造為getter和setter,在這兩個函式內部實現依賴的收集和觸發,而且完美支援巢狀的物件結構。對於陣列,則透過包裹陣列的可變方法(比如push)來監聽陣列的變化。這使得操作Vue.js的資料和操作原生物件幾乎沒有差別[注:在新增/刪除屬性,或是修改陣列特定位置元素時,需要呼叫特定的函式,如obj.$add(key, value)才能觸發更新。這是受ES5的語言特性所限。],資料操作的邏輯更為清晰流暢,和第三方資料同步方案的整合也更為方便。

Vue專案打包

  • 在構建大型應用時,推薦使用Webpack+vue-loader這個組合以使針對元件的開發更高效。
  • 在後面的章節中會細說怎麼打包並部署到伺服器上,也會講怎麼白嫖阿里雲(學生版),好像有大佬寫過這個文章,大家搜一下也行,最重要的還是開發。

Vue的元件化開發

  • Vue最主要的是元件化開發,因為是單頁面,也就是在一個頁面中渲染出多個頁面的效果,這個特點能夠讓非常多的元件在不同的專案中重複使用。
  • Vue中的元件基於Web components進行了上層功能的實現,例如資料繫結、動畫系統等。

Vue與後端的資料互動:axios

  • 傳統的一般都用Ajax,但如果請求有先後關係的話就容易產生回撥地獄,套娃套的吧。
  • Vue2之後就推薦使用axios了,等寫到前後端互動的時候再講這個就行。

相關說明

  • Vue參考了AngularJS、KnockoutJS、Ractive.js、Rivets.js,可以是把他們的缺點都最佳化成了自己的優點,參考過程中不但去其糟粕,還加入了自己的特性,但目前也只有國內用Vue的比較多,畢竟社群小,資源少,但以後應該會是潮流,因為開發快好上手。
  • 其實Vue相對來說是非常好上手的,因為它只專注於檢視層。如果只是要用的話,其實對原理也不用太糾結,但既然要全棧,何不貫徹到底,我也是在學習中,如果想正規學習的話,我比較推薦coderwhy-王紅君老師的課,他講的挺好的,有些原理講的也是很清楚的,渠道嘛,B站大學、騰訊課堂啥的都有,還有他的微博,大家可以去網上找。
  • 再強調一遍,如果發現不對的地方請聯絡我,因為不想誤人子弟,畢竟這是自己的總結,也不想以後自己還用著錯誤的東西,嘿嘿嘿。。。
  • Vue作為現在國內最潮流的前端框架,也逐漸成為後端開發人員需要學的新知識了,我看現在很多後端崗位的面試裡都會提到這個前端框架,所以大家學一下是不虧的。
  • 在CSDN雜誌中有一篇文章:Vue.js:輕量高效的前端元件化方案,如果大家有興趣就看看吧。

本文章已修改原文用詞符合繁體字使用者習慣使其容易閱讀

版權宣告:此處為CSDN博主「CoderHqf」的原創文章,依據CC 4.0 BY-SA版權協議,轉載請附上原文出處連結及本宣告。

原文連結:https://blog.csdn.net/weixin_45062103/article/details/107763788