【Vue.js 牛刀小試】01:第一章 - 一些基礎概念

墨墨墨墨小宇發表於2018-10-31

前言

        Vue、React、Angular,當今前端界的三駕馬車,作為傳統的後端程式設計師,前端再也不是我們想的那種切切圖就可以了,第一次接觸的話,先了解了解一些基礎的概念。

        系列目錄地址:Vue.js 牛刀小試

        倉儲地址:Chapter01-Rookie Concept

乾貨合集

        1、 Vue.js是什麼?

        Vue (讀音 /vjuː/,類似於 view) 是一套用於構建使用者介面的漸進式框架,只關注於檢視層。在Vue的官網中我們可以看見,對於漸進式框架這個詞,作者是加粗表示的,按照作者的設計,Vue包含了現代前端框架所必須的內容,但是你並不需要一開始就把所有的東西都用上,這些都是可選的。

        對於Vue的解釋,推薦簡書上的一篇文章,文章地址:一句話理解Vue核心內容

        2、 使用Vue.js後與傳統的前端開發模式有何不同?

        在傳統的前端開發中,為了完成某個任務,我們需要使用 JS/Jquery 獲取到元素的DOM元素,隨後對獲取到的DOM元素進行操作。而當我們使用Vue進行前端開發後,對於DOM的所有操作全部交由Vue來處理,我們只需要關注於業務程式碼的實現就可以了。

        3、 如何使用Vue.js?

        3.1、使用 script 標籤引用Vue.js(這裡可以在Vue的官網上下載好js檔案後使用標籤引入,也可以使用cdn的形式引入)

<script  src="https://cdn.jsdelivr.net/npm/vue@2.5.17/dist/vue.js"></script>
複製程式碼

        3.2、使用 Vue-cli 構建單頁應用(需要先在電腦中安裝好node.js環境才可使用)

//1、全域性安裝Vue-Cli
npm install -g vue-cli
//2、進入建立專案目錄下
//3、建立使用webpack模板的Vue單頁應用,Enter後根據提示完成專案的建立
vue init webpack projectname
//4、進入專案目錄下
//5、下載專案引用的包
npm install
//6、執行專案
npm run dev
複製程式碼

        PS:這裡使用的是 vue-cli 的 2.x 版本,在最新的 vue-cli 3.x 版本中,包名已經發生了改變,你需要解除安裝原有的包之後重新安裝 vue-cli 才可以,同時也可以使用頁面的形式配置專案了。

//1、解除安裝原有的 vue-cli 版本
npm uninstall vue-cli -g
//2、安裝新版本 vue-cli
npm install -g @vue/cli
//3、建立專案
vue create projectname
//3、使用頁面建立
vue ui
複製程式碼

        4、 MVC與MVVM

        4.1、MVC(Model-View-Controller):是一種表現模式(UI / Presentation Pattern),它將軟體的UI部分的設計拆分成三個主要單元,分別是Model、View和Controller。

        MVC核心是控制器,它負責處理瀏覽器傳送過來的所有請求,並決定要將什麼內容響應給瀏覽器。

        Model:模型,用於儲存資料的元件

        View:檢視,根據Model資料進行內容展示的元件

        Controller:控制器,接受並處理使用者指令,並返回內容

        4.2、MVVM(Model-View-ViewModel):MVVM的核心是ViewModel,它提供了對於Model和ViewModel的雙向資料繫結,通過ViewModel連線View和Model,確保檢視與資料的一致性,而這個過程是框架自動完成的,無需手動干預。

MVVM中各模組間聯絡
        圖片版權說明:由Ugaya40 - 自己的作品CC BY-SA 3.0連結

總結

        本篇文章主要學習了一些 vue 涉及到的一些概念,在後面的學習中,也會逐漸往本篇文章中裡面新增用到的知識,文章開始處提供倉儲地址裡會將涉及到的知識點的彙總成一個markdown文件,希望多多關注啊。

佔坑

        作者:墨墨墨墨小宇
        個人簡介:96年生人,出生於安徽某四線城市,畢業於Top 10000000 院校。.NET程式設計師,槍手死忠,喵星人。於2016年12月開始.NET程式設計師生涯,微軟.NET技術的堅定堅持者,立志成為雲養貓的少年中面向谷歌程式設計最厲害的.NET程式設計師。
        個人部落格:yuiter.com
        部落格園部落格:www.cnblogs.com/danvic712

相關文章