免费视频淫片aa毛片_日韩高清在线亚洲专区vr_日韩大片免费观看视频播放_亚洲欧美国产精品完整版

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

感謝你的觀看，謝謝你。

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

• 學(xué)大概兩、三天的前端知識(shí)，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í)我們對(duì)jQuery做一個(gè)簡單的回顧：

①視圖：view

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

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

②模型：model

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

③DOM操作

那如何將model渲染到對(duì)應(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文件。

有對(duì)項(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，這不用多說。

①對(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è)寫好的數(shù)據(jù)代替即可，并沒有從數(shù)據(jù)庫去查詢，實(shí)際開發(fā)過程中是要去數(shù)據(jù)庫查詢的。

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

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

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

上面這個(gè)例子只是用model來渲染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)擊事件編寫格式，同樣的也可以和model中的num綁定。

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

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

最后

謝謝你的觀看。

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