VUE入门+5个小案例

最新推荐文章于 2024-04-11 02:33:16 发布

BeyondCZN.

最新推荐文章于 2024-04-11 02:33:16 发布

阅读量3.1w

点赞数 77

文章标签： html html5 vue.js css javascript

本文链接：https://blog.csdn.net/beyondczn/article/details/113945908

版权

本文是我心血来潮学习Vue框架所做的笔记，也供童鞋们学习参考。作为后端的开发人员，学习前端的Vue框架只是单纯地去了解下前端框架的内容，所以并没有深入地去学习，因此本文只适合Vue入门的童鞋哦。由于我的能力有限，所写的内容可能有错误，小伙伴们可以在评论区中进行讨论。这篇笔记是根据哔哩哔哩大学中黑马程序员up主的视频内容进行记录的。视频地址：前端基础必会教程-4个小时带你快速入门vue，欢迎童鞋们去三连哦。

一、Vue基础

1.第一个Vue程序

步骤：

引入vue开发环境 <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
编写所需要操作的dom树 <div id="app"> {{message}} </div>
编写script脚本

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>vue01</title>
	</head>
	<body>
		<!-- 开发环境版本，包含了有帮助的命令行警告 -->
		<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
		
		<div id="app">
			{{message}}
		</div>
		
		<script>
			var vue = new Vue({
				el:"#app",
				data:{
					message:"你好 VUE!"
				},
			})
		</script>
	</body>
</html>

运行结果：
在这里插入图片描述

2.el挂载点

1) 	el是用来设置Vue实例挂载(管理)的元素

2) 	Vue实例的作用范围是什么呢?
	Vue会管理el选项命中的元素及其内部的后代元素
	
3)	是否可以使用其他的选择器?
	可以使用其他的选择器,但是建议使用ID选择器
	
4) 	是否可以设置其他的dom元素呢?
	可以使用其他的双标签,不能使用HTML和BODY

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>vue02</title>
	</head>
	<body id = "body">
		<!-- 在指定的标签之外是不起作用的 -->
		{{message}}
		<!-- 开发环境版本，包含了有帮助的命令行警告 -->
		<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
		<!-- Vue会管理el选项命中的元素及其内部的后代元素 -->
		<div id="app">
			{{message}}
			<h2>
				{{message}}
			</h2>
		</div>
		<script>
			var vue = new Vue({
				// el:"#app", //id选择器
				// el:".app", //类选择器
				// el: "div", // 标签选择器
				el:"#body", // 不能使用HTML和BODY
				data: {
					message: "Hello VUE!"
				},
			})
		</script>
	</body>
</html>

如果使用第4)点中的html标签或者body标签作为el挂载点，浏览器会报错：
在这里插入图片描述

3.data数据对象：

1) 	Vue中用到的数据定义在data中

2)	data中可以写复杂类型的数据

3)	渲染复杂类型数据时,遵守js的语法即可

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>vue01</title>
	</head>
	<body>
		<!-- 开发环境版本，包含了有帮助的命令行警告 -->
		<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

		<div id="app">
			{{message}}
			
			<!-- 在data数据对象中存放user对象  -->
			<h2>
				{{user.name}}  {{user.age}}
			</h2>
			
			<!-- 在data数据对象中存放数组 -->
			<ul>
				<li>{{campus[0]}}</li>
				<li>{{campus[1]}}</li>
				<li>{{campus[2]}}</li>
				<li>{{campus[3]}}</li>
			</ul>
		</div>

		<script>
			var vue = new Vue({
				el: "#app",
				data: {
					message: "你好 VUE!", //数据为简单的字符串
					user: { // 数据为对象
						name: "陈泽楠",
						age: "23"
					},
					campus:["北京","上海","广州","深圳"] // 数据为数组
				},
			})
		</script>
	</body>
</html>

运行结果：
在这里插入图片描述

二、本地应用

1.v-text指令：

	（1）v-text指令的作用是:设置标签的内容(textContent)
	
	（2）默认写法会替换全部内容,使用差值表达式{{}}可以替换指定内容
	
	（3）内部支持写表达式

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>vue01</title>
	</head>
	<body>
		<!-- 开发环境版本，包含了有帮助的命令行警告 -->
		<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

		<div id = "app">
			<!-- 下面三种写法是等价的 -->
			<h2 v-text="message+'No.1'"></h2>
			<h2>{{message}}No.1</h2>
			<h2>{{message+'No.1'}}</h2>
		</div>
		<script>
			var vue = new Vue({
				el:"#app",
				data:{
					message:"中国"
					
				}
			})
		</script>
	</body>
