?作者簡(jiǎn)介：2022年博客新星 第八。熱愛國學(xué)的Java后端開發(fā)者，修心和技術(shù)同步精進(jìn)。
🍎個(gè)人主頁：Java Fans的博客
🍊個(gè)人信條：不遷怒，不貳過。小知識(shí)，大智慧。
💞當(dāng)前專欄：前端案例分享專欄
?特色專欄：國學(xué)周更-心性養(yǎng)成之路
🥭本文內(nèi)容：一文吃透 Vue 框架教程（上）

1. Vue 引言

漸進(jìn)式 JavaScript 框架 --摘自官網(wǎng)

# 漸進(jìn)式1. 易用  html css javascript2. 高效  開發(fā)前端頁面 非常高效 3. 靈活  開發(fā)靈活 多樣性# 總結(jié)Vue 是一個(gè)javascript 框架 js 簡(jiǎn)化頁面js操作bootstrap 是一個(gè)css框架  封裝css# 后端服務(wù)端開發(fā)人員: Vue 漸進(jìn)式j(luò)avascript框架: 讓我們通過操作很少的DOM,甚至不需要操作頁面中任何DOM元素,就很容易的完成數(shù)據(jù)和視圖綁定 ====> 雙向綁定 MVVM  # Vue 作者尤雨溪   國內(nèi)的    

---

2. Vue入門

2.1 下載Vue.js

//開發(fā)版本:<!-- 開發(fā)環(huán)境版本，包含了有幫助的命令行警告 --><script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>//生產(chǎn)版本:<!-- 生產(chǎn)環(huán)境版本，優(yōu)化了尺寸和速度 --><script src="https://cdn.jsdelivr.net/npm/vue"></script>

2.2 Vue第一個(gè)入門應(yīng)用

