VUE入门+5个小案例_黄山市民网

本文是我心血来潮学习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

本文地址：https://blog.csdn.net/Beyondczn/article/details/113945908

黄山市民网：https://www.huangshanshimin.com/

一、Vue基础

1.第一个Vue程序

2.el挂载点

3.data数据对象：

二、本地应用

1.v-text指令：

2.v-html指令：

3.v-on指令：

4.v-show指令：

5.v-if指令：

6.v-bind指令：

7.v-for指令：

8.v-on指令补充：

9.v-model指令：

三、网络应用

1.axios ：

1）引入：

2）两种请求方式：

3）基本使用：

2.axios+Vue：

四、5个小案例

1.案例1——计数器

1）代码：

2）运行结果：

2.案例2——图片切换

1）代码：

2）运行结果：

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

1）代码：

2）运行结果：

4.案例4——天知道

1）html代码：

2）js代码：

3）运行结果：

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

1) html代码：

2）js代码：

3）运行结果：

相关文章