</html>

运行结果：
在这里插入图片描述

2.v-html指令：

	(1)v-html指令的作用是:设置元素的innerHTML
	
	(2)内容中有html结构会被解析为标签
	
	(3)v-text指令无论内容是什么,只会解析为文本
	
	(4)解析文本使用v-text,需要解析html结构使用v-html

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>vue01</title>
	</head>
	<body>
		<!-- 开发环境版本，包含了有帮助的命令行警告 -->
		<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

		<div id = "app">
			<p v-html="message"></p>
			<p v-text="message"></p>
		</div>
		<script>
			var vue = new Vue({
				el:"#app",
				data:{
					// 特点是可以解析出字符串中的标签，其余的和v-text一样
					message:"<a href='http://www.wust.edu.cn/'>武汉科技大学</a>"
				}
			})
		</script>
	</body>
</html>

运行结果：
在这里插入图片描述

3.v-on指令：

	（1）v-on指令的作用是:为元素绑定事件
	
	（2）事件名不需要写on
	
	（3）指令可以简写为@
	
	（4）绑定的方法定义在methods属性中
	
	（5）方法内部通过this关键字可以访问定义在data中数据

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>vue01</title>
	</head>
	<body>
		<!-- 开发环境版本，包含了有帮助的命令行警告 -->
		<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

		<div id="app">
			<input type="button" value="v-on指令" v-on:click="doIt"></input>
			<input type="button" value="v-on简写" @click="doIt"></input>
			<input type="button" value="v-on双击" v-on:dblclick="doIt"></input>

			<h2>{{food}}</h2>
			<input type="button" value="单击修改食物" v-on:click="changeFood"></input>

		</div>
		<script>
			var vue = new Vue({
				el: "#app",
				data: {
					food: "西红柿炒鸡蛋"
				},
				methods: {
					doIt: function() {
						alert("做IT");
					},
					changeFood: function() {
						if (this.food == '蛋炒饭') {
							this.food='西红柿炒鸡蛋';
						}else{
							this.food='蛋炒饭'
						}
					},
				}
			})
		</script>
	</body>
</html>

运行结果：
在这里插入图片描述

4.v-show指令：

	（1）v-show指令的作用是:根据真假切换元素的显示状态
	
	（2）原理是修改元素的display样式,实现显示隐藏
	
	（3）指令后面的内容,最终都会解析为布尔值
	
	（4）值为true元素显示,值为false元素隐藏
	
	（5）数据改变之后，对应元素的显示状态会同步更新

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>vue01</title>
	</head>
	<body>
		<!-- 开发环境版本，包含了有帮助的命令行警告 -->
		<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
		<div id="app">
			
			<img src="img/monkey.gif" v-show="isShow" /><br>
			<input type="button" value="切换图片显示状态" @click="changeIsShow" />
			
			<img src="img/monkey.gif" v-show="age>=18" /><br>
			<input type="button" value=	"增加年龄" @click="addAge" />
			
		</div>
		<script>
			var vue = new Vue({
				el: "#app",
				data: {
					isShow: false,
					age: 17
				},
				methods: {
					changeIsShow: function() {
						this.isShow = !this.isShow
					},
					addAge: function() {
						this.age++;
					}
				}
			})
		</script>
	</body>
</html>

运行结果：

点击之前
点击之后

5.v-if指令：

	（1）v-if指令的作用是:根据表达式的真假切换元素的显示状态
	
	（2）本质是通过操纵dom元素来切换显示状态
	
	（3）表达式的值为true,元素存在于dom树中,为false,从dom树中移除
	
	（4）频繁的切换v-show,反之使用v-if,前者的切换消耗小

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>vue01</title>
	</head>
	<body>
		<!-- 开发环境版本，包含了有帮助的命令行警告 -->
		<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
		<div id="app">
			<input type="button" value="切换显示" @click="changeIsShow" />
			<p v-if="isShow">武汉科技大学</p><!-- v-if是改变dom树 -->
			<p v-show="isShow">武汉科技大学</p><!-- v-show是改变display样式 -->
			
			<input type="button" value="增加温度" @click="addTemperature" />
			<p v-if="temperature<0">冷死了</p><!-- 可以使用表达式 -->
		</div>
		<script>
			var vue = new Vue({
				el: "#app",
				data: {
					isShow: false,
					temperature:-100
				},
				methods: {
					changeIsShow: function() {
						this.isShow = !this.isShow
					},
					addTemperature: function() {
						this.temperature+=10;
					}
				}
			})
		</script>
	</body>
