今天是劉小愛自學Java的第136天。html
感謝你的觀看，謝謝你。前端
學習內容安排以下：vue
-
學大概兩、三天的前端知識，Vue框架。 -
瞭解下前端開發模式的發展。 -
Vue的介紹與使用。 -
Vue的快速入門，寫一個入門案例。
1、Vue的引入
先聊一下前端開發模式的發展。node
1靜態頁面web
最初的網頁以HTML爲主，是純靜態的網頁。ajax
頁面信息來自服務端的單向流通，開發人員也只關心頁面的樣式和內容便可。數據庫
2異步刷新，操做DOMnpm
2005年開始，ajax逐漸被前端開發人員所重視，由於能夠完成頁面數據的動態渲染。json
此時的開發人員不只僅要編寫HTML樣式，還要懂ajax與後端交互，再經過JS操做Dom元素來實現頁面動態效果。後端
好比咱們之前學過的jQuery就是典型表明，同時咱們對jQuery作一個簡單的回顧：
①視圖：view
視圖，頁面渲染結果，準確地說這兒不能算是一個視圖，這裏尚未完成渲染。
但爲了後續MVVM模式的說明，我這裏用這個例子來講明，能夠把它理解成視圖。
②模型：model
模型，包括數據和一些基本操做，這裏就能夠理解成從後臺響應的數據。
③DOM操做
那如何將model渲染到對應的view中呢？
專業術語就是dom操做，在這裏就是使用的jQuery中的html()方法。
要知道dom操做是很繁瑣的，要記一堆方法，這裏html()方法算是簡單的了。
3MVVM，關注模型和視圖
它的厲害之處在於：把開發人員從繁瑣的DOM操做中解放出來了。
VM：即View-Model，這也是MVVM名稱的由來。而Vue就是一款MVVM模式的框架。
Vue.js，前端框架三大巨頭之一，做者是一箇中國人，真心是爭氣呀，太厲害了。
想都不用想，確定學它，不只僅是支持國產什麼的，本質上它確實很牛。
比咱們之前學的jQuery更加地方便好用。
使用Vue以後，開發人員不用再關心Model和View之間是如何互相影響的：
-
只要咱們Model發生了改變，View上天然就會表現出來。 -
當用戶修改了View，Model中的數據也會跟着改變。
2、Vue快速入門
1Node和NPM
NPM是Node提供的模塊管理工具，能夠很是方便的下載安裝不少前端框架，包括Jquery、AngularJS、VueJs都有。
爲了後面學習方便，咱們先安裝node及NPM工具，這個NPM就能夠初步理解成Java中的maven工程，是一個管理工具。
下載Node後安裝，就會自帶NPM了。
NPM默認的倉庫地址是在國外網站，速度較慢，建議你們設置到淘寶鏡像。可是切換鏡像是比較麻煩的。
推薦一款切換鏡像的工具：nrm
命令有不少，但看名字都很簡單，作個彙總：
-
查看NPM版本命令：npm -v -
nrm安裝命令：npm install nrm -g -
查看npm的倉庫列表命令：nrm ls -
使用淘寶鏡像源命令：nrm use taobao -
測試速度命令：nrm test npm -
測試淘寶：nrm test taobao
2建立一個新的工程
此時使用Static Web學習下Vue便可，
idea開發工具中能夠下載vue插件，步驟爲File-Setting-plugins，再搜索vue安裝便可。
關於vue的使用，能夠直接使用公共的CDN服務，咱們這裏使用npm安裝。
在idea的左下角，有個Terminal按鈕：
這個窗口就等同於前面的dos窗口，如今直接在idea開發工具中了，使用起來非常方便。
①項目初始化
命令：npm init -y。
init即爲初始化的意思，-y表示yes肯定的意思，初始化完成以後，會在項目目錄下出現一個package.json文件。
有對項目的基本描述信息，例如名稱、版本等，這個就有點相似Java中的pom文件。
②安裝Vue
命令：npm install vue --save
安裝後會在項目中出現node_modules目錄，而且在其中會有一個vue目錄。
此時再查看package.json，會發現變化：
這個package.json文件就和Java中的pom文件很相似，vue就有點相似於Java的jar包。
就連引入依賴的關鍵字都是同樣的，這些配置完成，就可使用vue進行開發了。
3、Vue入門案例
建立html文件，寫一個入門案例：
首先導入項目目錄中的vue，這不用多說。
①對應視圖view
這裏的視圖就能夠理解成這個div標籤，其中它須要一個數據name，須要從後臺查詢。
格式：{{name}}，注意有兩個大括號。
②對應模型model
固然這裏只是快速學習，本身用一個寫好的數據代替便可，並無從數據庫去查詢，實際開發過程當中是要去數據庫查詢的。
-
el：element的簡寫，經過id選擇器肯定模塊，經過它將視圖和模型綁定。 -
data：就是數據的意思，很好理解。
之前須要使用dom操做將數據渲染到對應的標籤，如今數據和view自動就能夠完成。
前面咱們也說過了VM：即View-Model，它是指模型與視圖間的雙向操做。
上面這個例子只是用model來渲染view，那view如何修改model呢？
③對話框
v-model="num"，即將對話框和model中的數據num綁定，在對話框中輸入對應的數值，model中的數據num也會完成修改。
這個可就很是厲害了，也很方便。
④點擊事件
@click，這是vue中的點擊事件編寫格式，一樣的也能夠和model中的num綁定。
好，代碼編寫完畢，作一個測試：
頁面上的數據會隨着對話框中輸入的數值動態變化而變化，點擊事件也能完成加一的效果。
最後
謝謝你的觀看。
若是能夠的話，麻煩幫忙點個贊，謝謝你。
本文分享自微信公衆號 - 劉小愛（liuxiaoai946）。
若有侵權，請聯繫 support@oschina.cn 刪除。
本文參與「OSC源創計劃」，歡迎正在閱讀的你也加入，一塊兒分享。