Vue、React、Angular,當今前端界的三駕馬車,做爲傳統的後端程序員,前端不再是咱們想的那種切切圖就能夠了,第一次接觸的話,先了解了解一些基礎的概念。 php
學習系列目錄地址:http://www.javashuo.com/article/p-bzzucmub-ba.htmlhtml
倉儲地址:https://github.com/Lanesra712/VueTrial/blob/master/docs/Concept.md
前端
Vue (讀音 /vjuː/,相似於 view) 是一套用於構建用戶界面的漸進式框架,只關注於視圖層。在Vue的官網中咱們能夠看見,對於漸進式框架這個詞,做者是加粗表示的,按照做者的設計,Vue包含了現代前端框架所必須的內容,可是你並不須要一開始就把全部的東西都用上,這些都是可選的。vue
對於Vue的解釋,推薦簡書上的一篇文章,文章地址:https://www.jianshu.com/p/a4339bad5256 node
在傳統的前端開發中,爲了完成某個任務,咱們須要使用 JS/Jquery 獲取到元素的DOM元素,隨後對獲取到的DOM元素進行操做。而當咱們使用Vue進行前端開發後,對於DOM的全部操做所有交由Vue來處理,咱們只須要關注於業務代碼的實現就能夠了。webpack
3.一、使用 script 標籤引用Vue.js(這裏能夠在Vue的官網上下載好js文件後使用標籤引入,也可使用cdn的形式引入)git
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.17/dist/vue.js"></script>
3.二、使用 Vue-cli 構建單頁應用(須要先在電腦中安裝好node.js環境纔可以使用)程序員
//一、全局安裝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 才能夠,同時也可使用頁面的形式配置項目了。github
1 //一、卸載原有的 vue-cli 版本 2 npm uninstall vue-cli -g 3 //二、安裝新版本 vue-cli 4 npm install -g @vue/cli 5 //三、建立項目 6 vue create projectname 7 //三、使用頁面建立 8 vue ui
4.一、MVC(Model-View-Controller):是一種表現模式(UI / Presentation Pattern),它將軟件的UI部分的設計拆分紅三個主要單元,分別是Model、View和Controller。MVC核心是控制器,它負責處理瀏覽器傳送過來的全部請求,並決定要將什麼內容響應給瀏覽器。web
Model:模型,用於存儲數據的組件;
View:視圖,根據Model數據進行內容展現的組件;
Controller:控制器,接受並處理用戶指令,並返回內容
4.二、MVVM(Model-View-ViewModel):MVVM的核心是ViewModel,它提供了對於Model和ViewModel的雙向數據綁定,經過ViewModel鏈接View和Model,確保視圖與數據的一致性,而這個過程是框架自動完成的,無需手動干預。
圖片版權說明:由Ugaya40 - 本身的做品,CC BY-SA 3.0,連接
這一章咱們主要學習了一些 vue 涉及到的一些概念,在後面的學習中,也會逐漸往本篇文章中裏面添加用到的知識,文章開始處提供倉儲地址裏會將涉及到的知識點的彙總成一個markdown文檔,但願多多關注啊,嘻嘻。