</html>

运行结果：

点击之前：
点击之后

6.v-bind指令：

	（1）v-bind指令的作用是:为元素绑定属性
	
	（2）完整写法是v-bind:属性名
	
	（3）简写的话可以直接省略v-bind,只保留:属性名
	
	（4）需要动态的增删class建议使用对象的方式 :
		active = {active:isActive},即isActive为true则active=active，否则active=''

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>vue01</title>
	</head>
	<style type="text/css">
		.active {
			border: 1px solid red;
		}
	</style>
	<body>
		<!-- 开发环境版本，包含了有帮助的命令行警告 -->
		<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
		<div id="app">
			<img v-bind:src="imgSrc" v-bind:title="imgTitle+'!!!'" v-bind:class="isActive?'active':''" 
			@click="changeActive" />
		</div>
		<script>
			var vue = new Vue({
				el: "#app",
				data: {
					imgSrc: "img/monkey.gif",
					imgTitle: "我是小猴子",
					isActive: false
				},
				methods: {
					changeActive: function() {
						this.isActive = !this.isActive;
					}
				}
			})
		</script>
	</body>
</html>

运行结果：

点击图片之前
点击图片之后

7.v-for指令：

	（1）v-for指令的作用是:根据数据生成列表结构
	
	（2）数组经常和v-for结合使用
	
	（3）语法是( item,index) in数据
	
	（4）item和index可以结合其他指令-起使用
	
	（5）数组长度的更新会同步到页面上，是响应式的

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>v-for指令</title>
	</head>
	<body>
		<!-- 开发环境版本，包含了有帮助的命令行警告 -->
		<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
		<div id="app">
			<input type="button" value="新增菜谱" @click="add" />
			<input type="button" value="减少菜谱" @click="reduce" />
			<ul>
				<li v-for="(item,index) in arr">城市{{index+1}}：{{item}}</li>
			</ul>

			<h2 v-for="item in vegetables">{{item}}</h2>
		</div>


		<script>
			var vue = new Vue({
				el: "#app",
				data: {
					arr: ["北京", "上海", "广州", "深圳"],
					vegetables: ["蛋炒饭", "西红柿炒蛋", "水煮大白菜", "红烧牛肉"]
				},
				methods: {
					add:function(){
						this.vegetables.push("肉末茄子")
					},
					reduce:function(){
						this.vegetables.shift();/* 移除数组左边的一个元素 */
					}
				}
			})
		</script>
	</body>
</html>

运行结果

点击之前
点击之后

在这里插入图片描述

8.v-on指令补充：

	（1）事件绑定的方法写成函数调用的形式，可以传入自定义参数
	
	（2）定义方法时需要定义形参来接收传入的实参
	
	（3）事件的后面跟上.修饰符可以对事件进行限制
	
	（4）.enter可以限制触发的按键为回车
	
	（5）事件修饰符有多种

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>v-for指令</title>
	</head>
	<body>
		<!-- 开发环境版本，包含了有帮助的命令行警告 -->
		<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
		<div id="app">
			<input type="button" value="点击" @click="show(123,'你好')" /><br>
			<input type="text" v-model="text" @keyup.enter="sayHi" />
		</div>
		<script>
			var vue = new Vue({
				el: "#app",
				methods: {
					show: function(p1, p2) {
						/* console.log("hello"); */
						alert(p1)
						alert(p2)
					},
					sayHi: function() {
						alert("吃了吗")
					}
				}
			})
		</script>
	</body>
</html>

运行结果：

点击之前
点击之后

