Vue基础快速入门学习笔记整理
一、Vue基础
课程详情：黑马VUE学习笔记—后端小白入门（附带项目天气预报和音乐播放器所有源码）
视频地址：https://www.bilibili.com/video/BV12J411m7MG?p=37&share_source=copy_web
课程源代码：链接：https://pan.baidu.com/s/1yQMpgrHDPMnGYkmwfgRseQ
提取码：1234
提前掌握基础知识：HTML、CSS、JavaScript、AJAX
工具：VSCode、插件Live Server
课程安排：1. Vue基础 2. 本地应用 3. 网络应用 4. 综合应用
参考博客文章：https://blog.csdn.net/cjdxyang/article/details/121122938
01 第一个vue程序
特点
1）JavaScript框架
2）简化Dom操作
3）响应式数据驱动
步骤
1）导入开发版本的Vue.js
2）创建Vue实例对象，设置el属性和data属性
3）使用简洁的模板语法把数据渲染到页面上
DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Vue基础title>
head>
<body>
<div id="app" class="app">
<span>{{message}}span>
div>
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js">script>
<script>
var app = new Vue({ /* 2、创建Vue实例对象，设置el属性和data属性*/
el: '#app', // 挂载点，一般使用ID选择器
data: { // 数据对象
message: 'Hello 万季玲!'
}
})
script>
body>
html>
官方文档：https://cn.vuejs.org
官方文档上也有讲解使用实例的视频。
02 el 挂载点
1）el是用来设置Vue实例挂载（管理）的元素
2）Vue实例的作用范围：在el命中的元素内部可以被渲染，el选项命中的元素及其内部的后代元素
3）除了ID选择器，可以使用其他的选择器，建议使用ID选择器
4）除了div标签，可以使用其他的双标签，不能使用HTML和BODY
03 data 数据对象
1）Vue中用到的数据定义在data中
2）data中可以写复杂类型的数据
3）渲染复杂类型数据时,遵守js的语法即可
Vue中用到的数据定义在data中, data中可以写复杂类型的数据，例如array，obj等类型数据
var app = new Vue({ /* 2、创建Vue实例对象，设置el属性和data属性*/
el: '#app', // 挂载点，一般使用ID选择器
data: { // 数据对象
message: '你好！',
school:{ //object对象
name:"huabei",
mobile:"112"
},
campus:["school1","school2","school3"] //数组
}
})
渲染复杂类型数据时,遵守js的语法即可
<div id="app" class="app">
字符串：{{message}} br>
对象：{{school}} br>
对象属性：{{school.name}} {{school.mobile}} br>
数组：{{campus}} br>
数组元素：{{ campus[0] }} {{ campus[1] }} {{ campus[2] }}
div>
二、本地应用
04 本地应用-介绍
- 通过Vue实现常见的网页效果
- 学习Vue指令，以案例巩固知识
- Vue指令指的是，以v-开头的一组特殊语法
(1) 内容绑定、事件绑定 v-text、v-html、v-on(@)基础
(2) 显示切换、属性绑定 v-show、v-if、v-bind(:)
(3) 列表循环,表单元素绑定 v-for、v-on补充、v-model
05 本地应用 v-text
1）v-text指令的作用：设置标签的内容（textContent）
2）默认写法会替换全部内容，使用差值表达式{undefined{}}可以替换指定内容。（如本例中”深圳的显示”）
3）内部支持写表达式（如字符串拼接）
var app = new Vue({
el: '#app',
data: {
msg:"你好！"
}
})
<div id="app">
<h3 v-text="msg+'!'">毛毛h3>
<h3>{{msg + '!'}}毛毛h3>
div>
测试结果：
你好！!
你好！！毛毛
06 本地应用 v-html
1）v-html指令的作用是:设置元素的innerHTML
2）内容中有html结构会被解析为标签
3）v-text指令无论内容是什么,只会解析为文本
4）解析文本使用v-text,需要解析html结构使用v-html
var app = new Vue({
el: '#app',
data: {
msg:"这是一个链接"
}
})
<div id="app">
<h3>{{msg}}h3>
<h3 v-text="msg">h3>
<h3 v-html="msg">h3>
div>
测试结果：
<a href="#">这是一个链接</a>
<a href="#">这是一个链接</a>
这是一个链接
比较：
v-html：解析html结构
v-text： 解析文本
07.本地应用 v-on
1）v-on指令的作用是:为元素绑定事件绑定的方法2）定义在methods属性中
3）指令可以简写为@
4）在元素中用v-on或@绑定事件，@click="myMethod"
5）方法内部可以通过this关键字访问定义在data中的数据
var app = new Vue({
el: '#app',
data:{
msg:"我是"
},
methods: {
myclick:function (){
alert("鼠标点击事件完成！")
},
addname:function (){
this.msg += "毛毛" //方法内部可以通过this关键字访问定义在data中的数据
}
}
})
<div id="app">
<input type="button" value="v-on指令" v-on:click="myclick">
<input type="button" value="v-on简写成@" @click="myclick">
<input type="button" value="添加名字" @click="addname">input> br>
{{msg}}
div>
08 本地应用 示例：计数器
思路：
1）data中定义数据:比如num
2）methods中添加两个方法:比如add(递增),sub(递减)
3）使用v-text将num设置给span标签
4）使用v-on将add,sub分别绑定给+,按钮
5）累加的逻辑:小于5累加,否则提示。递减的逻辑:大于0递减否则提示
var app = new Vue({
el: '#app',
data:{
num:1
},
methods:{
sub:function (){ //减法
if(this.num>0){
this.num--;
}else{
alert("别点啦，到底啦！")
}
},
add:function (){ //加法
if(this.num<5){
this.num++;
}else{
alert("别点啦，已经超过5啦！")
}
}
}
<div id="app">
<button @click="sub">-button>
<span>{{ num }}span>
<button @click="add">+button>
div>
总结：
1）引入Vuejs的开发环境文件
2）创建Vue示例时:el(挂载点),data(数据),methods(方法);
3）v-on指令的作用是绑定事件,简写为@；
4）方法中通过this,关键字获取data中的数据；
5）v-text指令的作用是:设置元素的文本值简写为{{}};
6）v-html指令的作用是:设置元素的innerHTML;
09 本地应用 v-show
1）根据布尔值，切换元素的显示和隐藏(操纵display样式)。
2）后面的内容,最终都会解析为布尔值。
3）值为true元素显示,值为false元素隐藏。
4）数据改变之后，对应元素的显示状态会同步更新。
5）方法中this.isShow = !this.isShow可以切换显示状态
<script>
var app = new Vue({
el: '#app',
data:{
age:16,
isShow:false
},
methods:{
changeShow:function (){ //切换显示状态
this.isShow = !this.isShow
}
}
})
</script>
<div id="app">
<button @click="changeShow">切换显示状态button>
<img v-show="isShow" src="/img/mm.jpg" alt="" style="height: 100px">
<img src="/img/mm.jpg" alt="" v-show="true" style="height: 100px">
<img src="/img/mm.jpg" alt="" v-show="age>=8" style="height: 100px">
div>
10 本地应用 v-if指令
1）根据布尔值,切换元素的显示和隐藏(操纵dom元素)。
2）表达式的值为true,元素存在于dom树中
3）为false,从dom树中移除。
4）频繁的切换v-show,反之使用v-if,前者的切换消耗小
5）v-if和v-show的区别 v-show直接修改display 而v-if是直接抹除标签
<script>
var app = new Vue({
el: '#app',
data:{
isShow:false
},
methods:{
changeShow:function (){ //切换显示状态
this.isShow = !this.isShow
}
}
})
</script>
<div id="app">
<button @click="changeShow">切换显示状态button>
<p v-if="isShow">这是一个p段落p>
div>
比较 v-show 和 v-if
v-show：根据布尔值，切换元素的显示和隐藏(操纵display样式)， 值为true元素显示,值为false元素隐藏。 数据改变之后，对应元素的显示状态会同步更新。
v-if： 根据布尔值,切换元素的显示和隐藏(操纵dom元素)。 表达式的值为true,元素存在于dom树中,为false,从dom树中移除。
【注】频繁切换使用v-show，反之使用v-if，前者的切换消耗小。两者用法一样，其中的值可以是布尔值、表达式、data变量，但是实现的原理不一样，前者改变样式，后者操作dom树。
11 本地应用 v-bind指令
1）v-bind指令的作用是:为元素绑定属性，设置元素的属性(比如:src,title,class)
2）v-bind:属性名=表达式
3）简写的话可以直接省略v-bind,可以简写成:属性名=表达式
4）需要动态的增删class建议使用对象的方式
<script>
var app = new Vue({
el:"#app",
data:{
imgSrc:"img/mm.jpg",
imgTillte:"毛毛手绘",
isActive:false
},
methods:{
toggleActive:function (){
this.isActive = !this.isActive
}
}
})
</script>
<img :src="imgSrc" :title="imgTillte" :class="{active:isActive}" @click="toggleActive" alt="">
<div id="app">
<img v-bind:src="imgSrc" v-bind:title="imgTillte" alt="">
<img :src="imgSrc" :title="imgTillte"
:class="{active:isActive}" @click="toggleActive" alt="">
div>
12 本地应用 示例：图片切换
1） 定义图片数组 imgArr:[ ]
2）添加图片索引 index:0
3）v-bind绑定src属性
4）v-on图片切换逻辑 methods中prev,next并且
5）v-show显示状态切换
DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>图片切换示例title>
<link rel="stylesheet" href="./css/index.css" />
head>
<body>
<div id="mask">
<div class="center">
<h2 class="title"><img src="./images/logo.jpg" alt="">毛毛宣传栏h2>
<img :src="imgList[index]" alt="" />
<a @click="prev" v-show="index>0" href="javascript:void(0)" class="left">
<img src="./images/prev.png" alt="" />
a>
<a @click="next" v-show="index" href="javascript:void(0)" class="right">
<img src="./images/next.png" alt="" />
a>
div>
div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js">script>
<script>
const app = new Vue({
el: "#mask",
data: { // 1、定义资源 图片数组和索引
imgList: [ //图片数组
"./images/IMG.jpg",
"./images/IMG_001.jpg",
"./images/IMG_002.jpg",
"./images/IMG_003.jpg",
"./images/IMG_004.jpg",
],
index: 0 //索引
},
methods: { // 3、定义方法，上一张和下一张
prev() {// 上一张
this.index--;
},
next() {// 下一张
this.index++;
}
}
});
script>
body>
html>
13 本地应用 v-for
1）v-for指令的作用是:根据数据生成列表结构
2）数组经常和v-for结合使用
3）语法是( item,index ) in 数据
4）item和index可以结合其他指令起使用,push和shift
5）数组长度的更新会同步到页面上，是响应式的
模板
<div id="app">
<ul>
<li v-for="(item,index) in arr" :title="item">
{{ index }}{{ item }}
li>
<li v-for="(item,index) in objArr">
{{ item.name }}
li>
ul>
div>
示例：
<body>
<div id="app">
<input type="button" value="添加" @click="add">
<input type="button" value="删除" @click="remove">
<ul>
<li v-for="(item,index) in arr" :title="item">
{{index+1}}城市{{item}}
li>
ul>
div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js">script>
<script>
var app =new Vue({
el:"#app",
data:{
arr:["北京","上海","广州"]
},
methods:{
add:function(){ //添加
this.arr.push("武汉");
},
remove:function(){ //删除 第一条数据
this.arr.shift();
}
}
})
script>
body>
14 本地应用 v-on补充
作用：传递自定义参数，事件修饰符
1）事件绑定的方法写成函数调用的形式，可以传入自定义参数
2）定义方法时需要定义形参来接收传入的实参
3）事件的后面跟上.修饰符可以对事件进行限制
4）.enter可以限制触发的按键为回车
5）事件修饰符有多种：https://cn.vuejs.org/v2/api/#v-on
模板
<div id="app">
<input type="button" @click="doIt(p1,p2)" />
<input type="text" @keyup.enter="sayHi">
</div>
var app = new Vue({
el: "#app",
methods: {
doIt: function(p1,p2) {},
sayHi:function(){}
}
})
示例
<body>
<input type="button" value="点击" @click="doIt(666,'老铁')">
<input type="text" @keyup.enter="sayHi">
div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js">script>
<script>
var app=new Vue({
el:"#app",
doIt:function(p1,p2){ //传入参数
console.log("做it");
console.log(p1);
console.log(p2);
},
sayHi:function(){ //事件修饰符触发的事件
alert("吃了没");
}
}
})
script>
body>
html>
15 本地应用 v-model
1）v-model：获取和设置表单元素的值(双向数据绑定)
2）v-model指令的作用：便捷的设置和获取表单元素的值
3）绑定的数据会和表单元素值相关联
4）绑定的数据←→表单元素的值
<div id="app">
<input type="button" value="修改message" @click="setMsg">
<input type="text" v-model="message" @keyup.enter="getMsg">
<h2>{{ message }}h2>
div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js">script>
<script>
var app = new Vue({
el:"#app",
data:{
message:"毛毛"
},
methods: {
getMsg:function(){
alert(this.message);
},
setMsg:function(){
this.message ="酷丁鱼";
}
},
})
script>
16 本地应用 示例：小黑记事本
1、新增
（1）生成列表结构(v-for和数组)
（2）获取用户输入(v-model)
（3）回车,新增数据(v-on .enter 添加数据)
（4）总结
1）v-for指令的作用
2）v-model指令的作用
3）v-on指令,事件修饰符
4）通过审查元素快速定位
2、删除
（1）数据改变，和数据绑定的元素同步改变
（2）事件可以接收自定义的参数
（3）splice的作用：根据索引删除对应元素
3、统计
（1）基于数据的开发方式
（2）v-text指令是设置文本，也可以用插值表达式{undefined{}}
4、清空
（1）基于数据的开发方式-清空数组即可
5、隐藏
（1）没有数据时，隐藏元素（数组非空时v-if v-show ）
6、总结
（1） 列表结构可以通过v-for指令结合数据生成
（2） v-on结合事件修饰符可以对事件进行限制,比如.enter
（3） v-on在绑定事件时可以传递自定义参数
（4） 通过v-model可以快速的设置和获取表单元素的值
（5） 基于数据的开发方式
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8" />
<title>小黑记事本title>
<link rel="stylesheet" type="text/css" href="./css/index.css" />
head>
<body>
<section id="todoapp">
<header class="header">
<h1>小黑记事本h1>
<input v-model="inputValue" @keyup.enter="add" autofocus="autofocus" autocomplete="off" placeholder="请输入任务"
class="new-todo" />
header>
<section class="main">
<ul class="todo-list">
<li class="todo" v-for="(item,index) in list">
<div class="view">
<span class="index">{{ index+1 }}.span>
<label>{{ item }}label>
<button class="destroy" @click="remove(index)">删除button>
div>
li>
ul>
section>
<footer class="footer" v-show="list.length!=0">
<span class="todo-count" v-show="list.length!=0">
<strong>{{list.length}}strong> items left
span>
<button v-show="list.length!=0" class="clear-completed" @click="clear">Clearbutton>
footer>
section>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js">script>
<script>
var app = new Vue({
el: "#todoapp",
data: {
list: ["写代码", "吃饭饭", "睡觉觉"],
inputValue: "好好学习,天天向上"
},
methods: {
add: function () { //数组添加数据
this.list.push(this.inputValue);
},
remove:function(index){ //2.2 数组删除数据，事件接受自定义参数
console.log("删除");
console.log(index);
//2.3 splice 根据索引删除对应元素
this.list.splice(index,1);
},
clear:function(){ //4.1 清空数组
this.list=[];
}
},
})
script>
body>
html>
三、网络应用
17 网络应用 介绍
1）Vue结合网络数据开发应用
2）axios-网络请求库
3）axios+vue-结合Vue一起
4）天气预报案例
18 网络应用 axios基本使用
要点
1）axios：功能强大的网络请求库
2）axios必须先导入才可以使用
3）使用get或post方法即可发送对应的请求
4）then方法中的回调函数会在请求成功或失败时触发
5）通过回调函数的形参可以获取响应内容,或错误信息
6）文档传送门：https://github.com/axios/axios
7）axios官网文档：
文档一：http://www.axios-js.com/zh-cn/docs/
文档二：https://www.axios-http.cn/docs/intro
模板
//axios必须先导入才可以使用
//使用get或post方法 发送对应的请求
//then方法 触发 请求成功或失败 的回调函数
//通过回调函数的形参 可以获取响应内容,或错误信息
axios.get(地址?key=value&key2=values).then(function(response){},function(err){})
axios.post(地址,{key:value,key2:value2}).then(function(response){},function(err){})
示例
DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>25-网络应用- axios基本使用title>
head>
<body>
<input type="button" value="get请求" class="get">
<input type="button" value="post请求" class="post">
<script src="https://unpkg.com/axios/dist/axios.min.js">script>
<script>
/*
接口1:随机笑话
请求地址:https://autumnfish.cn/api/joke/list
请求方法:get
请求参数:num(笑话条数,数字)
响应内容:随机笑话
*/
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);
})
}
/*
接口2:用户注册
请求地址:https://autumnfish.cn/api/user/reg
请求方法:post
请求参数:username(用户名,字符串)
响应内容:注册成功或失败
*/
document.querySelector(".post").onclick=function(){
axios.post("https://autumnfish.cn/api/user/reg",{username:"阿香"})
.then(function(response){
console.log(response);
},function(err){
console.log(err);
})
}
script>
body>
html>
19 网络应用 axios与vue结合使用
1）axios回调函数中的this已经改变,无法访问到data中数据
2）把回调函数写成箭头函数=>，再直接使用this即可
3）和本地应用的最大区别就是改变了数据来源
DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>26-网络应用- axios与vue结合使用title>
head>
<body>
<div id="app">
<input type="button" value="获取笑话" @click="getJoke">
<p>{{joke}}p>
div>
<script src="https://unpkg.com/axios/dist/axios.min.js">script>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js">script>
<script>
/*
接口:随机获取一条笑话
请求地址:https://autumnfish.cn/api/joke
请求方法:get
请求参数:无
响应内容:随机笑话
*/
var app = new Vue({
el:"#app",
data:{
joke:"很好笑的笑话"
},
methods: {
getJoke:function(){
axios.get("https://autumnfish.cn/api/joke")
.then((response)=>{
// console.log(response)
console.log(response.data);
// console.log(this.joke);
this.joke = response.data;
},function (err) {
console.log(err)
})
}
},
})
script>
body>
html>
20 网络应用 天知道
思路
1）按下回车(v-on .enter)
2）查询数据(axios 接口 v-model )
3）渲染数据(v-for 数组 that)
注意
1）应用的逻辑代码建议和页面分离，使用单独的js文件编写
2）axios回调函数写成箭头函数=>，再直接使用this即可，保证this指向不改变
3）服务器返回的数据比较复杂时，获取的时候需要注意层级结构
DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>天知道title>
head>
<body>
<div class="wrap" id="app">
<div class="search_form">
<div class="form_group">
<input type="text" class="input_txt" placeholder="请输入查询的天气" v-model="city" @keyup.enter="queryWeather" />
<button class="input_sub" @click="queryWeather">搜 索button>
div>
<div class="hotkey">
<a href="javascript:;" v-for="city in hotCitys" @click="clickSearch(city)">{{ city }}a>
div>
div>
<ul class="weather_list">
<li v-for="(item,index) in forecastList">
<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>
new Vue({
el: "#app",
data: {
city: "郑州",
forecastList: [],
hotCitys: ["北京", "上海", "广州", "深圳"]
},
methods: {
queryWeather() { // 查询天气信息
this.forecastList = [];
axios.get(`http://wthrcdn.etouch.cn/weather_mini?city=${this.city}`)
.then(res => {
console.log(res);
//注意多层结构的数据获取
this.forecastList = res.data.data.forecast;
}).catch(err => {
console.log(err);
}).finally(() => { });
},
clickSearch(city) { //搜索框点击搜索，传入城市的参数，调用查询天气信息的函数
this.city = city;
this.queryWeather();
}
}
});
script>
body>
html>
四、综合应用
21 综合应用（音乐播放器）介绍
代码地址：https://pan.baidu.com/s/1yQMpgrHDPMnGYkmwfgRseQ
提取码：1234
介绍
1）歌曲搜索
2）歌曲播放
3）歌曲封面
4）歌曲评论
5）播放动画
6）mv播放
22 综合应用 歌曲搜索
1）按下回车(v-on .enter)
2）查询数据(axios 接口 v-model )
3）渲染数据(v-for 数组 that)
23 综合应用 歌曲播放
-
点击播放(v-on 自定义参数)
点击播放按钮：播放歌曲的本质就是设置歌曲的src，切换歌曲就是更换不同的src，歌曲的地址从network查看，歌曲地址是通过接口获取到的，获取歌曲地址后找到歌曲播放地址，将播放地址存到data的musicUrl字段中，再传给给audio标签；
注：点击时需要传入参数，从接口获得的歌曲的点击事件才会才会被绑定。 -
歌曲地址获取：
根据接口确定一个传递的参数（歌曲id），搜索出的歌曲时服务器返回的结果数组中每一项都有歌曲id，不同歌曲id不同，但查询逻辑是一样的；（总：接口调用，把所需的参数传过去） -
歌曲地址设置(v-bind)
data中增加歌曲属性，歌曲id依赖与歌曲的搜索结果，v-bind绑定到播放条中。
24 综合应用 歌曲封面
25 综合应用 播放动画
-
监听音乐播放(v-on play)
核心：增删一个类
播放时碟片旋转，暂停时停时旋转，检测动画的播放状态，在对应的事件中增删类名， -
监听音乐暂停(v-on pause)
-
操纵类名(v-bind 对象)
audio标签的play事件会在音频播放的时候触发
audio标签的pause事件会在音频暂停的时候触发
通过对象的方式设置类名，类名生效与否取决于后面值的真假
26 综合应用 播放mv
- mv图标显示(v-if)
- mv地址获取
- 遮罩层
- mv地址设置