今天是劉小愛自學(xué)Java的第136天,。

感謝你的觀看，謝謝你,。

學(xué)習(xí)內(nèi)容安排如下：

• 學(xué)大概兩,、三天的前端知識，Vue框架,。
• 了解下前端開發(fā)模式的發(fā)展,。
• Vue的介紹與使用。
• Vue的快速入門,，寫一個(gè)入門案例,。

一、Vue的引入

先聊一下前端開發(fā)模式的發(fā)展,。

1靜態(tài)頁面

最初的網(wǎng)頁以HTML為主,，是純靜態(tài)的網(wǎng)頁。

頁面信息來自服務(wù)端的單向流通,，開發(fā)人員也只關(guān)心頁面的樣式和內(nèi)容即可,。

2異步刷新，操作DOM

2005年開始,，ajax逐漸被前端開發(fā)人員所重視,，因?yàn)榭梢酝瓿身撁鏀?shù)據(jù)的動(dòng)態(tài)渲染。

此時(shí)的開發(fā)人員不僅僅要編寫HTML樣式,，還要懂a(chǎn)jax與后端交互,，再通過JS操作Dom元素來實(shí)現(xiàn)頁面動(dòng)態(tài)效果。

比如我們以前學(xué)過的jQuery就是典型代表,，同時(shí)我們對jQuery做一個(gè)簡單的回顧：

①視圖：view

視圖,，頁面渲染結(jié)果，準(zhǔn)確地說這兒不能算是一個(gè)視圖,，這里還沒有完成渲染。

但為了后續(xù)MVVM模式的說明，我這里用這個(gè)例子來說明,，可以把它理解成視圖,。

②模型：model

模型，包括數(shù)據(jù)和一些基本操作,，這里就可以理解成從后臺響應(yīng)的數(shù)據(jù),。

③DOM操作

那如何將model渲染到對應(yīng)的view中呢？

專業(yè)術(shù)語就是dom操作,，在這里就是使用的jQuery中的html()方法,。

要知道dom操作是很繁瑣的，要記一堆方法,，這里html()方法算是簡單的了,。

3MVVM，關(guān)注模型和視圖

它的厲害之處在于：把開發(fā)人員從繁瑣的DOM操作中解放出來了,。

VM：即View-Model,，這也是MVVM名稱的由來。而Vue就是一款MVVM模式的框架,。

Vue.js,，前端框架三大巨頭之一，作者是一個(gè)中國人,，真心是爭氣呀,，太厲害了。

想都不用想,，肯定學(xué)它,，不僅僅是支持國產(chǎn)什么的，本質(zhì)上它確實(shí)很牛,。

比我們以前學(xué)的jQuery更加地方便好用,。

使用Vue之后，開發(fā)人員不用再關(guān)心Model和View之間是如何互相影響的：

• 只要我們Model發(fā)生了改變,，View上自然就會(huì)表現(xiàn)出來,。
• 當(dāng)用戶修改了View，Model中的數(shù)據(jù)也會(huì)跟著改變,。

二,、Vue快速入門

1Node和NPM

NPM是Node提供的模塊管理工具，可以非常方便的下載安裝很多前端框架,，包括Jquery,、AngularJS、VueJs都有,。

為了后面學(xué)習(xí)方便,，我們先安裝node及NPM工具，這個(gè)NPM就可以初步理解成Java中的maven工程，是一個(gè)管理工具,。

下載Node后安裝,，就會(huì)自帶NPM了。

NPM默認(rèn)的倉庫地址是在國外網(wǎng)站,，速度較慢,，建議大家設(shè)置到淘寶鏡像。但是切換鏡像是比較麻煩的,。

推薦一款切換鏡像的工具：nrm

命令有很多,，但看名字都很簡單，做個(gè)匯總：

• 查看NPM版本命令：npm -v
• nrm安裝命令：npm install nrm -g
• 查看npm的倉庫列表命令：nrm ls
• 使用淘寶鏡像源命令：nrm use taobao
• 測試速度命令：nrm test npm
• 測試淘寶：nrm test taobao

2創(chuàng)建一個(gè)新的工程

此時(shí)使用Static Web學(xué)習(xí)下Vue即可,，

idea開發(fā)工具中可以下載vue插件,，步驟為File-Setting-plugins，再搜索vue安裝即可,。

關(guān)于vue的使用,，可以直接使用公共的CDN服務(wù)，我們這里使用npm安裝,。

在idea的左下角,，有個(gè)Terminal按鈕：

這個(gè)窗口就等同于前面的dos窗口，現(xiàn)在直接在idea開發(fā)工具中了,，使用起來很是方便,。

①項(xiàng)目初始化

命令：npm init -y。

init即為初始化的意思,，-y表示yes確定的意思,，初始化完成之后，會(huì)在項(xiàng)目目錄下出現(xiàn)一個(gè)package.json文件,。

有對項(xiàng)目的基本描述信息,，例如名稱、版本等,，這個(gè)就有點(diǎn)類似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文件很類似，vue就有點(diǎn)類似于Java的jar包,。

就連引入依賴的關(guān)鍵字都是一樣的,，這些配置完成，就可以使用vue進(jìn)行開發(fā)了,。

三,、Vue入門案例

創(chuàng)建html文件,，寫一個(gè)入門案例：

首先導(dǎo)入項(xiàng)目目錄中的vue，這不用多說,。

①對應(yīng)視圖view

這里的視圖就可以理解成這個(gè)div標(biāo)簽,，其中它需要一個(gè)數(shù)據(jù)name，需要從后臺查詢,。

格式：{{name}}，注意有兩個(gè)大括號,。

②對應(yīng)模型model

當(dāng)然這里只是快速學(xué)習(xí),，自己用一個(gè)寫好的數(shù)據(jù)代替即可，并沒有從數(shù)據(jù)庫去查詢,，實(shí)際開發(fā)過程中是要去數(shù)據(jù)庫查詢的,。

• el：element的簡寫，通過id選擇器確定模塊,，通過它將視圖和模型綁定,。
• data：就是數(shù)據(jù)的意思，很好理解,。

以前需要使用dom操作將數(shù)據(jù)渲染到對應(yīng)的標(biāo)簽,，現(xiàn)在數(shù)據(jù)和view自動(dòng)就可以完成。

前面我們也說過了VM：即View-Model,，它是指模型與視圖間的雙向操作,。

上面這個(gè)例子只是用model來渲染view，那view如何修改model呢,？

③對話框

v-model="num",，即將對話框和model中的數(shù)據(jù)num綁定，在對話框中輸入對應(yīng)的數(shù)值,，model中的數(shù)據(jù)num也會(huì)完成修改,。

這個(gè)可就非常厲害了，也很方便,。

④點(diǎn)擊事件

@click,，這是vue中的點(diǎn)擊事件編寫格式，同樣的也可以和model中的num綁定,。

好,，代碼編寫完畢，做一個(gè)測試：

頁面上的數(shù)據(jù)會(huì)隨著對話框中輸入的數(shù)值動(dòng)態(tài)變化而變化,，點(diǎn)擊事件也能完成加一的效果,。

最后

謝謝你的觀看。

如果可以的話,，麻煩幫忙點(diǎn)個(gè)贊,，謝謝你,。