9.v-model指令：

	（1）v-model指令的作用是便捷的设置和获取表单元素的值
	
	（2）绑定的数据会和表单元素值相关联
	
	（3）绑定的数据等于表单元素的值（双向绑定，同步更新

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>v-for指令</title>
	</head>
	<body>
		<!-- 开发环境版本，包含了有帮助的命令行警告 -->
		<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
		<div id="app">
			<input type="button" value="获取数据" @click="getMsg" />
			
			<input type="button" value="重置数据" @click="setMsg" />
			
			<input type="text" v-model="message" />

			<h2>{{message}}</h2>

		</div>
		<script>
			var vue = new Vue({
				el: "#app",
				data: {
					message: "武汉科技大学"
				},
				methods: {
					getMsg: function() {
						alert(this.message)
					},
					setMsg:function(){
						this.message="青山校区"
					}
				}
			})
		</script>
	</body>
</html>

运行结果：

点击之前
点击之后

在这里插入图片描述

三、网络应用

1.axios ：

功能强大的网络请求库

1）引入：

<script src="https://unpkg.com/axios/dist/axios.min.js"></script>

2）两种请求方式：

axios.get(地址?key=value&key2=values).then(function(response){},function(err){})
axios.post(地址,{key:value,key2:value2}).then(function(response){},function(err){})

3）基本使用：

	（1）axios必须先导，入才可以使用.
	
	（2）使用get或post方法即可发送对应的请求
	
	（3）then方法中的回调函数会在请求成功或失败时触发
	
	（4）通过回调函数的形参可以获取响应内容，或错误信息

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>axios的基本使用</title>
	</head>
	<body>
		<input type="button" value="get请求" class="get" />
		<input type="button" value="post请求" class="post" />

		<!-- 官网提供的 axios 在线地址 -->
		<script src="https://unpkg.com/axios/dist/axios.min.js"></script>

		<script type="text/javascript">
			/*
			    接口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)
					alert(response.data.jokes[0])
					alert(response.data.jokes[1])
					alert(response.data.jokes[2])
				}, 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:"czn"}).then(function(response){
					console.log(response.data);
					alert(response.data)
				},function(err){
					console.log(err)
				})
			}
		</script>
	</body>
</html>

运行结果：

点击之前
点击之后

2.axios+Vue：

（1）axios回调函数中的this已经改变无法访问到data中数据

（2）把this保存起来,回调函数中直接使用保存的this即可

（3）和本地应用的最大区别就是改变了数据来源

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>axios的基本使用</title>
	</head>
	<body>
		<div id="app">
			<input type="button" value="获取笑话" @click="getJoke(num)" />
			<input type="text" v-model="num"/>
			<p v-for="(item,index) in list">第{{index+1}}条笑话:{{item}}</p>
		</div>
		<!-- 官网提供的 axios 在线地址 -->
		<script src="https://unpkg.com/axios/dist/axios.min.js"></script>

		<!-- 开发环境版本，包含了有帮助的命令行警告 -->
		<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

		<script type="text/javascript">
			var vue = new Vue({
				el: "#app",
				data: {
					list:[],
					num:0
				},
				methods: {
					getJoke: function(num) {
						var that = this;
						axios.get("https://autumnfish.cn/api/joke/list?num="+num).then(function(response) {
							/* alert(response.data.jokes[0]) */
							that.list=response.data.jokes;
						}, function(err) {
							alert(err.data)
						})
					},
				}
			})
		</script>
	</body>
</html>

运行结果：

点击之前
点击之后

在这里插入图片描述

四、5个小案例

1.案例1——计数器

描述：初始数值为0，点击“+”号数值增大1，点击“-”号数值减小1，当数值等于10再增大时会弹出提示信息不能再增大了，当数值等于0时再减小会弹出提示信息不能再减小。

1）代码：

<!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>
  <!-- html结构 -->
  <div id="app">
    <!-- 计数器功能区域 -->
    <div class="input-num">
      <button v-on:click="sub">
        -
      </button>
	  
      <span>{{num}}</span>
	  
      <button @click="add" >
        +
      </button>
    </div>
    <img src="http://www.itheima.com/images/logo.png" alt="" />
  </div>
  <!-- 开发环境版本，包含了有帮助的命令行警告 -->
  <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
  <!-- 编码 -->
  <script type="text/javascript">
  	
	var vue = new Vue({
		el:"#app",
		data:{
			num:1
		},
		methods:{
			sub:function(){
				if(this.num>0){
					this.num--;
				}else{
					alert("不能再减了，已经是最小值了~")
				}
			},
			add:function(){
				if(this.num<10){
					this.num++;
				}else{
					alert("不能再加了，已经是最大值了~")
				}
			}
		}
	})
	
  </script>

