[Vue 牛刀小試]:第一章 - 一些基礎概念


 一、前言

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

  學習系列目錄地址:https://www.cnblogs.com/danvic712/p/9549100.html

  倉儲地址:https://github.com/Lanesra712/VueTrial/blob/master/docs/Concept.md

 二、干貨合集

  1、 Vue.js是什么?

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

  對於Vue的解釋,推薦簡書上的一篇文章,文章地址:https://www.jianshu.com/p/a4339bad5256  

  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 //1、卸載原有的 vue-cli 版本
2 npm uninstall vue-cli -g
3 //2、安裝新版本 vue-cli
4 npm install -g @vue/cli
5 //3、創建項目
6 vue create projectname
7 //3、使用頁面創建
8 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文檔,希望多多關注啊,嘻嘻。


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM