當前位置：首頁 > 前端技术 > vue >内容正文

vue

【Vue学习笔记】黑马程序员四小时速成VUE

發布時間：2023/12/9 vue 20 豆豆

生活随笔收集整理的這篇文章主要介紹了【Vue学习笔记】黑马程序员四小时速成VUE 小編覺得挺不錯的,現在分享給大家,幫大家做個參考.

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簡介

JavaScript框架

簡化Dom操作

響應式數據驅動

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><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>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><div class="app_2">{{ message }}</div><script>var app = new Vue({el:'.app_2',data:{message:"現在使用的class選擇器"}})</script><br><h2 id="app_3">{{ message }}</h2><script>var app = new Vue({el: '#app_3',data:{message:"這是H2元素"}})</script> </body> </html>

Demo3：認識Vue實例——data數據對象

2. Vue本地應用

通過Vue實現常見的網頁效果

Vue指令

內容綁定，事件綁定。
顯示切換，屬性綁定。
列表循環，表單元素綁定。

Vue指令作用

v-text	設置標簽的內容（textContent）
v-html	設置元素的innerHTML
v-on	為元素綁定事件
v-show	根據真假切換元素的顯示狀態
v-if	根據表達式的真假切換元素的顯示狀態
v-bind	為元素綁定屬性
v-for	根據數據生成列表結構
v-model	便捷的設置和獲取表單元素的值

v-text

Demo_v-text指令

v-html

Demo_v-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><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指令補充

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><div id="app"><input type="button" value="切換顯示狀態" @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><div id="app"><button @click="ChangeShow">切換狀態</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><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><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指令

案例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><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><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 小黑記事本

<!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><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><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><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><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的使用

<!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="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 的使用

<!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="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會變，所以我們現在外邊獲取到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 天知道

<!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><script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script><script src="https://unpkg.com/axios/dist/axios.min.js"></script><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 工具库，助力你
下一篇： [html] 你知道什么是粘性布局吗？