</body>

</html>

2）运行结果：

初始状态

在这里插入图片描述

最小状态
最大状态

2.案例2——图片切换

描述：准备一系列的图片，点击“<”则图片向左翻页，点击“>”则图片向右翻页，如果目前是第一页，则“<”会隐藏，如果当前页是最后一页，则“>”会隐藏。

1）代码：

<!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.png" alt="">
					深圳创维校区环境
				</h2>
				<!-- 图片 -->
				<img :src="imgArr[index]" alt="图片" />
				<!-- 左箭头 -->
				<a href="javascript:void(0)" @click="prev" class="left" v-show="index!=0">
					<img src="./images/prev.png" alt="上一页"  />
				</a>
				<!-- 右箭头 -->
				<a href="javascript:void(0)" @click="next" class="right" v-if="index<imgArr.length-1">
					<img src="./images/next.png" alt="下一页"  />
				</a>
			</div>
		</div>
		<!-- 引入需要在最前面 -->
		<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
		<script>
			var vue = new Vue({
				el: "#mask",
				data: {
					imgArr: [
						"images/00.jpg",
						"images/01.jpg",
						"images/02.jpg",
						"images/03.jpg",
						"images/04.jpg",
						"images/05.jpg",
						"images/06.jpg",
						"images/07.jpg",
						"images/08.jpg",
						"images/09.jpg",
						"images/10.jpg",
					],
					index: 0
				},
				methods: {
					prev: function() {
						this.index--;
					},
					next: function() {
						this.index++;
					}
				}
			})
		</script>
	</body>

</html>

2）运行结果：

第一页

在这里插入图片描述

最后一页

3.案例3——小黑记事本

描述：在输入框中输入事件，按回车键，可以将事件添加到记事本中。每个事件的后面都有一个“×”，点击“×”就可以将该事件从记事本中删除，记事本的左下角显示当前所有事件的条数，右下角有“clear”按钮，单击可以删除所有的事件。

1）代码：

<html>
	<head>
		<meta http-equiv="content-type" content="text/html; charset=UTF-8" />
		<title>小黑记事本</title>
		<meta http-equiv="content-type" content="text/html; charset=UTF-8" />
		<meta name="robots" content="noindex, nofollow" />
		<meta name="googlebot" content="noindex, nofollow" />
		<meta name="viewport" content="width=device-width, initial-scale=1" />
		<link rel="stylesheet" type="text/css" href="./css/index.css" />
	</head>

	<body>
		<!-- 主体区域 -->
		<section id="todoapp">
			<!-- 输入框 -->
			<header class="header">
				<h1>小黑记事本</h1>
				<input autofocus="autofocus" v-model="text" @keyup.enter="add" 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="del(index)"></button>
						</div>
					</li>
				</ul>
			</section>
			<!-- 统计和清空 -->
			<footer class="footer" v-show="list.length!=0">
				<span class="todo-count" v-show="list.length!=0"> <strong>{{this.list.length}}</strong> items left </span>
				<button class="clear-completed" @click="clear" v-if="list.length!=0">
					Clear
				</button>
			</footer>
		</section>
		<!-- 底部 -->
		<footer class="info">
			<p>
				<a href="http://www.itheima.com/"><img src="./img/black.png" alt="" /></a>
			</p>
		</footer>
		<!-- 开发环境版本，包含了有帮助的命令行警告 -->
		<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
		<script type="text/javascript">
			var vue = new Vue({
				el: "#todoapp",
				data: {
					list: ["打游戏", "学习", "打篮球", "玩手机"],
					text: ""
				},
				methods: {
					add: function() {
						this.list.push(this.text);
						this.text = "";
					},
					del: function(index) {
						this.list.splice(index, 1);
					},
					clear: function() {
						this.list.splice(0, this.list.length);
					},
				}
			})
		</script>
	</body>
</html>

2）运行结果：

在这里插入图片描述

新增
删除一个事件
全部清空

4.案例4——天知道

