站長資訊網(wǎng)
前端（vue）入門到精通課程：進(jìn)入學(xué)習(xí)
Apipost = Postman + Swagger + Mock + Jmeter 超好用的API調(diào)試工具：點(diǎn)擊使用
Vue (讀音 /vju?/，類似于 view) 是一套用于構(gòu)建用戶界面的漸進(jìn)式框架。與其它大型框架不同的是，Vue 被設(shè)計(jì)為可以自底向上逐層應(yīng)用。Vue 的核心庫只關(guān)注視圖層，不僅易于上手，還便于與第三方庫或既有項(xiàng)目整合。另一方面，當(dāng)與現(xiàn)代化的工具鏈以及各種支持類庫結(jié)合使用時(shí)，Vue 也完全能夠?yàn)閺?fù)雜的單頁應(yīng)用提供驅(qū)動(dòng)。（學(xué)習(xí)視頻分享：vue視頻教程）
一、安裝vue
直接使用script標(biāo)簽引入
<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
二、Vue模板案例
步驟
1、引入vue框架
2、定義1個(gè)盒子（根節(jié)點(diǎn)）
3、定義1個(gè)script標(biāo)簽3.1、定義js對(duì)象（根組件）
3.2、通過vue創(chuàng)建1個(gè)應(yīng)用
3.3、將應(yīng)用掛載到根節(jié)點(diǎn)（第二步中創(chuàng)建的盒子）
data()：存放頁面中顯示數(shù)據(jù)的地方
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <!--1、引入vue框架--> <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script> </head> <body> <!--2、定義1個(gè)盒子（根節(jié)點(diǎn)）--> <div id='app'> <h1>{{title}}</h1> <h1>{{name}}</h1> </div> <!--3、定義一個(gè)script標(biāo)簽--> <script> //3.1、定義js對(duì)象(根組件) const obj={ //data():存放頁面中存放數(shù)據(jù)的地方 data(){ return{ title:'kobe', name:'cc' } } } //3.2、通過vue創(chuàng)建1個(gè)應(yīng)用 const app=Vue.createApp(obj) //3.3、將應(yīng)用掛載到根節(jié)點(diǎn)（第二步中創(chuàng)建的盒子） app.mount('#app') </script> </body> </html>
三、基礎(chǔ)模板（記住）
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <!--1、引入vue框架--> <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script> </head> <body> <div id='app'></div> <script> Vue.createApp({ data(){ return{ } } }).mount('#app') </script> </body> </html>
四、vue的指令和插值
1、{{}}：插值表達(dá)式的語法
{{}}：可以在html中引用data中定義的數(shù)據(jù)<h1>{{name}}</h1>
2、v-text：填充純文本內(nèi)容（data中的值）
效果和innerText一樣<h1 v-text='name'></h1>
3、v-html：填充html（data中的值）
效果和innerHtml一樣<div v-html='desc'></div>
4、v-pre：填充原始數(shù)據(jù)
防止vue對(duì)標(biāo)簽進(jìn)行渲染（標(biāo)簽中寫的什么，就顯示什么）<div v-pre>顯示兩個(gè)花括號(hào)，中間為js：{{}}</div>
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <!--1、引入vue框架--> <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script> </head> <body> <div id='app'> <h1>{{name}}</h1> <h1>{{age}}</h1> <h1>{{sex}}</h1> <h2>info中的a1:{info.a1}</h2> <h2>info中的a2:{info.a2}</h2> <hr> <h1 v-text='name'></h1> <h1 v-text='arr[0]'></h1> <div v-html='desc'></div> <div v-pre>顯示兩個(gè)花括號(hào)，中間為js：{{}}</div> </div> <script> //obj是vue的組件對(duì)象 const obj={ //data方法（返回的是vue組件對(duì)象的屬性）——》頁面上要顯示的數(shù)據(jù)全部放到這里 data(){ return{ name:'2022', age:18, sex:'男', info:{ a1:'66', a2:'88' }, desc:'<h1>js</h1>', arr:[8,24,23,24,25,66] } } } //3.2、通過vue創(chuàng)建1個(gè)應(yīng)用 const app=Vue.createApp(obj) //3.3、將應(yīng)用掛載到根節(jié)點(diǎn)（第二步中創(chuàng)建的盒子） app.mount('#app') </script> </body> </html>
效果展示：
5、v-bind：屬性綁定
語法：
v-bind:屬性=‘值’
簡寫 :屬性=‘值’
<a v-bind:href="aInfo.addr">{{aInfo.title}}</a>
簡寫<a :href="aInfo.addr">{{aInfo.title}}</a>
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <!--1、引入vue框架--> <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script> </head> <body> <div id='app'> <a v-bind:href="aInfo.addr">{{aInfo.title}}</a> <!--簡寫--> <a :href="aInfo.addr">{{aInfo.title}}</a> </div> <script> Vue.createApp({ data(){ return{ aInfo:{ title:'百度', addr:'http://www.baidu.com' } } } }).mount('#app') </script> </body> </html>
樣式綁定
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <!--1、引入vue框架--> <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script> <style> .js{ width:200px; height:200px; background: red; } </style> </head> <body> <div id='app'> <!--樣式綁定：class屬性綁定--> <div :class='{js:isjs}'>js</div> </div> <hr /> <!--樣式綁定 style屬性--> <div :style="s1">py</div> <script> Vue.createApp({ data(){ return{ isjs:false, s1:{ width:'300px', height:'200px', background:'red', } } } }).mount('#app') </script> </body> </html>
6、v-on：事件綁定
語法：v-on：事件名稱=‘執(zhí)行的方法’
簡寫
@事件名=‘執(zhí)行的方法’
<button v-on:click='switchShow'>切換顯示</button>
簡寫<button @click='switchShow'>切換顯示</button>
7、v-show：控制元素顯示和隱藏的指令
控制元素顯示隱藏的指令：
v-show 值為True則顯示，值為false為隱藏
<div v-show='status' :style="{width:'200px',height:'200px',background:'red'}">py</div>
methods：定義頁面操作過程中調(diào)用的函數(shù)（vue組件的方法）
注意點(diǎn)：不要直接把方法定義為箭頭函數(shù)
例如
switchShow()
定義頁面操作過程中調(diào)用的函數(shù)（vue組件的方法）
注意點(diǎn)：不要直接把方法定義為箭頭函數(shù)
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <!--1、引入vue框架--> <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script> </head> <body> <div id='app'> <button v-on:click='switchShow'>切換顯示</button> <!--<button @click='switchShow'>切換顯示</button>--> <!--控制元素顯示隱藏的指令：v-show 值為True則顯示，值為false為隱藏 --> <div v-show='status' :style="{width:'200px',height:'200px',background:'red'}">py</div> </div> <script> Vue.createApp({ //定義頁面上顯示數(shù)據(jù)的（組件的屬性） data(){ return{ status:true } }, //定義頁面操作過程中調(diào)用的函數(shù)（vue組件的方法） //注意點(diǎn)：不要直接把方法定義為箭頭函數(shù) methods:{ switchShow(){ //在方法中可以通過this獲取組件中的數(shù)據(jù) //方法中的this代表組件中的對(duì)象 this.status=!this.status } } }).mount('#app') </script> </body> </html>
8、v-model：數(shù)據(jù)的雙向綁定
雙向綁定只用于表單和組件
頁面修改數(shù)據(jù)會(huì)變，數(shù)據(jù)改變，頁面也會(huì)改
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <!--1、引入vue框架--> <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script> </head> <body> <!--屬性綁定是單向的--> <!--<div id='app'> <div>賬號(hào):<input type="text" :value='user'></div> <div>密碼:<input type="password" :value='pwd'></div> </div>--> <!--雙向綁定--> <div id='app'> <div>賬號(hào):<input type="text" v-model='user'></div> <div>密碼:<input type="password" v-model='pwd'></div> <button @click='login'>登錄</button> </div> <script> Vue.createApp({ data(){ return{ user:"root", pwd:123456 } }, methods:{ login(){ //發(fā)送請(qǐng)求到后端， console.log('提交了登錄') console.log(this.user,this.pwd) } } }).mount('#app') </script> </body> </html>
9、v-if、v-else-if、v-else：條件渲染
通過條件來控制元素是否渲染到頁面
v-if
v-else-if
v-else
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <!--1、引入vue框架--> <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script> </head> <body> <div id='app'> <h1 v-if='item.result==="success"' style="color: green;">{{item}}</h1> <h1 v-else-if='item.result===fail' style="color: red;">{{item}}</h1> <h1 v-else>{{item}}</h1> </div> <script> Vue.createApp({ data(){ return{ item:{ case_id:1, title:'用例1', result:"success" }, } } }).mount('#app') </script> </body> </html>
10、v-for：遍歷對(duì)象、數(shù)組
案例：根據(jù)不同的結(jié)果，展示不同文字顏色
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <!--1、引入vue框架--> <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script> </head> <body> <div id='app'> <table border='1'> <!--表頭--> <tr> <th>id</th> <th>title</th> <th>result</th> <th>操作</th> </tr> <!--表格--> <tr v-for='item in cases'> <td>{{item.id}}</td> <td>{{item.title}}</td> <!--條件渲染--> <td v-if='item.result==="success"' style="color: green;">{{item.result}}</td> <td v-else-if='item.result==="error"' style="color:blue;">{{item.result}}</td> <td v-else-if='item.result==="fail"' style="color:tomato;">{{item.result}}</td> <td v-else>{{item.result}}</td> <td></td> </tr> </table> </div> <script> Vue.createApp({ data(){ return{ cases:[ { case_id:1, title:'用例1', result:"success" }, { case_id:2, title:'用例2', result:"fail" }, { case_id:3, title:'用例3', result:"error" }, { case_id:4, title:'用例4', result:"success" }, ] } } }).mount('#app') </script> </body> </html>
（學(xué)習(xí)視頻分享：web前端開發(fā)、編程基礎(chǔ)視頻）
