許昌市做網(wǎng)站公司seo頁(yè)面優(yōu)化公司
1?基本介紹
（1）Vue 是一個(gè)前端框架, 易于構(gòu)建用戶(hù)界面
（2）Vue 的核心庫(kù)只關(guān)注視圖層，不僅易于上手，還便于與第三方庫(kù)或項(xiàng)目整合
（3）支持和其它類(lèi)庫(kù)結(jié)合使用
（4）開(kāi)發(fā)復(fù)雜的單頁(yè)應(yīng)用非常方便
（5）Vue 是 Vue.js 的簡(jiǎn)稱(chēng)
官網(wǎng): https://cn.vuejs.org/
git 地址: https://github.com/vuejs
2?MVVM 機(jī)制示意圖
解讀 MVVM 思想(上圖)
- M∶即 Model，模型，包括數(shù)據(jù)和一些基本操作
- V∶即View，視圖，頁(yè)面渲染結(jié)果
- VM∶即 View-Model，模型與視圖間的雙向操作(無(wú)需開(kāi)發(fā)人員干涉)
- 在 MVVM之前，開(kāi)發(fā)人員從后端獲取需要的數(shù)據(jù)模型，然后要通過(guò) DOM 操作 Model 渲染到View 中。而后當(dāng)用戶(hù)操作視圖，我們還需要通過(guò) DOM獲取 View 中的數(shù)據(jù)， 然后同步到Model 中。
- 而 MVVM中的VM 要做的事情就是把DOM 操作完全封裝起來(lái)，開(kāi)發(fā)人員不用再關(guān)心 Model 和View 之間是如何互相影響的
- 只要我們 Model 發(fā)生了改變，View上自然就會(huì)表現(xiàn)出來(lái)
- 當(dāng)用戶(hù)修改了View，Model 中的數(shù)據(jù)也會(huì)跟著改變。
- 結(jié)果：把開(kāi)發(fā)人員從繁瑣的 DOM操作中解放出來(lái)，把關(guān)注點(diǎn)放在如何操作 Model上, 大 大提高開(kāi)發(fā)效率?
3?快速入門(mén)
官網(wǎng)文檔：https://cn.vuejs.org/v2/guide/index.html
下載: https://cn.vuejs.org/v2/guide/installation.html?
3.1 需求
- 初步體會(huì) Vue.js 的數(shù)據(jù)綁定功能?
- 體會(huì) Vue.js 開(kāi)發(fā)框架的主體結(jié)構(gòu)
注意：為了讓 IDEA 識(shí)別 Vue 代碼，需要安裝插件 Vue.js?
3.2 代碼實(shí)現(xiàn)
（1）創(chuàng)建新文件夾 D:\idea_java_projects\vue , 直接拖到 Idea 工具，使用 idea 打開(kāi)
（2）將下載好的 vue.js 拷貝到 D:\idea_java_projects\vue\vue.js
（3）創(chuàng)建 D:\idea_java_projects\vue\vue_quick_start.html
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>vue快速入門(mén)</title>
</head>
<body>
<!--
1. div元素不是必須的，也可以是其它元素，比如span,但是約定都是將vue實(shí)例掛載到div
2. 因?yàn)閐iv更加適合做布局
3. id 不是必須為app , 是程序員指定,一般我們就使用app
-->
<div id="app"><!--1. {{message}} : 插值表達(dá)式2. message 就是從model的data數(shù)據(jù)池來(lái)獲取3. 當(dāng)我們的代碼執(zhí)行時(shí)，會(huì)到data{} 數(shù)據(jù)池中去匹配數(shù)據(jù), 如果匹配上, 就進(jìn)行替換, 如果沒(méi)有匹配上, 就輸出空--><h1>歡迎你{{message}}-{{name}}</h1>
</div>
<!--引入vue.js-->
<script src="vue.js"></script>
<script>/*** 1. 創(chuàng)建Vue對(duì)象*/let vm = new Vue({el : "#app", // 將創(chuàng)建的vue實(shí)例掛載到 id=app 的div上data : { // data{}表示數(shù)據(jù)池，以k-v形式設(shè)置，根據(jù)需求設(shè)置message : "Hello-Vue",name : "小王"}})
</script>
</body>
</html>?（4）運(yùn)行效果如下
3.3?注意事項(xiàng)和使用細(xì)節(jié)
（1）注意代碼順序，要求 div 在前，script 在后，否則無(wú)法綁定數(shù)據(jù)
（2）從案例可以體會(huì)聲明式渲染：Vue.js 采用簡(jiǎn)潔的模板語(yǔ)法來(lái)聲明式地將數(shù)據(jù)渲染進(jìn) DOM 的系統(tǒng)， 做到數(shù)據(jù)和顯示分離
（3）Vue 沒(méi)有繁瑣的 DOM 操作，如果使用 jQuery，我們需要先找到 div 節(jié)點(diǎn)，獲取到 DOM 對(duì)象，然后進(jìn)行節(jié)點(diǎn)操作, 顯然 Vue 更加簡(jiǎn)潔
4 數(shù)據(jù)單向渲染
4.1?基本說(shuō)明
（1）v-bind 指令可以完成基本數(shù)據(jù)渲染/綁定
（2）v-bind 簡(jiǎn)寫(xiě)形式就是一個(gè)冒號(hào)（:）
4.2?應(yīng)用實(shí)例
4.2.1?需求分析
需求: 演示 v-bind 的使用, 可以綁定元素的屬性?
4.2.2 代碼實(shí)現(xiàn)?
（1）把準(zhǔn)備好的 1.jpg 拷貝到 D:\idea_java_projects\vue\1.jpg
（2）創(chuàng)建 D:\idea_java_projects\vue\單向數(shù)據(jù)渲染.html
<!DOCTYPE html>
<html lang="en" xmlns:v-bind="http://www.w3.org/1999/xhtml">
<head><meta charset="UTF-8"><title>單向數(shù)據(jù)渲染</title>
</head>
<body>
<div id="app"><h1>{{message}}</h1><!--1. 使用插值表達(dá)式引用 data數(shù)據(jù)池?cái)?shù)據(jù)是在標(biāo)簽體內(nèi)2. 如果是在標(biāo)簽/元素 的屬性上去引用data數(shù)據(jù)池?cái)?shù)據(jù)時(shí)，不能使用插值表達(dá)式3. 需要使用v-bind, 因?yàn)関-bind是vue來(lái)解析, 默認(rèn)報(bào)紅,但是不影響解析4. 如果不希望看到報(bào)紅, 直接 alt+enter 引入 xmlns:v-bind--><img v-bind:src="img_src" v-bind:width="img_width"><!--v-bind 簡(jiǎn)寫(xiě)形式就是一個(gè)冒號(hào)（:）--><img :src="img_src" :width="img_width">
</div>
<script src="vue.js"></script>
<script>let vm = new Vue({el : "#app", // 將創(chuàng)建的vue實(shí)例掛載到 id=app 的div上data : { // data{}表示數(shù)據(jù)池，以k-v形式設(shè)置，根據(jù)需求設(shè)置message : "單向數(shù)據(jù)渲染測(cè)試",img_src : "1.jpg",img_width : "200px"}})
</script>
</body>
</html>（3）效果如下
4.3 注意事項(xiàng)和使用細(xì)節(jié)?
（1）插值表達(dá)式是用在標(biāo)簽體的
（2）如果給標(biāo)簽屬性綁定值，則使用 v-bind 指令?
5?數(shù)據(jù)雙向綁定
5.1?基本說(shuō)明
v-model 可以完成雙向數(shù)據(jù)綁定
5.2?應(yīng)用實(shí)例?
5.2.1?需求分析
需求：在輸入框中輸入信息，會(huì)更新到相應(yīng)綁定的位置?
5.2.2 代碼實(shí)現(xiàn)
（1）創(chuàng)建 D:\idea_java_projects\vue\雙向數(shù)據(jù)渲染.html?
<!DOCTYPE html>
<html lang="en" xmlns:v-model="http://www.w3.org/1999/xhtml">
<head><meta charset="UTF-8"><title>雙向數(shù)據(jù)渲染</title>
</head>
<body>
<div id="app"><h1>{{message}}</h1><!--1. v-bind是數(shù)據(jù)單向渲染: data數(shù)據(jù)池綁定的數(shù)據(jù)變化，會(huì)影響view2. v-model="hobby.val" 是數(shù)據(jù)的雙向渲染,(1)data數(shù)據(jù)池綁定的數(shù)據(jù)變化，會(huì)影響view 【底層的機(jī)制是 Data Bindings】(2)view 關(guān)聯(lián)的的元素值變化, 會(huì)影響到data數(shù)據(jù)池的數(shù)據(jù)【底層機(jī)制是Dom Listeners】--><input type="text" v-model="hobby.val"><br/><br/><input type="text" :value="hobby.val"><br/><br/><p>你輸入的愛(ài)好是: {{hobby.val}}</p>
</div>
<script src="vue.js"></script>
<script>let vm = new Vue({el : "#app", // 將創(chuàng)建的vue實(shí)例掛載到 id=app 的div上data : { // data{}表示數(shù)據(jù)池，以k-v形式設(shè)置，根據(jù)需求設(shè)置message : "輸入愛(ài)好",hobby :{val : "購(gòu)物"}}})
</script>
</body>
</html>?（2）完成測(cè)試
6?事件綁定?
6.1 基本說(shuō)明
（1）使用 v-on 進(jìn)行事件處理，比如: v-on:click 表示處理鼠標(biāo)點(diǎn)擊事件，v-on:blur?表示失去焦點(diǎn)事件
（2）事件調(diào)用的方法定義在 vue 對(duì)象聲明的 methods 節(jié)點(diǎn)中
（3）v-on:事件名 可以綁定指定事件
（4）官方文檔：https://cn.vuejs.org/v2/guide/events.html?
6.2 應(yīng)用實(shí)例
6.2.1?需求分析
需求: 演示 Vue 事件綁定操作?
6.2.2 代碼實(shí)現(xiàn)?
（1）創(chuàng)建 D:\idea_java_projects\vue\event.html
<!DOCTYPE html>
<html lang="en" xmlns:v-on="http://www.w3.org/1999/xhtml">
<head><meta charset="UTF-8"><title>事件綁定</title>
</head>
<body>
<div id="app"><h1>{{message}}</h1><!--1. v-on:click 表示我們要給button元素綁定一個(gè)點(diǎn)擊的事件2. sayHi() 表示綁定的方法, 在方法池 methods{} 定義的3. 底層仍然是dom處理4. 如果方法不需要傳遞參數(shù)，可以省略()5. v-on:click可以簡(jiǎn)寫(xiě)成 @click, 但是需要瀏覽器支持--><button v-on:click = "sayHi()">點(diǎn)擊輸出</button><button v-on:click = "sayOk()">點(diǎn)擊輸出</button><button v-on:click = "sayHi">點(diǎn)擊輸出</button><button @click = "sayOk">點(diǎn)擊輸出</button>
</div>
<script src="vue.js"></script>
<script>// 創(chuàng)建的Vue實(shí)例可以不接收，也可以接收，方便我們調(diào)試信息let vm = new Vue({el : "#app",// el 接收element簡(jiǎn)寫(xiě)data : {message : "Vue事件處理案例"},// methods 是Vue的一個(gè)屬性// 在{}中，可以寫(xiě)很多的方法，可以理解為方法池methods : {sayHi(){alert("hi")},sayOk(){alert("ok")}}})
</script>
</body>
</html>6.2.3?注意事項(xiàng)和使用細(xì)節(jié)
（1）如果方法沒(méi)有參數(shù)，可以省略()[需要瀏覽器支持]
（2）v-on 指令的簡(jiǎn)寫(xiě)形式 @ [需要瀏覽器支持]?
7 修飾符
7.1?基本說(shuō)明
（1）修飾符 (Modifiers) 是以(.)指明的后綴，指出某個(gè)指令以特殊方式綁定。
（2）例如，.prevent 修飾符告訴 v-on 指令對(duì)于觸發(fā)的事件調(diào)用 event.preventDefault()即阻 止事件原本的默認(rèn)行為
（3）事件修飾符
- .stop 阻止事件繼續(xù)傳播
- .prevent 阻止標(biāo)簽?zāi)J(rèn)行為
- .capture 使用事件捕獲模式,即元素自身觸發(fā)的事件先在此處處理，然后才交由內(nèi)部元素進(jìn) 行處理
- .self 只當(dāng)在 event.target 是當(dāng)前元素自身時(shí)觸發(fā)處理函數(shù)
- .once 事件將只會(huì)觸發(fā)一次
- .passive 告訴瀏覽器你不想阻止事件的默認(rèn)行為
（4）鍵盤(pán)事件的修飾符
比如: 項(xiàng)目經(jīng)常需要監(jiān)聽(tīng)一些鍵盤(pán)事件來(lái)觸發(fā)程序的執(zhí)行，而 Vue 中允許在監(jiān)聽(tīng)的時(shí)候添加鍵盤(pán)修飾符
<input v-on:keyup.13="submit">絕大多數(shù)常用的按鍵碼的別名：
.enter.tab.delete?(捕獲“刪除”和“退格”鍵).esc.space.up.down.left.right
（5）v-model 的修飾符
比如: 自動(dòng)過(guò)濾用戶(hù)輸入的首尾空格
<input v-model.trim="msg">（6）官 方 文 檔 ： https://cn.vuejs.org/v2/guide/events.html#%E4%BA%8B%E4%BB%B6%E4%BF%AE%E9%A5%B0%E7%AC%A6?
7.2?應(yīng)用實(shí)例
需求:
（1）演示 v-on:submit.prevent 的使用, 如果沒(méi)有輸入名字，控制臺(tái)輸出 "請(qǐng)輸入名字"，否則輸出 "提交表單"
（2）解惑, 為什么在開(kāi)發(fā)中, 有時(shí)需要 , 讓某個(gè)指令以特殊方式綁定, 比如表單提交
- 我們不希望將這個(gè)表單進(jìn)行整體提交, 而是是 Ajax 的方式進(jìn)行提交
- 因?yàn)楸韱握w提交會(huì)導(dǎo)致重載頁(yè)面, 而 Ajax 方式可以有選擇性提交數(shù)據(jù)，并且局部刷新?
?代碼實(shí)現(xiàn)
（1）?創(chuàng)建 D:\idea_java_projects\vue\vue_modifier.html
<!DOCTYPE html>
<html lang="en" xmlns:v-on="http://www.w3.org/1999/xhtml">
<head><meta charset="UTF-8"><title>Vue修飾符使用</title>
</head>
<body>
<div id="app"><!--1. 修飾符用于指出一個(gè)指令應(yīng)該以特殊方式綁定。2. v-on:submit.prevent的.prevent 修飾符表示阻止表單提交的默認(rèn)行為--><form action="http://www.baidu.com" v-on:submit.prevent="onMySubmit">妖怪名: <input type="text" v-model="monster.name"><br/><br/><button type="submit">注冊(cè)</button></form><p>服務(wù)返回的數(shù)據(jù)是{{count}}</p>
</div>
<script src="vue.js"></script>
<script>let vm = new Vue({el: '#app',data: {//數(shù)據(jù)池monster: {//monster數(shù)據(jù)(對(duì)象)的屬性, 可以動(dòng)態(tài)生成},count: 0},methods: {//方法池onMySubmit() {//console.log("我們自己的表單提交處理...");//"", null, undefined都是falseif(this.monster.name) {console.log("提交表單 name=", this.monster.name);//這里，程序員就可以根據(jù)自己的業(yè)務(wù)發(fā)出ajax請(qǐng)求到后端//得到數(shù)據(jù)后，在進(jìn)行數(shù)據(jù)更新this.count = 666;} else {this.count = 0;console.log("請(qǐng)輸入名字..");}}}})
</script>
</body>
</html>（2）效果如下
不輸入名字直接提交
輸入名字再提交
8?條件渲染/控制: v-if v-show
8.1?基本說(shuō)明?
Vue 提供了 v-if 和 v-show 條件指令完成條件渲染/控制
（1）v-if 介紹
說(shuō)明：0、null、undefined、""(空串) 、false 都認(rèn)為是false
可以用 v-else-if 添加一個(gè)分支?
（2）v-show
?（3）官方文檔：https://cn.vuejs.org/v2/guide/conditional.html
8.2?應(yīng)用實(shí)例?
8.2.1 需求分析?
需求: 演示條件渲染使用(使用 v-if 和 v-show 實(shí)現(xiàn))?
8.2.2 代碼實(shí)現(xiàn)?
（1）創(chuàng)建 D:\idea_java_projects\vue\v_if.html?,v-if實(shí)現(xiàn)
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>條件渲染演示 v-if</title>
</head>
<body>
<div id="app"><input type="checkbox" v-model="sel">是否同意條款<h1 v-if="sel">你同意條款</h1><h1 v-else>你不同意條款</h1>
</div>
<script src="vue.js"></script>
<script>let vm = new Vue({el : "#app",data : {sel : false}})
</script>
</body>
</html>?（2）創(chuàng)建 D:\idea_java_projects\vue\v_show.html?,v-show實(shí)現(xiàn)
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>條件渲染演示 v-show</title>
</head>
<body>
<div id="app"><input type="checkbox" v-model="sel">是否同意條款<h1 v-show="sel">你同意條款</h1><h1 v-show="!sel">你不同意條款</h1>
</div>
<script src="vue.js"></script>
<script>let vm = new Vue({el : "#app",data : {sel : false}})
</script>
</body>
</html>（3）實(shí)現(xiàn)效果如下
?
8.3?v-if 和 v-show?區(qū)別
（1）v-if 會(huì)確保在切換過(guò)程中，條件塊內(nèi)的事件監(jiān)聽(tīng)器和子組件銷(xiāo)毀和重建?
（2）v-show 機(jī)制相對(duì)簡(jiǎn)單, 不管初始條件是什么，元素總是會(huì)被渲染，并且只是對(duì) CSS 進(jìn)行切換?
（3）使用建議：如果要頻繁地切換，建議使用 v-show ；如果運(yùn)行時(shí)條件很少改變，使用 v-if 較好?
9?列表渲染: v-for
9.1 基本說(shuō)明
Vue 提供了 v-for 列表循環(huán)指令，官方文檔：https://cn.vuejs.org/v2/guide/list.html?
（1）對(duì)數(shù)組進(jìn)行遍歷
可以用第二個(gè)參數(shù)作為索引?
?（2）?用 v-for 來(lái)遍歷一個(gè)對(duì)象的 property
?
還可以用第三個(gè)參數(shù)作為索引?
9.2 應(yīng)用實(shí)例
9.2.1 需求分析
需求: 演示列表渲染使用(v-for)?
9.2.2 代碼實(shí)現(xiàn)?
（1）?創(chuàng)建 D:\idea_java_projects\vue\v_for.html
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>v-for 列表渲染</title>
</head>
<body>
<div id="app"><!--基本語(yǔ)法:<li v-for="變量 in 數(shù)字">{{ 變量 }}</li>--><h1>簡(jiǎn)單的列表渲染</h1><ul><li v-for="i in 3">{{i}}</li></ul><!--基本語(yǔ)法:<li v-for="(變量, 索引) in 值">{{ 變量 }} - {{ 索引 }}</li>--><h1>簡(jiǎn)單的列表渲染-帶索引</h1><ul><li v-for="(i,index) in 3">{{i}}-{{index}}</li></ul><h1>遍歷數(shù)據(jù)列表</h1><!-- 語(yǔ)法:<tr v-for="對(duì)象 in 對(duì)象數(shù)組"><td>{{對(duì)象的屬性}}</td></tr>--><table width="400px" border="1px"><tr v-for="(monster,index) in monsters"><td>{{index}}</td><td>{{monster.id}}</td><td>{{monster.name}}</td><td>{{monster.age}}</td></tr></table>
</div>
<script src="vue.js"></script>
<script>new Vue({el: '#app',data: { //數(shù)據(jù)池monsters: [{id: 1, name: '牛魔王', age: 800},{id: 2, name: '黑山老妖', age: 900},{id: 3, name: '紅孩兒', age: 200}]}})
</script>
</body>
</html>?（2）效果
10?組件化編程?
10.1?基本說(shuō)明
1. 在大型應(yīng)用開(kāi)發(fā)的時(shí)候，頁(yè)面可以劃分成很多部分，往往不同的頁(yè)面，也會(huì)有相同的部 分。例如可能會(huì)有相同的頭部導(dǎo)航。
2. 但是如果每個(gè)頁(yè)面都獨(dú)自開(kāi)發(fā)，這無(wú)疑增加了我們開(kāi)發(fā)的成本。所以我們會(huì)把頁(yè)面的不同部分拆分成獨(dú)立的組件，然后在不同頁(yè)面就可以共享這些組件，避免重復(fù)開(kāi)發(fā)(如圖)?
3. 上圖解讀
- 組件(Component) 是 Vue.js 最強(qiáng)大的功能之一
- 組件也是一個(gè)Vue實(shí)例，也包括∶ data、methods、生命周期函數(shù)等
- 組件渲染需要 html模板，所以增加了template 屬性，值就是 HTML 模板
- 對(duì)于全局組件，任何vue 實(shí)例都可以直接在 HTML 中通過(guò)組件名稱(chēng)來(lái)使用該組件
- data 是一個(gè)函數(shù)，不再是一個(gè)對(duì)象， 這樣每次引用組件都是獨(dú)立的對(duì)象/數(shù)據(jù)?
10.2 應(yīng)用實(shí)例
10.2.1 需求分析
如下, 點(diǎn)擊一個(gè)按鈕, 可以顯示點(diǎn)擊的次數(shù)?
現(xiàn)在需求是,有多個(gè)按鈕，都要進(jìn)行點(diǎn)擊統(tǒng)計(jì)
?
10.2.2 實(shí)現(xiàn)方式1-普通方式
（1）創(chuàng)建 D:\idea_java_projects\vue\組件化編程1.html?
<!DOCTYPE html>
<html lang="en" xmlns:v-on="http://www.w3.org/1999/xhtml">
<head><meta charset="UTF-8"><title>組件化編程</title>
</head>
<body><div id="app"><!--非組件化方式-普通方式--><button v-on:click="click1()">點(diǎn)擊次數(shù)= {{count}} 次【非組件化方式】</button><br/><br/><!--需求是,有多個(gè)按鈕，都要進(jìn)行點(diǎn)擊統(tǒng)計(jì)1. 其實(shí)三個(gè)按鈕界面其實(shí)一樣, 但是目前我們都重新寫(xiě)了一次, 復(fù)用性低2. 點(diǎn)擊各個(gè)按鈕的業(yè)務(wù)都是對(duì)次數(shù)+1, 因此業(yè)務(wù)處理類(lèi)似，但是也都重新寫(xiě)了一個(gè)方法, 復(fù)用性低3. 解決===> 組件化編程--><button v-on:click="click2()">點(diǎn)擊次數(shù)= {{count2}} 次【非組件化方式】</button><br/><br/><button v-on:click="click3()">點(diǎn)擊次數(shù)= {{count3}} 次【非組件化方式】</button><br/>
</div>
<script src="vue.js"></script>
<script>new Vue({el: "#app",data: {//data數(shù)據(jù)池count: 10,count2: 10,count3: 10},methods: {//methods屬性, 可以定義相應(yīng)的方法click1() {this.count++;},click2() {this.count2++;},click3() {this.count3++;}}})
</script>
</body>
</html>?（2）測(cè)試?
10.2.3?實(shí)現(xiàn)方式 2-全局組件方式
（1）?創(chuàng)建 D:\idea_java_projects\vue\組件化編程2.html?
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>組件化編程-全局組件</title>
</head>
<body>
<div id="app"><h1>組件化編程-全局組件</h1><!--使用全局組件--><counter></counter><br/><counter></counter><counter></counter><counter></counter><counter></counter>
</div><div id="app2"><h1>組件化編程-全局組件-app2</h1><!--使用全局組件--><counter></counter><counter></counter>
</div>
<script src="vue.js"></script>
<script>//1、定義一個(gè)全局組件, 名稱(chēng)為 counter//2. {} 表示就是我們的組件相關(guān)的內(nèi)容//3. template 指定該組件的界面, 因?yàn)闀?huì)引用到數(shù)據(jù)池的數(shù)據(jù)，所以需要是模板字符串//4. 要把組件視為一個(gè)Vue實(shí)例，也有自己的數(shù)據(jù)池和methods//5. 對(duì)于組件，我們的數(shù)據(jù)池的數(shù)據(jù)，是使用函數(shù)/方法返回[目的是為了保證每個(gè)組件的數(shù)據(jù)是獨(dú)立], 不能使用原來(lái)的方式//6. 這時(shí)我們達(dá)到目前，界面通過(guò)template實(shí)現(xiàn)共享,業(yè)務(wù)處理也復(fù)用//7. 全局組件是屬于所有vue實(shí)例，因此，可以在所有的vue實(shí)例使用Vue.component("counter", {template: `<button v-on:click="click()">點(diǎn)擊次數(shù)= {{count}} 次【全局組件化】</button>`,data() {//這里需要注意，和原來(lái)的方式不一樣!!!!return {count: 10}},methods: {click() {this.count++;}}})//創(chuàng)建Vue實(shí)例，必須有l(wèi)et vm = new Vue({el: "#app"//Vue實(shí)例的掛載點(diǎn)})let vm2 = new Vue({el: "#app2"//Vue實(shí)例的掛載點(diǎn)})</script>
</body>
</html>?（2）測(cè)試
10.2.4?實(shí)現(xiàn)方式 3-局部組件方式
（1）?創(chuàng)建 D:\idea_java_projects\vue\組件化編程3.html?
說(shuō)明：必須在vue實(shí)例中引入局部組件，才能使用該局部組件
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>組件化編程-局部組件</title>
</head>
<body>
<div id="app"><h1>組件化編程-局部組件</h1><!--使用局部組件 ,該組件是從掛載到app的vue中來(lái)的--><my_counter></my_counter><br/><my_counter></my_counter><br/><my_counter></my_counter><br/>
</div><div id="app2"><h1>組件化編程-局部組件-app2</h1><!--使用局部組件 --><wwj_counter></wwj_counter><br/><wwj_counter></wwj_counter><br/>
</div>
<script src="vue.js"></script>
<script>//定義一個(gè)組件, 組件的名稱(chēng)為 buttonCounter//擴(kuò)展//1. 可以把常用的組件，定義在某個(gè)commons.js中 export//2. 如果某個(gè)頁(yè)面需要使用， 直接importconst buttonCounter = {template: `<button v-on:click="click()">點(diǎn)擊次數(shù)= {{count}} 次【局部組件化】</button>`,data() {//這里需要注意，和原來(lái)的方式不一樣!!!!return {count: 10}},methods: {click() {this.count++;}}}//創(chuàng)建Vue實(shí)例，必須有l(wèi)et vm = new Vue({el: "#app",//Vue實(shí)例的掛載點(diǎn)components: { //引入/注冊(cè)某個(gè)組件, 此時(shí)my_counter就是一個(gè)組件, 是一個(gè)局部組件,他的使用范圍在當(dāng)前vuemy_counter: buttonCounter}})let vm2 = new Vue({el: "#app2",//Vue實(shí)例的掛載點(diǎn)components :{//引入/注冊(cè)組件buttonCounterwwj_counter: buttonCounter}})</script>
</body>
</html>?（2）測(cè)試
10.2.5 注意事項(xiàng)和使用細(xì)節(jié)?
（1）如果方法體, 只有簡(jiǎn)單的語(yǔ)句,比如 count++, 那么可以進(jìn)行簡(jiǎn)寫(xiě), 在組件化編程1.html 演示, 比如?
<!DOCTYPE html>
<html lang="en" xmlns:v-on="http://www.w3.org/1999/xhtml">
<head><meta charset="UTF-8"><title>組件化編程</title>
</head>
<body><div id="app"><!--非組件化方式-普通方式--><button v-on:click="count++">點(diǎn)擊次數(shù)= {{count}} 次</button><br/><br/><button v-on:click="count++">點(diǎn)擊次數(shù)= {{count2}} 次</button><br/><br/></div>
<script src="vue.js"></script>
<script>new Vue({el: "#app",data: {//data數(shù)據(jù)池count: 10,},})
</script>
</body>
</html>（2）局部組件定義需要放置在 new Vue() 前，否則組件注冊(cè)會(huì)失敗
10.3 組件化小結(jié)
- 組件也是一個(gè) Vue 實(shí)例，因此它的定義是也存在∶ data、methods、生命周期函數(shù)等
- data 是一個(gè)函數(shù)，不再是一個(gè)對(duì)象， 這樣每次引用組件都是獨(dú)立的對(duì)象/數(shù)據(jù)
- 組件渲染需要 html 模板，所以增加了 template 屬性，值就是 HTML 模板?
11?生命周期和監(jiān)聽(tīng)函數(shù)(鉤子函數(shù))?
11.1?基本說(shuō)明
（1）Vue 實(shí)例有一個(gè)完整的生命周期，也就是說(shuō)從開(kāi)始創(chuàng)建、初始化數(shù)據(jù)、編譯模板、掛載 DOM、渲染-更新-渲染、卸載等一系列過(guò)程，我們稱(chēng)為 Vue 實(shí)例的生命周期
（2）鉤子函數(shù)(監(jiān)聽(tīng)函數(shù)): Vue 實(shí)例在完整的生命周期過(guò)程中(比如設(shè)置數(shù)據(jù)監(jiān)聽(tīng)、編譯模 板、將實(shí)例掛載到 DOM 、在數(shù)據(jù)變化時(shí)更新 DOM 等), 也會(huì)運(yùn)行叫做生命周期鉤子的函數(shù)
（3）鉤子函數(shù)的 作用就是在某個(gè)階段, 給程序員一個(gè)做某些處理的機(jī)會(huì)?
11.2?Vue生命周期示意圖
上圖解讀
(1) new Vue()：new 了一個(gè) Vue 的實(shí)例對(duì)象，此時(shí)就會(huì)進(jìn)入組件的創(chuàng)建過(guò)程。
(2) Init Events & Lifecycle：初始化組件的事件和生命周期函數(shù)
(3) beforeCreate：組件創(chuàng)建之后遇到的第一個(gè)生命周期函數(shù)，這個(gè)階段 data 和 methods 以及 dom 結(jié)構(gòu)都未被初始化，也就是獲取不到 data 的值，不能調(diào)用 methods 中的函數(shù)
(4) Init injections & reactivity：這個(gè)階段中, 正在初始化 data 和 methods 中的方法
(5) created：這個(gè)階段組件的 data 和 methods 中的方法已初始化結(jié)束，可以訪(fǎng)問(wèn)，但是 dom 結(jié)構(gòu)未 初始化，頁(yè)面未渲染
- 特別說(shuō)明：在這個(gè)階段，經(jīng)常會(huì)發(fā)起 Ajax 請(qǐng)求，從后端獲取到最新數(shù)據(jù)
(6) 編譯模板結(jié)構(gòu)(在內(nèi)存)
(7) beforeMount：當(dāng)模板在內(nèi)存中編譯完成，此時(shí)內(nèi)存中的模板結(jié)構(gòu)還未渲染至頁(yè)面上，看不到真實(shí)的數(shù)據(jù)
(8) Create vm.$el and replace ‘el’ with it：這一步，在把內(nèi)存中渲染好的模板結(jié)構(gòu)替換至真實(shí)的 dom 結(jié)構(gòu)也就是頁(yè)面上
(9) mounted：此時(shí)，頁(yè)面渲染好，用戶(hù)看到的是真實(shí)的頁(yè)面數(shù)據(jù)， 生命周期創(chuàng)建階段完畢，進(jìn)入到了運(yùn)行中的階段
(10) 生命周期運(yùn)行中
10.1 beforeUpdate：當(dāng)執(zhí)行此函數(shù)，數(shù)據(jù)池的數(shù)據(jù)是新的，但是頁(yè)面是舊的
10.2 Virtual DOM re-render and patch：根據(jù)最新的 data 數(shù)據(jù)，重新渲染內(nèi)存中的模板結(jié)構(gòu)，并把渲染好的模板結(jié)構(gòu)，替換至頁(yè)面 上
10.3 updated：頁(yè)面已經(jīng)完成了更新，此時(shí)，data 數(shù)據(jù)和頁(yè)面的數(shù)據(jù)都是新的
(11) beforeDestroy：當(dāng)執(zhí)行此函數(shù)時(shí)，組件即將被銷(xiāo)毀，但是還沒(méi)有真正開(kāi)始銷(xiāo)毀，此時(shí)組件的 data、methods數(shù)據(jù)或方法 還可被調(diào)用
(12) Teardown……：注銷(xiāo)組件和事件監(jiān)聽(tīng)
11.3?應(yīng)用實(shí)例
11.3.1 需求分析
需求：展示 VUE 實(shí)例生命周期和 鉤子函數(shù)/監(jiān)聽(tīng)函數(shù)/生命周期函數(shù) 執(zhí)行時(shí)機(jī)
（1）重點(diǎn)研究幾個(gè)重要的鉤子函數(shù) (beforeCreate, created, beforeMount, mounted, beforeUpdate, updated)
（2）驗(yàn)證在這幾個(gè)鉤子函數(shù)中, 數(shù)據(jù)模型/數(shù)據(jù)池是否加載/使用? 自定義方法是否加載/可用? html 模板是否加載/使用? html 模板是否完成渲染??
11.3.2 代碼實(shí)現(xiàn)
（1）創(chuàng)建 D:\idea_java_projects\vue\Vue\生命周期和鉤子函數(shù).html
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title>
</head>
<body>
<div id="app"><span id="num">{{num}}</span><button @click="num++">贊</button><h2>{{name}},有{{num}}個(gè)人點(diǎn)贊</h2>
</div>
<script src="vue.js"></script>
<script>new Vue({el:"#app",data : {//數(shù)據(jù)池name : "小王",num : 0},methods: {show(){return this.name;},add(){this.num++;}},beforeCreate(){//生命周期函數(shù)-創(chuàng)建vue實(shí)例前調(diào)用console.log("=============beforeCreate==========");console.log("數(shù)據(jù)模型/數(shù)據(jù)池的數(shù)據(jù)是否加載/使用?[no]", this.name, " ", this.num);// 會(huì)報(bào)錯(cuò):Error in beforeCreate hook: "TypeError: this.show is not a function"//console.log("自定義方法是否加載/使用?[no]", this.show());console.log("用戶(hù)頁(yè)面dom是否加載/使用?[yes]", document.getElementById("num"));console.log("用戶(hù)頁(yè)面dom是否被渲染?[no]", document.getElementById("num").innerText);},created() {//生命周期函數(shù)-創(chuàng)建vue實(shí)例console.log("=============created==========");console.log("數(shù)據(jù)模型/數(shù)據(jù)池的數(shù)據(jù)是否加載/使用?[yes]", this.name, " ", this.num);console.log("自定義方法是否加載/使用?[yes]", this.show());console.log("用戶(hù)頁(yè)面dom是否加載/使用?[yes]", document.getElementById("num"));console.log("用戶(hù)頁(yè)面dom是否被渲染?[no]", document.getElementById("num").innerText);//可以發(fā)出Ajax//接收返回的數(shù)據(jù)//再次去更新data數(shù)據(jù)池的數(shù)據(jù)//編譯內(nèi)存模板結(jié)構(gòu)//.....},beforeMount() {//生命周期函數(shù)-掛載前console.log("=============beforeMount==========");console.log("數(shù)據(jù)模型/數(shù)據(jù)池的數(shù)據(jù)是否加載/使用?[yes]", this.name, " ", this.num);console.log("自定義方法是否加載/使用?[yes]", this.show());console.log("用戶(hù)頁(yè)面dom是否加載/使用?[yes]", document.getElementById("num"));console.log("用戶(hù)頁(yè)面dom是否被渲染?[no]", document.getElementById("num").innerText);},mounted() {//生命周期函數(shù)-掛載后console.log("=============mounted==========");console.log("數(shù)據(jù)模型/數(shù)據(jù)池的數(shù)據(jù)是否加載/使用?[yes]", this.name, " ", this.num);console.log("自定義方法是否加載/使用?[yes]", this.show());console.log("用戶(hù)頁(yè)面dom是否加載/使用?[yes]", document.getElementById("num"));console.log("用戶(hù)頁(yè)面dom是否被渲染?[yes]", document.getElementById("num").innerText);},beforeUpdate() {//生命周期函數(shù)-數(shù)據(jù)池?cái)?shù)據(jù)更新前console.log("=============beforeUpdate==========");console.log("數(shù)據(jù)模型/數(shù)據(jù)池的數(shù)據(jù)是否加載/使用?[yes]", this.name, " ", this.num);console.log("自定義方法是否加載/使用?[yes]", this.show());console.log("用戶(hù)頁(yè)面dom是否加載/使用?[yes]", document.getElementById("num"));console.log("用戶(hù)頁(yè)面dom數(shù)據(jù)是否被更新?[no]", document.getElementById("num").innerText);//驗(yàn)證數(shù)據(jù)==>修正// if(this.num < 10 ) {// this.num = 8;// }},updated() {//生命周期函數(shù)-數(shù)據(jù)池?cái)?shù)據(jù)更新后console.log("=============updated==========");console.log("數(shù)據(jù)模型/數(shù)據(jù)池的數(shù)據(jù)是否加載/使用?[yes]", this.name, " ", this.num);console.log("自定義方法是否加載/使用?[yes]", this.show());console.log("用戶(hù)頁(yè)面dom是否加載/使用?[yes]", document.getElementById("num"));console.log("用戶(hù)頁(yè)面dom數(shù)據(jù)是否被更新?[yes]", document.getElementById("num").innerText);}})
</script>
</body>
</html>?（2）測(cè)試
?
12?Vue2 腳手架模塊化開(kāi)發(fā)?
12.1?為什么需要 Vue Cli 腳手架?
目前開(kāi)發(fā)模式的問(wèn)題
（1）開(kāi)發(fā)效率低
（2）不夠規(guī)范
（3）維護(hù)和升級(jí), 可讀性比較差?
12.2??腳手架模塊化開(kāi)發(fā)--快速入門(mén)
12.2.1 需求分析
需求: 演示使用 Vue 腳手架進(jìn)行模塊化開(kāi)發(fā), 輸入不同的 url, 切換不同頁(yè)面.?
Vue Cli 文檔地址: https://cli.vuejs.org/zh/?
12.2.2?環(huán)境配置，搭建項(xiàng)目
（1）搭建 Vue 腳手架工程，需要使用到 NPM(node package manager), npm 是隨 nodejs 安裝 的一款包管理工具, 類(lèi)似 Maven。所以需要先安裝 Nodejs
（2）為了更好兼容 ，這里安裝 node.js10.16.3(因?yàn)檫@里 只是演示 Vue 腳手架工程),后面進(jìn)行 Vue3 的腳手架工程搭建, 再對(duì) Node 升級(jí)
（3）如果以前安裝過(guò) node.js , 為防止版本沖突，先卸載之, 如果你沒(méi)安裝 nodejs, 就不用管?
卸載步驟如下
打開(kāi)控制面板，點(diǎn)擊卸載程序
搜索node，點(diǎn)擊卸載 (這里需要一段時(shí)間，耐心等待)
?再次測(cè)試，卸載成功
（4）下載 node.js10.16.3 地址: https://nodejs.org/en/blog/release/v10.16.3/?
往下翻找到電腦相應(yīng)的配置進(jìn)行下載
?（5）下載完成之后?, 雙擊進(jìn)行安裝，直接下一步即可(可根據(jù)自己來(lái)選擇安裝路徑，路徑不要有空格、中文、特殊字符)
（6）驗(yàn)證是否安裝成功, 如果看不到, 退出 cmd, 重新開(kāi)一個(gè)窗口測(cè)試即可
（7）先刪除以前的 cli 版本<不論是之前未下載或沒(méi)有下載>（cmd中執(zhí)行下面命令）
npm uninstall vue-cli -g?
（8）安裝淘寶鏡像-cnpm?
npm install -g cnpm@7.1.1 --registry=https://registry.npm.taobao.org
說(shuō)明npm 和 cnpm 的區(qū)別
- 兩者之間只是 node 中包管理器的不同, 都可以使用
- npm 是 node 官方的包管理器。cnpm 是個(gè)中國(guó)版的 npm，是淘寶定制的 cnpm (gzip 壓縮支持) 命令行工具代替默認(rèn)的 npm
- 如果因?yàn)榫W(wǎng)絡(luò)原因無(wú)法使用 npm 下載，那 cnpm 這個(gè)就派上用場(chǎng)了
- 小結(jié): npm 和 cnpm 只是下載的地址不同，npm 是從國(guó)外下載東西，cnpm 是從國(guó)內(nèi) 下載東西?
安裝成功之后需要給cnpm配置環(huán)境變量，找到cnpm.cmd,我的是在D:\software\nodejs\node_cache
接下來(lái)，配置環(huán)境變量：
1. 右鍵點(diǎn)擊計(jì)算機(jī)圖標(biāo)，選擇“屬性”。
2. 在彈出的窗口中，點(diǎn)擊“高級(jí)系統(tǒng)設(shè)置”。
3. 在“系統(tǒng)屬性”對(duì)話(huà)框中，轉(zhuǎn)到“高級(jí)”選項(xiàng)卡，然后點(diǎn)擊“環(huán)境變量”按鈕。
4. 在“環(huán)境變量”窗口中，找到“系統(tǒng)變量”部分的“Path”變量，然后點(diǎn)擊“編輯”。
5. 在“編輯環(huán)境變量”對(duì)話(huà)框中，點(diǎn)擊“新建”并添加`cnpm.cmd`所在目錄的完整路徑，例如`D:\software\nodejs\node_cache`。
6. 記得在每個(gè)路徑之間用英文分號(hào)(`;`)隔開(kāi)。如果你已經(jīng)有其他路徑，確保在新路徑前加上分號(hào)。
7. 點(diǎn)擊“確定”關(guān)閉所有對(duì)話(huà)框，完成環(huán)境變量的修改。
（9）?安裝 webpack 和 webpack-cli
npm install webpack@4.41.2 webpack-cli -D
（10）安裝vue腳手架
cnpm install -g @vue/cli@4.0.3
（11）確認(rèn) Vue-Cli 版本
vue -V?
（12）創(chuàng)建目錄 vue_project, 并 cmd 到該目錄?
（13）使用 webpack 創(chuàng)建 vue 腳手架項(xiàng)目 (如果出現(xiàn)了 downloading template....,
//安裝一個(gè)全球插件
npm install -g @vue/cli-initvue init webpack vue_project_start
?
?
?（14）運(yùn)行我們的vue項(xiàng)目
cd vue_project_start
npm run dev
?
（15）瀏覽器： http://localhost:8080?
?
12.2.3 使用IDEA 打開(kāi)項(xiàng)目，運(yùn)行項(xiàng)目?
（1）使用 crtl+c 終止項(xiàng)目
（2）將 Vue 腳手架項(xiàng)目，直接拖到 IDEA，就可以打開(kāi)
（3）配置 NPM
12.3?Vue 項(xiàng)目結(jié)構(gòu)分析
12.4?Vue 請(qǐng)求頁(yè)面執(zhí)行流程?
?當(dāng)我們輸入 http://localhost:8080 , 你看到這個(gè)頁(yè)面時(shí)怎么來(lái)的，這里涉及到如下文件
?
執(zhí)行流程如下?
?
12.5?路由切換-應(yīng)用實(shí)例?
（1）創(chuàng)建 vue_project\vue_project_quickstart\src\components\Yss.vue
<template>
<div><h1>{{mes}}</h1><table><tr><td>第1行第1列</td><td>第1行第2列</td><td>第1行第3列</td></tr><tr><td rowspan="2">第2行第1列</td><td>第2行第2列</td><td>第2行第3列</td></tr><tr><td>第3行第2列</td><td>第3行第3列</td></tr><tr><td rowspan="2">第4行第1列</td><td>第4行第2列</td><td>第4行第3列</td></tr><tr><td>紅燒肉<img src="@/assets/2.png"></td><td>第5行第3列</td></tr></table>
</div>
</template><script>
export default {name: "Yss",data(){return {mes : "Welcome to Yss"}}
}
</script><!--css樣式-->
<style scoped>
div {width: 900px;background-color: aliceblue;margin: 0 auto;
}
table,tr,td{border: 1px solid red;/*width: 600px;*/border-collapse:collapse;/*height: 50px;*/
}
table {margin: 0 auto;width: 600px;height: 380px;
}
h1 {color: red;
}
</style>
?（2） 在 vue_project\vue_project_quickstart\src\router\index.js 添加路由
{path: '/yss',name: 'Yss',component : Yss
}
?（3）把 vue_project\vue_project_quickstart\src\App.vue 默認(rèn)logo注銷(xiāo)?
(4) 瀏覽器?http://localhost:8080/#/yss?
?
13?ElementUI 使用
13.1 基本說(shuō)明?
（1）ElementUI 官網(wǎng): https://element.eleme.cn/#/zh-CN?
?
（2）一句話(huà): ElementUI 是組件庫(kù)，網(wǎng)站快速成型工具?
（3）vue2 使用的是??ElementUI 組件庫(kù)，vue3 使用的是?ElementPlus 組件庫(kù)
13.2?應(yīng)用實(shí)例-Vue 項(xiàng)目引入 ElementUI?
13.2.1 需求分析
在 Vue2 項(xiàng)目中, 使用 ElementUI 組件?
13.2.2 代碼演示?
（1）安裝 element-ui 組件庫(kù), cmd 下進(jìn)入到項(xiàng)目，指令 npm i element-ui@2.12.0 , 這里指定了版本
（2）修改 vue_project\vue_project_quickstart\src\main.js?，引入elementUI組件庫(kù)
// The Vue build version to load with the `import` command
// (runtime-only or standalone) has been set in webpack.base.conf with an alias.
import Vue from 'vue'
import App from './App.vue'
import router from './router/index.js'
// 引入elementUI組件庫(kù)
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';//使用ElementUI插件
Vue.use(ElementUI);Vue.config.productionTip = false/* eslint-disable no-new */
new Vue({el: '#app',router: router, //指定routercomponents: {'App': App},template: '<App/>'
})
?（3）修 改 vue_project\vue_project_quickstart\src\components\Yss.vue ， 引 入 element-ui 按鈕組件, 從文檔拷貝即可
（3）頁(yè)面效果?
?
14?Axios?
14.1?基本說(shuō)明
（1）axios 是獨(dú)立于 vue 的一個(gè)項(xiàng)目，不是 Vue 的一部分
（2）axios 通常和 Vue 一起使用，實(shí)現(xiàn) Ajax 操作
（3）Axios 是一個(gè)基于 promise 的 HTTP 庫(kù)
（4）學(xué)習(xí)文檔：https://javasoho.com/axios/
14.2?Axios 庫(kù)文件??
（1）使用 axios 需要引入 axios 庫(kù)文件
（2）可以直接引入?
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>（3）也可以下載 axios.min.js ，在本地引入
下載方式：在頁(yè)面?https://unpkg.com/axios/dist/axios.min.js?中右鍵另存為即可
14.3?Axios 應(yīng)用實(shí)例?
14.3.1 需求分析
14.3.2 代碼實(shí)現(xiàn)
（1） 新建一個(gè) javascript 項(xiàng)目
（2）在該項(xiàng)目下創(chuàng)建 data/response_data.json
{"success": true,"message": "成功","data": {"items": [{"name": "牛魔王","age": 800},{"name": "紅孩兒","age": 500},{"name": "蜈蚣精","age": 200}]}
}?（3）將下面兩個(gè)js文件復(fù)制到項(xiàng)目中（已附在文章頂部）
（4）創(chuàng)建 axios_quick_start.html?
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>axios的應(yīng)用實(shí)例</title>
</head>
<body>
<!--頁(yè)面視圖-->
<div id="app"><h1>{{msg}}</h1><table border="1" width="200"><tr><td>名字</td><td>年齡</td></tr><tr v-for="monster in monsterList"><td>{{monster.name}}</td><td>{{monster.age}}</td></tr></table>
</div>
<script src="vue.js"></script>
<script src="axios.min.js"></script>
<script>new Vue({el: "#app",data: {msg: "妖怪信息列表",monsterList: [] //表示妖怪的信息數(shù)組},methods: {//自定義方法list() {//發(fā)送ajax請(qǐng)求,獲取數(shù)據(jù) axios/*1. axios.get() 表示發(fā)出ajax請(qǐng)求2. http://localhost:63342/axios/data/response.data.json 表示請(qǐng)求的url要根據(jù)實(shí)際情況來(lái)填寫(xiě)3. axios發(fā)出ajax請(qǐng)求的基本語(yǔ)法axios.get(url).then(箭頭函數(shù)).then(箭頭函數(shù))...catch(箭頭函數(shù))(1) 如果get請(qǐng)求成功就進(jìn)入到第一個(gè)then()(2) 可以在第一個(gè)then()中繼續(xù)發(fā)出axios的ajax請(qǐng)求(3) 如果有異常, 會(huì)進(jìn)入到 catch(箭頭函數(shù))4. list在vue生命周期函數(shù)created() 中調(diào)用*/axios.get("http://localhost:63342/axios/data/response_data.json").then(responseData => {console.log("responseData= ", responseData)//使用JSON.stringify(json) 把json對(duì)象轉(zhuǎn)成一個(gè)字符串,方便觀察console.log("responseData= ", JSON.stringify(responseData));// console.log("responseData.data= ", responseData.data)// console.log("responseData.data.data= ", responseData.data.data)console.log("responseData.data.data.item= ", responseData.data.data.items)//將妖怪列表數(shù)組信息, 綁定到 data數(shù)據(jù)池的 monsterListthis.monsterList = responseData.data.data.items;}).catch(err => {console.log("異常=", err)})}},created() {this.list();}})
</script>
</body>
</html>（5）測(cè)試
?
14.4?注意事項(xiàng)和細(xì)節(jié)說(shuō)明?
（1）將 JSON 對(duì)象轉(zhuǎn)成字符串?JSON.stringify(response)?
（2）格式化輸出 JSON 字符串，方便觀察分析。到 https://www.json.cn/?
（3）發(fā)生多次 ajax 請(qǐng)求的方式和 promise 相同?