描述：在输入框中输入要查询的地方的名字，按键盘的回车键或者鼠标点击“搜索”按钮，可以查询出该城市最近5天的天气情况。在输入框的下方有一些常用的大城市的名称，用户直接点击即可快速查询出该城市的天气预报。

1）html代码：

<!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/reset.css" />
		<link rel="stylesheet" href="css/index.css" />
	</head>

	<body>
		<div class="wrap" id="app">
			<div class="search_form">
				<div class="logo"><img src="img/logo.png" alt="logo" /></div>
				<div class="form_group">
					<input type="text" class="input_txt" placeholder="请输入查询的天气" v-model="city" @keyup.enter="searchWeather" />
					<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>
					<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>
		<!-- 官网提供的 axios 在线地址 -->
		<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
		<!-- 自己的js -->
		<script src="./js/main.js"></script>

	</body>
</html>

2）js代码：

/*
  请求地址:http://wthrcdn.etouch.cn/weather_mini
  请求方法:get
  请求参数:city(城市名)
  响应内容:天气信息

  1. 点击回车
  2. 查询数据
  3. 渲染数据
  */
var vue = 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(this.weatherList)
		},
		changeCity: function(city) {
			this.city = city;
			this.searchWeather();
		}
	}
})

3）运行结果：

查询之前

在这里插入图片描述

搜索查询
点击查询

5.案例5——悦听播放器

描述：一个简单的播放器，在输入框中输入信息可以查询出相关的歌曲，点击歌曲信息上左边的“▶”按钮即可播放歌曲，如果歌曲有相关的mv，点击歌曲右边的“▶”按钮可以播放歌曲的mv，在歌曲播放的时候中间的歌曲封面会跟着进行转动，界面的右边是歌曲的热门评论，主要内容有评论者的昵称、头像、评论的内容。

1) html代码：

<!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>悦听player</title>
		<!-- 样式 -->
		<link rel="stylesheet" href="./css/index.css">
	</head>

	<body>
		<div class="wrap">
			<!-- 播放器主体区域 -->
			<div class="play_wrap" id="player">
				<div class="search_bar">
					<img src="images/player_title.png" alt="" />
					<!-- 搜索歌曲 -->
					<input type="text" autocomplete="off" v-model="query" @keyup.enter="searchMusic()" />
				</div>
				<div class="center_con">
					<!-- 搜索歌曲列表 -->
					<div class='song_wrapper'>
						<ul class="song_list">
							<li v-for="item in musicList">
								<a href="javascript:;" @click="playMusic(item.id)"></a>
								<b>{{item.name}}</b>
								<span v-if="item.mvid!=0">
									<i @click="playMV(item.mvid)"></i>
								</span>
							</li>
						</ul>
						<img src="images/line.png" class="switch_btn" alt="">
					</div>
					<!-- 歌曲信息容器 -->
					<div class="player_con" :class="{playing:isPlaying}">
						<img src="images/player_bar.png" class="play_bar" />
						<!-- 黑胶碟片 -->
						<img src="images/disc.png" class="disc autoRotate" />
						<img :src="musicCover" class="cover autoRotate" />
					</div>
					<!-- 评论容器 -->
					<div class="comment_wrapper">
						<h5 class='title'>热门留言</h5>
						<div class='comment_list'>
							<dl v-for="item in hotComment">
								<dt><img :src="item.user.avatarUrl" alt=""></dt>
								<dd class="name">{{item.user.nickname}}</dd>
								<dd class="detail">
									{{item.content}}
								</dd>
							</dl>
						</div>
						<img src="images/line.png" class="right_line">
					</div>
				</div>
				<!-- 音乐播放状态栏 -->
				<div class="audio_con">
					<audio ref='audio' :src="musicUrl" controls autoplay loop class="myaudio" @play="continueMusic()" @pause="pauseMusic()"></audio>
				</div>
				<!-- MV播放状态栏 -->
				<div class="video_con" style="display: none;" v-show="isShow">
					<video controls="controls" :src="MVUrl"></video>
					<div class="mask" @click="close()"></div>
				</div>

			</div>
		</div>
		<!-- 开发环境版本，包含了有帮助的命令行警告 -->
		<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 src="./js/main.js" type="text/javascript" charset="utf-8"></script>
	</body>

</html>

2）js代码：

