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

系列目錄地址

• 1、基礎知識概覽
  • 第一章 - 一些基礎概念（posted at 2018-10-31）

前言

        Vue、React、Angular，當今前端界的三駕馬車，做爲傳統的後端程序員，前端不再是咱們想的那種切切圖就能夠了，第一次接觸的話，先了解了解一些基礎的概念。

        倉儲地址：Chapter01-Rookie Concept

乾貨合集

        一、 Vue.js是什麼?

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

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

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

        在傳統的前端開發中，爲了完成某個任務，咱們須要使用 JS/Jquery 獲取到元素的DOM元素，隨後對獲取到的DOM元素進行操做。而當咱們使用Vue進行前端開發後，對於DOM的全部操做所有交由Vue來處理，咱們只須要關注於業務代碼的實現就能夠了。

        三、 如何使用Vue.js?

        3.一、使用 script 標籤引用Vue.js（這裏能夠在Vue的官網上下載好js文件後使用標籤引入，也可使用cdn的形式引入）

<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
//二、進入建立項目目錄下
//三、建立使用webpack模板的Vue單頁應用，Enter後根據提示完成項目的建立
vue init webpack projectname
//四、進入項目目錄下
//五、下載項目引用的包
npm install
//六、運行項目
npm run dev
複製代碼

        PS：這裏使用的是 vue-cli 的 2.x 版本，在最新的 vue-cli 3.x 版本中，包名已經發生了改變，你須要卸載原有的包以後從新安裝 vue-cli 才能夠，同時也可使用頁面的形式配置項目了。

//一、卸載原有的 vue-cli 版本
npm uninstall vue-cli -g
//二、安裝新版本 vue-cli
npm install -g @vue/cli
//三、建立項目
vue create projectname
//三、使用頁面建立
vue ui
複製代碼

        四、 MVC與MVVM

        4.一、MVC（Model-View-Controller）：是一種表現模式（UI / Presentation Pattern），它將軟件的UI部分的設計拆分紅三個主要單元，分別是Model、View和Controller。

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

        Model：模型，用於存儲數據的組件

        View：視圖，根據Model數據進行內容展現的組件

        Controller：控制器，接受並處理用戶指令，並返回內容

        4.二、MVVM（Model-View-ViewModel）：MVVM的核心是ViewModel，它提供了對於Model和ViewModel的雙向數據綁定，經過ViewModel鏈接View和Model,確保視圖與數據的一致性,而這個過程是框架自動完成的,無需手動干預。

        圖片版權說明：由 Ugaya40 - 本身的做品， CC BY-SA 3.0， 連接

總結

        本篇文章主要學習了一些 vue 涉及到的一些概念，在後面的學習中，也會逐漸往本篇文章中裏面添加用到的知識，文章開始處提供倉儲地址裏會將涉及到的知識點的彙總成一個markdown文檔，但願多多關注啊。

佔坑

        做者：墨墨墨墨小宇
        我的簡介：96年生人，出生於安徽某四線城市，畢業於Top 10000000 院校。.NET程序員，槍手死忠，喵星人。於2016年12月開始.NET程序員生涯，微軟.NET技術的堅決堅持者，立志成爲雲養貓的少年中面向谷歌編程最厲害的.NET程序員。
        我的博客：yuiter.com
        博客園博客：www.cnblogs.com/danvic712