【Vue学习笔记】黑马程序员四小时速成VUE
生活随笔
收集整理的這篇文章主要介紹了
【Vue学习笔记】黑马程序员四小时速成VUE
小編覺得挺不錯的,現(xiàn)在分享給大家,幫大家做個參考.
Vue學習筆記
- Vue學習
- 1. Vue基礎
- 2. Vue本地應用
- Vue指令
- v-text
- v-html
- v-on
- v-show
- v-if
- v-bind
- v-for
- v-model
- 案例1 計數器
- 案例2 圖片切換
- 案例3 小黑記事本
- 3. Vue網絡應用
- axios的使用
- axios + vue 的使用
- 案例4 天知道
- 4. Vue綜合應用
- 案例5 音樂播放器
Vue學習
視頻地址：https://www.bilibili.com/video/BV12J411m7MG
1. Vue基礎
Vue簡介
Vue官方文檔：
- https://cn.vuejs.org
- https://v3.cn.vuejs.org/
Demo1：第一個程序，初步學會使用Vue。
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Vue基礎</title><!-- 導入Vue.js文件 --><script src="vue.js"></script> </head> <body><div id="app">{{ message }}</div><script>var app = new Vue({el:'#app',data:{message:"Hello Vue!"}})</script> </body> </html>Demo2：認識Vue實例——el掛載點
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><script src="vue.js"></script> </head> <body><!-- Vue實例的作用范圍是什么？ --><!-- Vue會管理el選項命中元素以及其內部的后代元素。 -->app元素外部：{{ message }}<div id="app_1">app元素內部:{{ message }}<br><span>app元素內部的sapn標簽下：{{ message }}</span></div><script>var app = new Vue({el:'#app_1',data:{message:"Hello Vue!"}})</script><br><!-- 是否可以使用其他的選擇器？ --><!-- 可以，但是推薦使用id選擇器，因為其他選擇器都不唯一。 --><div class="app_2">{{ message }}</div><script>var app = new Vue({el:'.app_2',data:{message:"現(xiàn)在使用的class選擇器"}})</script><br><!-- 是否可以設置其他的DOM元素呢？ --><!-- 可以，可以使用其他餓的雙標簽，單標簽不能、html和body之上也不能掛載。 --><h2 id="app_3">{{ message }}</h2><script>var app = new Vue({el: '#app_3',data:{message:"這是H2元素"}})</script> </body> </html>Demo3：認識Vue實例——data數據對象
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><script src="vue.js"></script> </head> <body><div id="app">{{ message }}<h2>{{ school.name }} {{ school.mobile }}</h2><ul><li>{{ campus[0] }}</li><li>{{ campus[1] }}</li><li>{{ campus[2] }}</li><li>{{ campus[3] }}</li></ul></div><!-- data:數據對象Vue中用到的數據定義在data中；data中可以寫復雜類型的數據；渲染復雜類型數據時，遵循js的語法即可。--><script>var app = new Vue({el: '#app',data:{message:"你好，小黑。",school:{name:"黑馬程序員",mobile:"400-618-9090"},campus:["北京校區(qū)","上海校區(qū)","廣州校區(qū)","深圳校區(qū)"]}})</script> </body> </html>2. Vue本地應用
通過Vue實現(xiàn)常見的網頁效果
Vue指令
內容綁定，事件綁定。
顯示切換，屬性綁定。
列表循環(huán)，表單元素綁定。
| v-text | 設置標簽的內容（textContent） |
| v-html | 設置元素的innerHTML |
| v-on | 為元素綁定事件 |
| v-show | 根據真假切換元素的顯示狀態(tài) |
| v-if | 根據表達式的真假切換元素的顯示狀態(tài) |
| v-bind | 為元素綁定屬性 |
| v-for | 根據數據生成列表結構 |
| v-model | 便捷的設置和獲取表單元素的值 |
v-text
Demo_v-text指令
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><script src="vue.js"></script> </head> <body><!-- v-textv-text指令的作用是：設置標簽的內容（textContent）默認寫法會替換全部內容，使用差值表達式{{}}，可以替換指定內容--><div id="app"><h2 v-text="message"></h2><h2 v-text="info"></h2><h2>{{ message }}</h2><h2 v-text="message">深圳</h2><h2>{{ message }}深圳</h2><h2 v-text="message + '!!'"></h2><h2>{{ message + '!!'}}深圳</h2> </div><script>var app = new Vue({el:'#app',data:{message:"黑馬程序員",info:"前端與移動教研部"}})</script> </body> </html>v-html
Demo_v-html指令
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><script src="vue.js"></script> </head> <body><!-- v-htmlv-html指令的作用是：設置元素的innerHTML；內容中有html結構會被解析為標簽；v-text指令無論內容是什么，只會解析為文本。--><div id="app"><p v-html="content"></p><p v-text="content"></p></div><script>var app = new Vue({el:'#app',data:{// content:"黑馬程序員"content: "<a href='http://www.itheima.com'>黑馬程序員</a>"}})</script> </body> </html>v-on
Demo_v-on指令
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><script src="vue.js"></script> </head> <body><!-- v-on指令 v-on指令的作用是：為元素綁定事件事件名不需要寫on指令可以簡寫為@綁定的方法定義在methods屬性中方法內部通過this關鍵字可以訪問定義在data中數據--><div id="app"><input type="button" value="事件綁定-點擊" v-on:click="dolt"><input type="button" value="事件綁定-雙擊" v-on:dblclick="dolt"><!-- 簡寫 --><input type="button" value="事件綁定-簡寫點擊" @click="dolt"><h2 @click="change">{{ food }}</h2></div><script>var app = new Vue({el:"#app",data:{food:"西藍花炒雞蛋"},methods:{dolt:function(){alert("做IT");},change:function(){// console.log(this.food);this.food += "好好吃！"}}})</script> </body> </html>Demo_v-on指令補充
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><script src="vue.js"></script> </head> <body><!-- 事件綁定的方法寫成函數調用的形式，可以傳入自定義參數定義方法時需要定義形參來接受傳入的實參事件的后面跟上.修飾符可以對事件進行限制，例如.enter可以限制觸發(fā)的按鍵為回車--><div id="app"><input type="button" value="點擊" @click="doIt(666)"><input type="text" @keyup.enter="sayHi"></div><script>var app = new Vue({el:'#app',methods:{doIt:function(p1){console.log("做It");console.log(p1);},sayHi:function(){alert("吃了沒");}}})</script> </body> </html>v-show
Demo_v-show指令
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><script src="vue.js"></script> </head> <body><!-- v-showv-show指令的作用是：根據真假切換元素的顯示狀態(tài)原理是修改元素的display，實現(xiàn)顯示隱藏指令后面的內容，最終都會解析為布爾值值為true元素顯示，值為false元素為隱藏--><div id="app"><input type="button" value="切換顯示狀態(tài)" @click="changeIsShow"><img v-show="IsShow" src="1.png" alt=""><br><span>{{ age }}</span><input type="button" value="年齡age增加" @click="changeAge"><img v-show="age >= 18" src="1.png" alt=""></div><script>var app = new Vue({el:'#app',data:{IsShow:false,age:17},methods:{changeIsShow:function(){this.IsShow = ! this.IsShow;},changeAge:function(){this.age++;}}});</script> </body> </html>v-if
Demo_v-if指令
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><script src="vue.js"></script> </head> <body><!-- v-if指令v-if指令的作用是根據表達式的真假切換元素的顯示狀態(tài)本質是通過操縱dom元素來切換顯示狀態(tài)表達式的值為true，元素存在于dom樹中；表達式的值為false，從dom樹中移除。--><div id="app"><button @click="ChangeShow">切換狀態(tài)</button><p v-if="IsShow">我是一個p標簽，由v-if控制</p><p v-show="IsShow">我是一個p標簽，由v-show控制</p><p v-if="temperature >= 35">熱死了！</p></div><script>var app = new Vue({el:'#app',data:{IsShow:true,temperature:40},methods:{ChangeShow:function(){this.IsShow = !this.IsShow;}}});</script> </body> </html>v-bind
Demo_v-bind指令
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><script src="vue.js"></script><style>.active{border: 1px solid red;}</style> </head> <body><!-- v-bind指令 v-bind指令的作用是為元素綁定屬性完整寫法是v-bind:屬性名簡寫的話可以直接省略v-bind，只保留 :屬性名--><div id="app">全寫：v-bind:src<img v-bind:src="imgSrc" v-bind:title="imgTitle" alt=""><br>簡寫 ：src<img :src="imgSrc" :title="imgTitle + '!!!!'" alt=""><br>添加類_三元表達式<button @click="toggleActive">點擊我改變class屬性</button><img :src="imgSrc" :title="imgTitle + '!!!!'" :class="isActive?'active':''" alt=""><br>添加類_對象方式<button @click="toggleActive">點擊我改變class屬性</button><img :src="imgSrc" :title="imgTitle + '!!!!'" :class="{active:isActive}" alt=""></div><script>var app = new Vue({el:'#app',data:{imgSrc:"http://www.itheima.com/images/logo.png",imgTitle:"黑馬程序員",isActive:false},methods:{toggleActive:function(){this.isActive = !this.isActive;}}});</script> </body> </html>v-for
Demo_v-for指令
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><script src="vue.js"></script> </head> <body><!-- v-for指令的作用是根據數據生成列表結構數組經常和v-for結合使用語法是(item,index) in 數據item和index可以結合其他指令一起使用數組長度的更新會同步到頁面上，是響應式的--><div id="app"><ul><li v-for="item in Array">你好,{{ item }}</li></ul><h2 v-for="item in vegetables" :title="item.name">{{ item.name }}</h2><button @click="add">點我添加</button><button @click="remove">點我移除</button></div><script>var app = new Vue({el:'#app',data:{Array:["張三","李四","王五","馬六","二蛋"],vegetables:[{name:"蔥花炒蛋"},{name:"番茄炒蛋"}]},methods:{add:function(){this.vegetables.push({ name:"韭菜炒蛋"});},remove:function(){// 移除最左邊的一個this.vegetables.shift();}}}) </script> </body> </html>v-model
Demo_v-model指令
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><script src="vue.js"></script> </head> <body><!-- v-model指令的作用是便捷的設置和獲取表單元素的值綁定的數據會和表單元素值相關聯(lián)--><div id="app"><input type="text" v-model="message" @keyup.enter="getMessage"><h2>{{ message }}</h2><input type="button" value="點我修改" @click="setMessage"></div><script>var app = new Vue({el:'#app',data:{message:"黑馬程序員"},methods:{getMessage:function(){alert(this.message);},setMessage:function(){this.message = "111";}}});</script> </body> </html>案例1 計數器
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><script src="vue.js"></script> </head> <body><!-- 計數器創(chuàng)建Vue示例時：el（掛載點）、data（數據）、methods（方法）v-on指令的作用是綁定事件，簡寫為@方法中通過this關鍵字獲取data中的數據v-text指令的作用是設置元素的文本值，簡寫為{{}}--><div class="input-num" id="app"><button @click='reduce'>-</button><span>{{ num }}</span><button @click='add'>+</button></div><script>var app = new Vue({el:'#app',data:{num:1},methods:{reduce:function(){console.log("reduce")if(this.num == 1){alert("不能為0")}else{this.num--;}},add:function(){console.log("add")if(this.num>=9){alert("不能超過10個")}else{this.num++;}}}});</script> </body> </html>案例2 圖片切換
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><script src="vue.js"></script> </head> <body><!-- 圖片切換 列表數據使用數組保存v-bind指令可以設置元素屬性，比如srcv-show和v-if都可以切換元素的顯示狀態(tài)，頻繁切換用v-show--><div id="app"><img :src="imgArray[index]" alt=""><a href="#" @click="prev" v-show="index>0">上一張</a><a href="#" @click="next" v-show="index<imgArray.length-1">下一張</a></div><script>var app = new Vue({el:'#app',data:{imgArray:["https://img20.360buyimg.com/pop/s590x470_jfs/t1/222408/26/6055/99082/61b997c0Ead36013d/9b2da06b3f438624.jpg.webp","https://img14.360buyimg.com/pop/s590x470_jfs/t1/208171/7/13900/69634/61c96765E6e65374c/642ed952f9778144.jpg.webp","https://imgcps.jd.com/ling4/100012043978/5Lqs6YCJ5aW96LSn/5L2g5YC85b6X5oul5pyJ/p-5f3a47329785549f6bc7a6f4/a10ab487/cr/s/q.jpg","https://img12.360buyimg.com/pop/s590x470_jfs/t1/205354/16/17988/82004/61b1dc96Ee600f3f3/9ffa616349105df0.png.webp"],index:0,},methods:{prev:function(){this.index--;},next:function(){this.index++;}}});</script> </body> </html>案例3 小黑記事本
<!-- 列表結構可以通過v-for指令結合數據生成v-on結合事件修飾符可以對事件進行限制，比如.enterv-on在綁定事件時可以傳遞自定義參數通過v-model可以快速的設置和獲取表單元素的值基于數據的開發(fā)方式--> <!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><script src="vue.js"></script> </head> <body><!-- 主體區(qū)域 --><section id="todoapp"><!-- 輸入框 --><header class="header"><h1>小黑筆記本</h1><input v-model="inputValue" @keyup.enter="add" type="text" autofocus="autofocus" autocomplete="off" placeholder="請輸入任務" class="new_todo"></header><!-- 列表區(qū)域 --><section class="main"><ul class="to_list"><li class="todo" v-for="(item,index) in list"><div class="view"><span class="index">{{ index+1 }}</span><label>{{ item }}</label><button @click="remove(index)" class="destory">×</button></div></li></ul></section><!-- 統(tǒng)計和清空 --><footer class="footer"><span class="todo_count" v-if="list.length!=0"><strong>{{ list.length }}</strong>items left</span><button @click="clear" class="clear_completed" v-show="list.length!=0">Clear</button></footer></section><!-- 底部 --><footer class="info"></footer><!-- JS --><script>var app = new Vue({el:'#todoapp',data:{list:["寫代碼","吃飯飯","睡覺覺"],inputValue:"好好學習", //用來獲取用戶輸入的內容},methods:{add:function(){this.list.push(this.inputValue);},remove:function(index){console.log("1")this.list.splice(index,1);},clear:function(){this.list = [];}}})</script> </body> </html>3. Vue網絡應用
axios的使用
<!-- axios在線地址：<script src="https://unpkg.com/axios/dist/axios.min.js"></script> 隨機獲取笑話的接口請求地址： https://autumnfish.cn/api/joke/list請求方法：get請求參數：numnum——笑話條數——類型為數字響應內容：隨機笑話 用戶注冊接口1請求地址： https://autumnfish.cn/api/user/reg請求方法：post請求參數：usenamenum——用戶名——不能為空響應內容：注冊成功或者失敗 --> <!-- axios必須先導入才可以使用使用get或者post方法即可發(fā)送對應的請求then方法中的回調函數會在請求成功或者失敗時觸發(fā)通過回調函數的形參可以獲取響應內容或者錯誤信息--><!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><!-- 官網提供的axios在線地址 --><script src="https://unpkg.com/axios/dist/axios.min.js"></script></head> <body><input type="button" value="get請求" class="get"><input type="button" value="post請求" class="post"><!-- 隨機獲取笑話接口 --><script>document.querySelector(".get").onclick = function(){axios.get("https://autumnfish.cn/api/joke/list?num=3").then(function(response){console.log(response);},function(err){console.log(err);})}</script><!-- 用戶注冊接口 --><script>document.querySelector(".post").onclick = function(){//post的數據是放到第二個參數里面寫的axios.post("https://autumnfish.cn/api/user/reg",{username:"張三aichidoya"}).then(function(response){console.log(response);}),function(err){console.log(err)}}</script> </body> </html>axios + vue 的使用
<!-- axios回調函數中的this已經改變，無法訪問到data中數據，把this保存起來，回調函數中直接使用保存的this的變量即可。--> <!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><!-- 官網提供的axios在線地址 --><script src="https://unpkg.com/axios/dist/axios.min.js"></script><script src="vue.js"></script> </head> <body><div id="app"><input type="button" value="獲取笑話" @click="getjoke"><p>{{ joke }}</p></div><script>var app = new Vue({el:'#app',data:{joke:"笑話"},methods:{getjoke:function(){// this會變，所以我們現(xiàn)在外邊獲取到this賦值到that。var that = this;axios.get("https://autumnfish.cn/api/joke").then(function(response){that.joke = response.data;},function(err){console.log(err);that.joke = "獲取笑話失敗哦"})}}})</script> </body> </html>案例4 天知道
<!-- 查詢天氣的應用 --> <!-- 回車查詢按下回車（v-on .enter）查詢數據（axios接口 v-model）渲染數據（v-for 數組 that）天氣接口：請求地址：http://wthrcdn.etouch.cn/weather_mini請求方法：get請求參數：city（查詢城市名）響應內容：天氣信息點擊查詢點擊城市（v-on 自定義參數）查詢數據（this關鍵字）渲染數據--><!-- 應用的邏輯代碼建議和頁面分離，使用單獨的js文件編寫axios回調函數中this指向改變了，需要額外的保存一份--><!-- 自定義參數可以讓代碼的復用性更高methods中定義的方法內部，可以通過this關鍵字點出其他的方法--><!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>天知道</title><link rel="stylesheet" href="快速入門Vue.js資料\04-源代碼\demo-天知道\css\index.css"><link rel="stylesheet" href="快速入門Vue.js資料\04-源代碼\demo-天知道\css\reset.css" /></head><body><div class="wrap" id="app"><div class="search_form"><div class="logo"><img src="快速入門Vue.js資料\04-源代碼\demo-天知道\img\logo.png" alt="logo" /></div><div class="form_group"><input type="text" v-model="city" @keyup.enter="searchWeather" class="input_txt" placeholder="請輸入查詢的天氣"/><button class="input_sub" @click="searchWeather">搜 索</button></div><div class="hotkey"><a href="javascript:;" @click="changeCity('北京')">北京</a><a href="javascript:;" @click="changeCity('上海')">上海</a><a href="javascript:;" @click="changeCity('廣州')">廣州</a><a href="javascript:;" @click="changeCity('深圳')">深圳</a></div></div><ul class="weather_list"><li v-for="item in weatherList"><!-- 天氣類型 --><div class="info_type"><span class="iconfont">{{ item.type }}</span></div><!-- 天氣溫度 --><div class="info_temp"><b>{{ item.low }}</b>~<b>{{ item.high }}</b></div><!-- 日期 --><div class="info_date"><span>{{ item.date }}</span></div></li></ul></div><!-- 開發(fā)環(huán)境版本，包含了有幫助的命令行警告 --><script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script><!-- 官網提供的 axios 在線地址 --><script src="https://unpkg.com/axios/dist/axios.min.js"></script><!-- 自己的js --><script>var app = new Vue({el:'#app',data:{city:"",weatherList:[]},methods:{searchWeather:function(){var that = this;axios.get("http://wthrcdn.etouch.cn/weather_mini?city="+this.city).then(function(response){console.log(response.data.data.forecast);that.weatherList = response.data.data.forecast;},function(err){console.log(err);})},changeCity:function(city){this.city = city;this.searchWeather();} }})</script></body></html>4. Vue綜合應用
案例5 音樂播放器
本篇文章用于作者本人學習回顧時使用。
總結
以上是生活随笔為你收集整理的【Vue学习笔记】黑马程序员四小时速成VUE的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 60+ 实用 React 工具库，助力你
- 下一篇： 记一次 Vue2 迁移 Vue3 的实践