/**
	1:歌曲搜索接口
    请求地址:https://autumnfish.cn/search
    请求方法:get
    请求参数:keywords(查询关键字)
    响应内容:歌曲搜索结果
	
	2:歌曲url获取接口
	    请求地址:https://autumnfish.cn/song/url
	    请求方法:get
	    请求参数:id(歌曲id)
	    响应内容:歌曲url地址
		
	3.歌曲详情获取
		请求地址:https://autumnfish.cn/song/detail
		请求方法:get
		请求参数:ids(歌曲id)
		响应内容:歌曲详情(包括封面信息)
		
	4.热门评论获取
	    请求地址:https://autumnfish.cn/comment/hot?type=0
	    请求方法:get
	    请求参数:id(歌曲id,地址中的type固定为0)
	    响应内容:歌曲的热门评论
		
	5.mv地址获取
	    请求地址:https://autumnfish.cn/mv/url
	    请求方法:get
	    请求参数:id(mvid,为0表示没有mv)
	    响应内容:mv的地址
 */
var vue = new Vue({
	el: "#player",
	data: {
		// 搜索框的关键字
		query: "",
		// 搜索到的所有歌曲
		musicList: [],
		// 歌曲地址
		musicUrl: "",
		// 歌曲封面
		musicCover: "",
		// 热门评论
		hotComment: [],
		// 播放状态
		isPlaying: false,
		// 遮罩层
		isShow: false,
		// MV地址
		MVUrl: ""
	},
	methods: {
		// 搜索音乐
		searchMusic: function() {
			var that = this;
			axios.get("https://autumnfish.cn/search?keywords=" + this.query)
				.then(function(response) {
					/* console.log(response) */
					that.musicList = response.data.result.songs;
				}, function(err) {});
			/* console.log(this.musicList) */
		},
		// 播放音乐
		playMusic: function(id) {
			this.id = id;
			/* console.log(id) */
			var that = this;

			/* 获取音乐地址 */
			axios.get("https://autumnfish.cn/song/url?id=" + this.id)
				.then(function(response) {
					/* console.log(response.data.data[0].url) */
					that.musicUrl = response.data.data[0].url;
				}, function(err) {});

			/* 获取歌曲封面 */
			axios.get("https://autumnfish.cn/song/detail?ids=" + this.id)
				.then(function(response) {
					that.musicCover = response.data.songs[0].al.picUrl
				}, function(err) {})

			/* 获取歌曲评论 */
			axios.get("https://autumnfish.cn/comment/hot?type=0&id=" + this.id)
				.then(function(response) {
					/* console.log(response); */
					that.hotComment = response.data.hotComments;
				}, function(err) {})
		},

		// 继续播放音乐
		continueMusic: function() {
			/* console.log("play"); */
			this.isPlaying = true;
		},

		// 暂停播放音乐
		pauseMusic: function() {
			/* console.log("pause"); */
			this.isPlaying = false;
		},

		// 播放MV
		playMV: function(mvid) {
			var that = this;
			axios.get("https://autumnfish.cn/mv/url?id=" + mvid)
				.then(function(response) {
					/* console.log(response) */
					that.MVUrl = response.data.data.url;
					that.isShow = true;
				}, function(err) {})
		}, 
		// 关闭遮罩层
		close: function() {
			this.isShow = false;
			this.MVUrl="";
		}
	}
})

3）运行结果：

初始界面
搜索结果
歌曲播放界面

在这里插入图片描述

mv播放界面

注：所有源码在这
百度网盘提取码：lpj2

BeyondCZN.

关注

77
点赞
踩
345

收藏

觉得还不错? 一键收藏
18
评论
VUE入门+5个小案例

本文是我心血来潮学习Vue框架所做的笔记，也供童鞋们学习参考。作为后端的开发人员，学习前端的Vue框架只是单纯地去了解下前端框架的内容，所以并没有深入地去学习，因此本文只适合Vue入门的童鞋哦。由于我的能力有限，所写的内容可能有错误，小伙伴们可以在评论区中进行讨论。这篇笔记是根据哔哩哔哩大学中黑马程序员up主的视频内容进行记录的。视频地址：前端基础必会教程-4个小时带你快速入门vue，欢迎童鞋们去三连哦。一、Vue基础1.第一个Vue程序步骤：引入vue开发环境 <script sr.
复制链接

扫一扫