今天是劉小愛(ài)自學(xué)Java的第136天捅膘。
感謝你的觀看添祸，謝謝你。
學(xué)習(xí)內(nèi)容安排如下：
學(xué)大概兩寻仗、三天的前端知識(shí)刃泌，Vue框架。
了解下前端開(kāi)發(fā)模式的發(fā)展署尤。
Vue的介紹與使用耙替。
Vue的快速入門(mén)，寫(xiě)一個(gè)入門(mén)案例曹体。
一俗扇、Vue的引入
先聊一下前端開(kāi)發(fā)模式的發(fā)展。
1靜態(tài)頁(yè)面
最初的網(wǎng)頁(yè)以HTML為主箕别，是純靜態(tài)的網(wǎng)頁(yè)铜幽。
頁(yè)面信息來(lái)自服務(wù)端的單向流通，開(kāi)發(fā)人員也只關(guān)心頁(yè)面的樣式和內(nèi)容即可究孕。
2異步刷新啥酱，操作DOM
2005年開(kāi)始，ajax逐漸被前端開(kāi)發(fā)人員所重視厨诸，因?yàn)榭梢酝瓿身?yè)面數(shù)據(jù)的動(dòng)態(tài)渲染镶殷。
此時(shí)的開(kāi)發(fā)人員不僅僅要編寫(xiě)HTML樣式，還要懂a(chǎn)jax與后端交互微酬，再通過(guò)JS操作Dom元素來(lái)實(shí)現(xiàn)頁(yè)面動(dòng)態(tài)效果绘趋。
比如我們以前學(xué)過(guò)的jQuery就是典型代表，同時(shí)我們對(duì)jQuery做一個(gè)簡(jiǎn)單的回顧：
①視圖：view
視圖颗管，頁(yè)面渲染結(jié)果陷遮，準(zhǔn)確地說(shuō)這兒不能算是一個(gè)視圖，這里還沒(méi)有完成渲染垦江。
但為了后續(xù)MVVM模式的說(shuō)明帽馋，我這里用這個(gè)例子來(lái)說(shuō)明，可以把它理解成視圖。
②模型：model
模型绽族，包括數(shù)據(jù)和一些基本操作姨涡，這里就可以理解成從后臺(tái)響應(yīng)的數(shù)據(jù)。
③DOM操作
那如何將model渲染到對(duì)應(yīng)的view中呢吧慢？
專(zhuān)業(yè)術(shù)語(yǔ)就是dom操作涛漂，在這里就是使用的jQuery中的html()方法。
要知道dom操作是很繁瑣的检诗，要記一堆方法强岸，這里html()方法算是簡(jiǎn)單的了吐葵。
3MVVM渴逻，關(guān)注模型和視圖
它的厲害之處在于：把開(kāi)發(fā)人員從繁瑣的DOM操作中解放出來(lái)了袍患。
VM：即View-Model，這也是MVVM名稱(chēng)的由來(lái)涕癣。而Vue就是一款MVVM模式的框架哗蜈。
Vue.js，前端框架三大巨頭之一坠韩，作者是一個(gè)中國(guó)人距潘，真心是爭(zhēng)氣呀，太厲害了只搁。
想都不用想音比，肯定學(xué)它，不僅僅是支持國(guó)產(chǎn)什么的氢惋，本質(zhì)上它確實(shí)很牛洞翩。
比我們以前學(xué)的jQuery更加地方便好用。
使用Vue之后焰望，開(kāi)發(fā)人員不用再關(guān)心Model和View之間是如何互相影響的：
只要我們Model發(fā)生了改變骚亿，View上自然就會(huì)表現(xiàn)出來(lái)。
當(dāng)用戶修改了View熊赖，Model中的數(shù)據(jù)也會(huì)跟著改變来屠。
二、Vue快速入門(mén)
1Node和NPM
NPM是Node提供的模塊管理工具震鹉，可以非常方便的下載安裝很多前端框架俱笛，包括Jquery、AngularJS传趾、VueJs都有迎膜。
為了后面學(xué)習(xí)方便，我們先安裝node及NPM工具浆兰，這個(gè)NPM就可以初步理解成Java中的maven工程磕仅，是一個(gè)管理工具珊豹。
下載Node后安裝，就會(huì)自帶NPM了榕订。
NPM默認(rèn)的倉(cāng)庫(kù)地址是在國(guó)外網(wǎng)站平夜，速度較慢，建議大家設(shè)置到淘寶鏡像卸亮。但是切換鏡像是比較麻煩的。
推薦一款切換鏡像的工具：nrm
命令有很多玩裙，但看名字都很簡(jiǎn)單兼贸，做個(gè)匯總：
查看NPM版本命令：npm -v
nrm安裝命令：npm install nrm -g
查看npm的倉(cāng)庫(kù)列表命令：nrm ls
使用淘寶鏡像源命令：nrm use taobao
測(cè)試速度命令：nrm test npm
測(cè)試淘寶：nrm test taobao
2創(chuàng)建一個(gè)新的工程
此時(shí)使用Static Web學(xué)習(xí)下Vue即可，
idea開(kāi)發(fā)工具中可以下載vue插件吃溅，步驟為File-Setting-plugins溶诞，再搜索vue安裝即可。
關(guān)于vue的使用决侈，可以直接使用公共的CDN服務(wù)螺垢，我們這里使用npm安裝。
在idea的左下角赖歌，有個(gè)Terminal按鈕：
這個(gè)窗口就等同于前面的dos窗口枉圃，現(xiàn)在直接在idea開(kāi)發(fā)工具中了，使用起來(lái)很是方便庐冯。
①項(xiàng)目初始化
命令：npm init -y孽亲。
init即為初始化的意思，-y表示yes確定的意思展父，初始化完成之后返劲，會(huì)在項(xiàng)目目錄下出現(xiàn)一個(gè)package.json文件。
有對(duì)項(xiàng)目的基本描述信息栖茉，例如名稱(chēng)篮绿、版本等，這個(gè)就有點(diǎn)類(lèi)似Java中的pom文件吕漂。
②安裝Vue
命令：npm install vue --save
安裝后會(huì)在項(xiàng)目中出現(xiàn)node_modules目錄亲配，并且在其中會(huì)有一個(gè)vue目錄。
此時(shí)再查看package.json痰娱，會(huì)發(fā)現(xiàn)變化：
這個(gè)package.json文件就和Java中的pom文件很類(lèi)似弃榨，vue就有點(diǎn)類(lèi)似于Java的jar包。
就連引入依賴(lài)的關(guān)鍵字都是一樣的梨睁，這些配置完成鲸睛，就可以使用vue進(jìn)行開(kāi)發(fā)了。
三坡贺、Vue入門(mén)案例
創(chuàng)建html文件官辈，寫(xiě)一個(gè)入門(mén)案例：
首先導(dǎo)入項(xiàng)目目錄中的vue箱舞，這不用多說(shuō)。
①對(duì)應(yīng)視圖view
這里的視圖就可以理解成這個(gè)div標(biāo)簽拳亿，其中它需要一個(gè)數(shù)據(jù)name晴股，需要從后臺(tái)查詢。
格式：{{name}}肺魁，注意有兩個(gè)大括號(hào)电湘。
②對(duì)應(yīng)模型model
當(dāng)然這里只是快速學(xué)習(xí)，自己用一個(gè)寫(xiě)好的數(shù)據(jù)代替即可鹅经，并沒(méi)有從數(shù)據(jù)庫(kù)去查詢寂呛，實(shí)際開(kāi)發(fā)過(guò)程中是要去數(shù)據(jù)庫(kù)查詢的。
el：element的簡(jiǎn)寫(xiě)瘾晃，通過(guò)id選擇器確定模塊贷痪，通過(guò)它將視圖和模型綁定。
data：就是數(shù)據(jù)的意思蹦误，很好理解劫拢。
以前需要使用dom操作將數(shù)據(jù)渲染到對(duì)應(yīng)的標(biāo)簽，現(xiàn)在數(shù)據(jù)和view自動(dòng)就可以完成强胰。
前面我們也說(shuō)過(guò)了VM：即View-Model舱沧，它是指模型與視圖間的雙向操作。
上面這個(gè)例子只是用model來(lái)渲染view偶洋，那view如何修改model呢狗唉？
③對(duì)話框
v-model="num"，即將對(duì)話框和model中的數(shù)據(jù)num綁定涡真，在對(duì)話框中輸入對(duì)應(yīng)的數(shù)值分俯，model中的數(shù)據(jù)num也會(huì)完成修改。
這個(gè)可就非常厲害了哆料，也很方便缸剪。
④點(diǎn)擊事件
@click，這是vue中的點(diǎn)擊事件編寫(xiě)格式东亦，同樣的也可以和model中的num綁定杏节。
好，代碼編寫(xiě)完畢典阵，做一個(gè)測(cè)試：
頁(yè)面上的數(shù)據(jù)會(huì)隨著對(duì)話框中輸入的數(shù)值動(dòng)態(tài)變化而變化奋渔，點(diǎn)擊事件也能完成加一的效果。
最后
謝謝你的觀看壮啊。
如果可以的話嫉鲸，麻煩幫忙點(diǎn)個(gè)贊，謝謝你歹啼。