<div id="app">{{ msg }}  {{username}} {{pwd}}<br><span>{{ username }}<h1>{{ msg }}</h1></span></div><!--引入vue.js--><script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script><script>const app = new Vue({el:"#app",  //element 用來給Vue實(shí)例定義一個(gè)作用范圍data:{      //用來給Vue實(shí)例定義一些相關(guān)數(shù)據(jù)msg:"歡迎你,期待你的加入!",username:"hello Vue!",pwd :"12345",}});</script>	

#總結(jié):
1.vue實(shí)例(對(duì)象)中el屬性: 代表Vue的作用范圍 在Vue的作用范圍內(nèi)都可以使用Vue的語法
2.vue實(shí)例(對(duì)象)中data屬性: 用來給Vue實(shí)例綁定一些相關(guān)數(shù)據(jù), 綁定的數(shù)據(jù)可以通過{{變量名}}在Vue作用范圍內(nèi)取出
3.在使用{{}}進(jìn)行獲取data中數(shù)據(jù)時(shí),可以在{{}}中書寫表達(dá)式,運(yùn)算符,調(diào)用相關(guān)方法,以及邏輯運(yùn)算等
4.el屬性中可以書寫任意的CSS選擇器[jquery選擇器],但是在使用Vue開發(fā)是推薦使用 id選擇器
注意: el屬性值不能指定body或html標(biāo)簽

---

3. v-text和v-html

3.1 v-text

v-text:用來獲取data中數(shù)據(jù)將數(shù)據(jù)以文本的形式渲染到指定標(biāo)簽內(nèi)部 類似于javascript 中 innerText

		<div id="app" class="aa"><span >{{ message }}</span><span v-text="message"></span></div><!--引入vue.js--><script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script><script>const app = new Vue({el:"#app",data:{message:"kgc歡迎您"}})</script>

#總結(jié)
1.{{}}(插值表達(dá)式)和v-text獲取數(shù)據(jù)的區(qū)別在于
a.使用v-text取值會(huì)將標(biāo)簽中原有的數(shù)據(jù)覆蓋 使用插值表達(dá)式的形式不會(huì)覆蓋標(biāo)簽原有的數(shù)據(jù)
b.使用v-text可以避免在網(wǎng)絡(luò)環(huán)境較差的情況下出現(xiàn)插值閃爍

3.2 v-html

v-html:用來獲取data中數(shù)據(jù)將數(shù)據(jù)中含有的html標(biāo)簽先解析在渲染到指定標(biāo)簽的內(nèi)部 類似于javascript中 innerHTML

<div id="app" class="aa"><span>{{message}}</span><br><span v-text="message"></span><br><span v-html="message">xxxxxx</span></div><!--引入vue.js--><script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script><script>const app = new Vue({el:"#app",data:{message:"<a href=''>kgc歡迎您</a>"}})</script>

---

4.vue中事件綁定(v-on)

4.1 綁定事件基本語法

    <div id="app"><h2>{{message}}</h2><h2 v-text="message"></h2><h2>年齡:{{ age }}</h2><br><input type="button" value="點(diǎn)我改變年齡" v-on:click="changeage"></div><!--引入vue.js--><script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script><script>const app = new Vue({el:"#app",data:{message:"hello 歡迎來到kgc課堂!",age:23,},methods:{  //methods 用來定義vue中時(shí)間changeage:function(){alert('點(diǎn)擊觸發(fā)');this.age//代表當(dāng)前vue實(shí)例this.aa();//代表調(diào)用方法},aa:function(){}}})</script>

#總結(jié):
事件 事件源:發(fā)生事件dom元素 事件: 發(fā)生特定的動(dòng)作 click… 監(jiān)聽器 發(fā)生特定動(dòng)作之后的事件處理程序 通常是js中函數(shù)
1.在vue中綁定事件是通過v-on指令來完成的 v-on:事件名 如 v-on:click
2.在v-on:事件名的賦值語句中是當(dāng)前事件觸發(fā)調(diào)用的函數(shù)名
3.在vue中事件的函數(shù)統(tǒng)一定義在Vue實(shí)例的methods屬性中
4.在vue定義的事件中this指的就是當(dāng)前的Vue實(shí)例,日后可以在事件中通過使用this獲取Vue實(shí)例中相關(guān)數(shù)據(jù) 調(diào)用methods中相關(guān)方法

4.2 Vue中事件的簡(jiǎn)化語法

		<div id="app"><h2>{{ age }}</h2><input type="button" value="通過v-on事件修改年齡每次+1" v-on:click="changeage"><input type="button" value="通過@綁定時(shí)間修改年齡每次-1" @click="editage"></div><!--引入vue.js--><script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script><script>const app = new Vue({el:"#app",  //element: 用來指定vue作用范圍data:{age:23,},    //data   : 用來定義vue實(shí)例中相關(guān)數(shù)據(jù)methods:{changeage:function(){this.age++;},editage:function(){this.age--;}}  //methods: 用來定義事件的處理函數(shù)});</script>

#總結(jié):
1.在vue中綁定事件時(shí)可以通過@符號(hào)形式 簡(jiǎn)化 v-on 的事件綁定

4.3 Vue事件函數(shù)兩種寫法

		<div id="app"><span>{{count}}</span><input type="button" value="改變count的值" @click="changecount"></div><!--引入vue.js--><script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script><script>const app = new Vue({el:"#app",data:{count:1,},methods:{/*changecount:function(){this.count++;}*/changecount(){this.count++;}}});</script>

在Vue中事件定義存在兩種寫法：

• 一種是 函數(shù)名:function(){}
• 一種是 函數(shù)名(){} 推薦

4.4 Vue事件參數(shù)傳遞

		<div id="app"><span>{{count}}</span><input type="button" value="改變count為指定的值" @click="changecount(23,'xiaohei')"></div><!--引入vue.js--><script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script><script>const app = new Vue({el:"#app",data:{count:1,},methods:{//定義changecountchangecount(count,name){this.count = count;alert(name);}}});</script>

#總結(jié):
1.在使用事件時(shí),可以直接在事件調(diào)用處給事件進(jìn)行參數(shù)傳遞,在事件定義處通過定義對(duì)應(yīng)變量接收傳遞的參數(shù)

---

5.v-show v-if v-bind

5.1 v-show

v-show:用來控制頁面中某個(gè)標(biāo)簽元素是否展示

<div id="app"><!--v-show: 用來控制標(biāo)簽展示還是隱藏的--><h2 v-show="false">歡迎你的加入!</h2><h2 v-show="show">歡迎你的加入這是vue中定義變量true!</h2><input type="button" value="展示隱藏標(biāo)簽" @click="showmsg"></div>
<!--引入vue.js-->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>const app = new Vue({el:"#app",data:{show:false,},methods:{//定義時(shí)間showmsg(){this.show =  !this.show;}}})
</script>

#總結(jié)
1.在使用v-show時(shí)可以直接書寫boolean值控制元素展示,也可以通過變量控制標(biāo)簽展示和隱藏
2.在v-show中可以通過boolean表達(dá)式控制標(biāo)簽的展示和隱藏

5.2 v-if

v-if: 用來控制頁面元素是否展示

<div id="app"><h2 v-if="false">hello</h2><h2 v-if="show">歡迎你的加入</h2>
</div>
<!--引入vue.js-->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>const app = new Vue({el:"#app",data:{show:false},methods:{}});
</script>

5.3 v-bind

v-bind: 用來綁定標(biāo)簽的屬性從而通過vue動(dòng)態(tài)修改標(biāo)簽的屬性

<div id="app"><img width="300" v-bind:title="msg" v-bind:class="{aa:showCss}"  src="kgclogo.jpg" alt="">
</div>
<!--引入vue.js-->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>const app = new Vue({el:"#app",data:{msg:"官方logo!!!!",showCss:true,},methods:{}})
</script>

5.4 v-bind 簡(jiǎn)化寫法

? vue為了方便我們?nèi)蘸蠼壎?biāo)簽的屬性提供了對(duì)屬性綁定的簡(jiǎn)化寫法如 v-bind:屬性名 簡(jiǎn)化之后 :屬性名

<div id="app"><img width="300" :title="msg" :class="{aa:showCss}"  :src="src" alt=""><input type="button" value="動(dòng)態(tài)控制加入樣式" @click="addCss"><input type="button" value="改變圖片" @click="changeSrc">
</div>
<!--引入vue.js-->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>const app = new Vue({el:"#app",data:{msg:"kgc教育官方logo!!!!",showCss:true,src:"https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1583490365568&di=52a82bd614cd4030f97ada9441bb2d0e&imgtype=0&src=http%3A%2F%2Fimg.kanzhun.com%2Fimages%2Flogo%2F20160714%2F820a68f65b4e4a3634085055779c000c.jpg"},methods:{addCss(){this.showCss= !this.showCss;},changeSrc(){this.src = "https://ss2.bdstatic.com/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=1925088662,1336364220&fm=26&gp=0.jpg";}}})
</script>

---

6.v-for的使用

v-for: 作用就是用來對(duì)對(duì)象進(jìn)行遍歷的(數(shù)組也是對(duì)象的一種)

<div id="app"><span>{{ user.name }} {{ user.age }}</span><br><!--通過v-for遍歷對(duì)象--><span v-for="(value,key,index) in user">{{index}} : {{key}} : {{value}}</span><!--通過v-for遍歷數(shù)組--><ul><li v-for="a,index in arr" >{{index}} {{a}}</li></ul><!--通過v-for遍歷數(shù)組中對(duì)象:key 便于vue內(nèi)部做重用和排序--><ul><li v-for="user,index in users" :key="user.id">{{index+1}} {{ user.name }}  === {{ user.age }} ==== {{ user.content }}</li></ul></div>
<!--引入vue-->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>const app = new Vue({el: "#app",data: {user:{name:"小陳",age:23},arr:["北京校區(qū)", "天津校區(qū)", "河南校區(qū)"],users:[{id:"1",name:"xiaochen",age:23,content:"我曾經(jīng)也是一個(gè)單純的少年!"},{id:"2",name:"小白",age:23,content:"我曾經(jīng)是一個(gè)邪惡的少年!"},]},methods: {}});
</script>

#總結(jié)
1.在使用v-for的時(shí)候一定要注意加入:key 用來給vue內(nèi)部提供重用和排序的唯一key

---

7 .v-model 雙向綁定

v-model: 作用用來綁定標(biāo)簽元素的值與vue實(shí)例對(duì)象中data數(shù)據(jù)保持一致,從而實(shí)現(xiàn)雙向的數(shù)據(jù)綁定機(jī)制

<div id="app"><input type="text" v-model="message"><span>{{message}}</span><hr><input type="button" value="改變Data中值" @click="changeValue">
</div>
<!--引入vue-->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>const app = new Vue({el: "#app",data: {message:""},methods: {changeValue(){this.message='kgc教育!';}}});
</script>

#總結(jié)
1.使用v-model指令可以實(shí)現(xiàn)數(shù)據(jù)的雙向綁定
2.所謂雙向綁定 表單中數(shù)據(jù)變化導(dǎo)致vue實(shí)例data數(shù)據(jù)變化 vue實(shí)例中data數(shù)據(jù)的變化導(dǎo)致表單中數(shù)據(jù)變化 稱之為雙向綁定

MVVM架構(gòu) 雙向綁定機(jī)制

Model: 數(shù)據(jù)  Vue實(shí)例中綁定數(shù)據(jù)VM:   ViewModel  監(jiān)聽器View:  頁面  頁面展示的數(shù)據(jù)

---

8. 事件修飾符

修飾符: 作用用來和事件連用,用來決定事件觸發(fā)條件或者是阻止事件的觸發(fā)機(jī)制

# 1.常用的事件修飾符.stop    停止.prevent 阻止.self    獨(dú)自.once    一次

8.1 stop事件修飾符

用來阻止事件冒泡

<div id="app"><div class="aa" @click="divClick"><!--用來阻止事件冒泡--><input type="button" value="按鈕" @click.stop="btnClick"></div>
</div>
<!--引入vue-->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>const app = new Vue({el: "#app",data: {},methods: {btnClick(){alert('button被點(diǎn)擊了');},divClick(){alert('div被點(diǎn)擊了');}}});
</script>

8.2 prevent 事件修飾符

用來阻止標(biāo)簽的默認(rèn)行為

<!--用來阻止事件的默認(rèn)行為-->
<a href="http://www.kgcbest.com/" @click.prevent="aClick">kgc教育</a>

8.3 self 事件修飾符

用來針對(duì)于當(dāng)前標(biāo)簽的事件觸發(fā) ===========> 只觸發(fā)自己標(biāo)簽的上特定動(dòng)作的事件 只關(guān)心自己標(biāo)簽上觸發(fā)的事件 不監(jiān)聽事件冒泡

<!--只觸發(fā)標(biāo)簽自身的事件-->
<div class="aa" @click.self="divClick"><!--用來阻止事件冒泡--><input type="button" value="按鈕"  @click.stop="btnClick"><input type="button" value="按鈕1" @click="btnClick1">
</div>

8.4 once 事件修飾符

once 一次作用: 就是讓指定事件只觸發(fā)一次

    <!--.prevent : 用來阻止事件的默認(rèn)行為.once    : 用來只執(zhí)行一次特定的事件--><a href="http://www.kgcbest.com/" @click.prevent.once="aClick">kgc教育</a>

---

9. 按鍵修飾符

作用: 用來與鍵盤中按鍵事件綁定在一起,用來修飾特定的按鍵事件的修飾符

# 按鍵修飾符.enter.tab.delete (捕獲“刪除”和“退格”鍵).esc.space.up.down.left.right

9.1 enter 回車鍵

用來在觸發(fā)回車按鍵之后觸發(fā)的事件

 <input type="text" v-model="msg" @keyup.enter="keyups">

9.2 tab 鍵

用來捕獲到tab鍵執(zhí)行到當(dāng)前標(biāo)簽是才會(huì)觸發(fā)

<input type="text" @keyup.tab="keytabs">

---

綜合案例：

1.備忘錄小案例

2.購物車案例

10. Axios 基本使用

10.1 引言

Axios 是一個(gè)異步請(qǐng)求技術(shù),核心作用就是用來在頁面中發(fā)送異步請(qǐng)求,并獲取對(duì)應(yīng)數(shù)據(jù)在頁面中渲染 頁面局部更新技術(shù) Ajax

10.2 Axios 第一個(gè)程序

中文網(wǎng)站:https://www.kancloud.cn/yunye/axios/234845

安裝: https://unpkg.com/axios/dist/axios.min.js

10.2.1 GET方式的請(qǐng)求

	  //發(fā)送GET方式請(qǐng)求axios.get("http://localhost:8989/user/findAll?name=xiaochen").then(function(response){console.log(response.data);}).catch(function(err){console.log(err);});

10.2.2 POST方式請(qǐng)求

		//發(fā)送POST方式請(qǐng)求axios.post("http://localhost:8989/user/save",{username:"xiaochen",age:23,email:"xiaochen@zparkhr.com",phone:13260426185}).then(function(response){console.log(response.data);}).catch(function(err){console.log(err);});

10.2.3 axios并發(fā)請(qǐng)求

并發(fā)請(qǐng)求: 將多個(gè)請(qǐng)求在同一時(shí)刻發(fā)送到后端服務(wù)接口,最后在集中處理每個(gè)請(qǐng)求的響應(yīng)結(jié)果

function getUserAccount() {return axios.get('/user/12345');
}function getUserPermissions() {return axios.get('/user/12345/permissions');
}axios.all([getUserAccount(), getUserPermissions()]).then(axios.spread(function (acct, perms) {// 兩個(gè)請(qǐng)求現(xiàn)在都執(zhí)行完成
}));

10.2.4 攔截器

 const instance = axios.create({baseURL: 'http://localhost:8080/',timeout: 1000,headers: {'token':'123456'}});instance.interceptors.request.use(function (config) {console.log("請(qǐng)求進(jìn)入該方法")
},function (err) {// 請(qǐng)求異常做什么
})instance.interceptors.response.use(function (response) {return response;
},function (err) {//響應(yīng)錯(cuò)誤做什么
})

---

11. Vue 生命周期

Vue 實(shí)例生命周期 ===> java 對(duì)象生命周期(初始化階段 運(yùn)行階段 銷毀階段) 生命周期鉤子 ====> 生命周期函數(shù)

Vue實(shí)例從創(chuàng)建到銷毀過程中自動(dòng)觸發(fā)一些列函數(shù) ====> Vue生命周期函數(shù)(鉤子)

# Vue生命周期總結(jié)
- 1.初始化階段beforeCreate(){ //1.生命周期中第一個(gè)函數(shù),該函數(shù)在執(zhí)行時(shí)Vue實(shí)例僅僅完成了自身事件的綁定和生命周期函數(shù)的初始化工作,Vue實(shí)例中還沒有 Data el methods相關(guān)屬性console.log("beforeCreate: "+this.msg);},created(){ //2.生命周期中第二個(gè)函數(shù),該函數(shù)在執(zhí)行時(shí)Vue實(shí)例已經(jīng)初始化了data屬性和methods中相關(guān)方法console.log("created: "+this.msg);},beforeMount(){//3.生命周期中第三個(gè)函數(shù),該函數(shù)在執(zhí)行時(shí)Vue將El中指定作用范圍作為模板編譯console.log("beforeMount: "+document.getElementById("sp").innerText);},mounted(){//4.生命周期中第四個(gè)函數(shù),該函數(shù)在執(zhí)行過程中,已經(jīng)將數(shù)據(jù)渲染到界面中并且已經(jīng)更新頁面console.log("Mounted: "+document.getElementById("sp").innerText);}- 2.運(yùn)行階段beforeUpdate(){//5.生命周期中第五個(gè)函數(shù),該函數(shù)是data中數(shù)據(jù)發(fā)生變化時(shí)執(zhí)行 這個(gè)事件執(zhí)行時(shí)僅僅是Vue實(shí)例中data數(shù)據(jù)變化頁面顯示的依然是原始數(shù)據(jù)console.log("beforeUpdate:"+this.msg);console.log("beforeUpdate:"+document.getElementById("sp").innerText);},updated(){    //6.生命周期中第六個(gè)函數(shù),該函數(shù)執(zhí)行時(shí)data中數(shù)據(jù)發(fā)生變化,頁面中數(shù)據(jù)也發(fā)生了變化  頁面中數(shù)據(jù)已經(jīng)和data中數(shù)據(jù)一致console.log("updated:"+this.msg);console.log("updated:"+document.getElementById("sp").innerText);},- 3.銷毀階段beforeDestroy(){//7.生命周期第七個(gè)函數(shù),該函數(shù)執(zhí)行時(shí),Vue中所有數(shù)據(jù) methods componet 都沒銷毀},destroyed(){ //8.生命周期的第八個(gè)函數(shù),該函數(shù)執(zhí)行時(shí),Vue實(shí)例徹底銷毀}

---

??碼文不易，本篇文章就介紹到這里，如果想要學(xué)習(xí)更多Java系列知識(shí)，點(diǎn)擊關(guān)注博主，博主帶你零基礎(chǔ)學(xué)習(xí)Java知識(shí)。與此同時(shí)，對(duì)于日常生活有困擾的朋友，歡迎閱讀我的第四欄目：《國學(xué)周更—心性養(yǎng)成之路》，學(xué)習(xí)技術(shù)的同時(shí)，我們也注重了心性的養(yǎng)成。