Vue基础

yanZhouHui
821 阅读5分钟

data数据对象

  • vue中用到的数据定义在data中
  • data中可以写复杂的数据类型
  • 渲染复杂数据类型，遵循JS语法即可
 <!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>
		<div id=app>
			{{message}}
			<h1 >{{school}}</h1>
			<h2>{{school.name}}</h2>
			
			<ul>
				<li>{{info[0]}}</li>
				<li>{{info[1]}}</li>
				<li>{{info[2]}}</li>
				<li>{{info[3]}}</li>
			</ul>
	
		</div>
		
		
<!-- 开发环境版本，包含了有帮助的命令行警告 -->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script type="text/javascript">
	var app = new Vue({
  el: '#app',
  data: {
    message: 'Hello Vue!',
    school:{
			name:"哈尔滨商业大学",
			age:"68"
			},
    info:["小晏","小慧","慧慧","晏周慧"]
  }
})
	
</script>
	</body>
</html>

本地应用

内容绑定，事件绑定

v-text

  • v-text指令的作用是：设置标签的内容
  • 默认写法会替换全部内容，使用差值表达式{{}}可以替换指定内容
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>vue练习</title>
	</head>
	<body>
		<div id="app">
  <h1 v-text="message+'!'"></h1>
  <h1>{{info+'!'}}</h1>
  <h1>北京{{info+"!"}}</h1>
</div>
		
<!-- 开发环境版本，包含了有帮助的命令行警告 -->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script type="text/javascript">
	var app=new Vue({
		el:"#app",
		data:{
			message:"v-text内部标签使用练习",
			info:"这是一条信息"
		}
		
		
	})
</script>
	</body>
</html>

v-html

  • v-html指令的作用是：设置元素的innerHTML
  • 内容中有Html结构会被解析成标签
  • v-text指令无论内容是什么，只会解析成文本
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>vue练习</title>
	</head>
	<body>
	
		<div id="app">
			<h1 v-html="context"></h1>
			<h1 v-text="context"></h1>
		</div>
<!-- 开发环境版本，包含了有帮助的命令行警告 -->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script type="text/javascript">
var app=new Vue({
	el:"#app",
	data:{
		//context:"百度一下，你不知道"
		context:"<a href='http://www.baidu.com'>百度一下，你不知道</a>"
		
	}
})
</script>
	</body>
</html>

v-on基础

  • v-on指令的作用是：为元素绑定事件
  • 事件名不写on
  • 指令可以简写为@
  • 绑定的方法定义在methods属性中
  • 方法内部通过this关键字可以访问定义在data中的数据
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>vue练习</title>
	</head>
	<body>
		<div id="app">
  <button type="button" value="v-on指令" v-on:click="doIt"> v-on指令</button>
    <button type="button" value="v-on指令" @click="doIt"> v-on指令</button>
     <h1  @click="changeData">{{message}}</h1>

</div>
		
<!-- 开发环境版本，包含了有帮助的命令行警告 -->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script type="text/javascript">
	var app=new Vue({
		el:"#app",
		
		data:{
			message:"西红柿炒蛋"
		},
		methods:{
			doIt:function(){
				alert("做it");
			},
			changeData:function(){
				//console.log(this.message);
				this.message+="好好吃！";
			}
		},
		
		
	})
</script>
	</body>
</html>

**案例练习---计时器**

  • 创建Vue示例时，el(挂载点)，data(数据)，methods(方法)
  • v-on指令的作用是挂事件，简写为@
  • 方法中通过this关键字来获取data中的数据
  • v-text指令的作用是设置元素的文本值，简写为{{}}
  • v-html指令的作用是：设置元素的innerHTML
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>vue练习</title>
	</head>
	<body>
		<div id="app">
  <button v-on:click="sub">-</button>
  <span>
  	
  	{{num}}
  </span>
  <button v-on:click="add">+</button>

</div>
		
<!-- 开发环境版本，包含了有帮助的命令行警告 -->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script type="text/javascript">
	var app=new Vue({
		el:"#app",
		data:{
			num:1
		},
		methods:{
			add:function(){
				if(this.num<10){
					this.num++
				}else{
					alert("别点啦，最大啦！")
				}
				
			},
			sub:function(){
				if(this.num>1){
					this.num--
				}else{
					alert("别点啦，到底啦！")
				}
				
			}
		}
	})
</script>
	</body>
</html>

显示切换，属性绑定

v-show

  • v-show指令的作用是：根据表达值的真假，切换元素的显示和隐藏
  • 原理是修改元素的diaplay,实现显示隐藏
  • 指令后面的内容最终都会解析成布尔值
  • 值为TRUE元素显示，值为false元素隐藏
  • 数据改变之后，对应元素的显示状态会同步更新
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>vue练习</title>
	</head>
	<body>
<div id="app">
<!--<button @click="changeAge">点击显示图片</button>-->
<button @click="changeIsShow">点击显示图片</button>
<!--<img v-show="age>=18" src="img/apple.png"/ aalt="">-->
<img v-show="isShow" src="img/apple.png"/ alt="">

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

  • v-if指令的作用是：根据表达值的真假，切换元素的显示状态
  • 本质是通过操纵dom元素来切换显示状态
  • 表达式的值为true，元素存在在dom树中，为false，从dom树中移除
  • 频繁的切换使用v-show,反之使用v-if，前者切换消耗小
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>vue练习</title>
	</head>
	<body>
<div id="app">
<p v-if="isShow">v-if练习</p>
<button @click="changeIsShow">点击切换显示状态</button>
<p v-if="temperature>=20">v-if练习</p>
 
</div>
		
<!-- 开发环境版本，包含了有帮助的命令行警告 -->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script type="text/javascript">
	var app=new Vue({
		el:"#app",
		data:{
			isShow:false,
			temperature:10
		},
		methods:{
			changeIsShow:function(){
				this.isShow=!this.isShow;
			},
			changeAge:function(){
	this.age++;
}
		}
		
	})
</script>
	</body>
</html>

v-bind

  • v-bind的作用是为元素绑定属性
  • 完整的写法是：v-bind:属性名
  • 简写可以省略v-bind,只保留属性名
  • 需要动态的增删class，建议使用对象的方式
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>vue练习</title>
		<style type="text/css">
			.active{
				border: 1px solid red;
			}
		</style>
	</head>
	<body>
<div id="app">
<img v-bind:src="imgSrc"  />
<img v-bind:src="imgSrc" v-bind:title="imgTitle" />
<img v-bind:src="imgSrc" v-bind:title="imgTitle" v-bind:class="isActive?'active':''" 
	@click="changeIsActive"/>
<img v-bind:src="imgSrc" v-bind:title="imgTitle" v-bind:class="{active:isActive}" 
	@click="changeIsActive"/>
</div>
		
<!-- 开发环境版本，包含了有帮助的命令行警告 -->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script type="text/javascript">
	var app=new Vue({
		el:"#app",
		data:{
			imgSrc:"img/apple.png",
			imgTitle:"这是一张图片的提示文字",
			isActive:false,
		},
		methods:{
			changeIsActive:function(){
				this.isActive=!this.isActive;
			},
	
		}
		
	})
</script>
	</body>
</html>

**案例练习---图片切换**

  • 列表数据使用数组保存
  • v-bind指令可以设置元素的属性，如src
  • v-show\v-if都可以切换元素的显示状态，频繁切换使用v-show
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>vue练习</title>
	</head>
	<body>
<div id="app">
<!--图片-->
<img v-bind:src="imgArr[index]" />
<div>
	<!--左箭头-->
<a  @click="prev">
<button v-show="index!=0"> < </button>
</a>
<!--右箭头-->
<a @click="next"><button  v-show="index<imgArr.length-1"> > </button></a>
</div>


 
</div>
		
<!-- 开发环境版本，包含了有帮助的命令行警告 -->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script type="text/javascript">
	var app=new Vue({
		el:"#app",
		data:{
			imgArr:[
			"img/图片切换01.png",
			"img/图片切换02.png",
			"img/图片切换03.png",
			"img/图片切换04.png",
			"img/图片切换05.png",
			"img/图片切换06.png",
			"img/图片切换07.png",
			"img/图片切换08.png",
			"img/图片切换09.png",
			"img/图片切换10.png",
			],
			index:0,
		},
		methods:{
			prev:function(){
				this.index-=1;
			},
			next:function(){
				this.index+=1;
			},

		}
		
	})
</script>
	</body>
</html>

列表循环，表单元素绑定

v-for

  • v-for指令的作用是根据数据生成列表结构
  • 数组经常和v-for结合使用
  • 语法结构：(item,index) in 数据
  • item和index可以结合其他指令一起使用
  • 数组长度的更新会同步到页面上，是响应式的
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>vue练习</title>
	</head>
	<body>
<div id="app">
<ul>
	<li v-for="item in arr">
		喜欢的地方：
	</li>
</ul>

<ul>
	<li v-for="(it,index) in arr">
		{{index+1}}喜欢的地方：{{it}}
	</li>
</ul>

<button @click="addOrder">添加菜品</button>
<button @click="removeOrder">移除菜品</button>
 <h2 v-for="food in order">{{food.name}}</h2>
</div>
		
<!-- 开发环境版本，包含了有帮助的命令行警告 -->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script type="text/javascript">
	var app=new Vue({
		el:"#app",
		data:{
			arr:["北京","上海","杭州","四川"],
			order:[
			{name:"西红柿炒蛋"},
			{name:"蛋炒西红柿"}
			]
		},
		methods:{
			addOrder:function(){
				this.order.push({name:"青椒土豆丝"})
			},
removeOrder:function(){
				this.order.shift()
			},
		}
		
	})
</script>
	</body>
</html>

v-on补充

  • 事件绑定的方法写成函数调用的形式，可以传入自定义参数
  • 定义方法时需要定义形参来接收传入的参数
  • 事件的后面跟上.修饰符可以对事件进行限制
  • .enter事件可以限制触发的按键为回车
  • 事件修饰符号有多种，可参考文档：cn.vuejs.org/v2/api/#v-o…
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>vue练习</title>
	</head>
	<body>
		<div id="app">
  <button type="button" value="v-on指令" v-on:click="doIt"> v-on指令</button>
    <button type="button" value="v-on指令" @click="doIt('你好','吃了没？')"> v-on指令</button>
    	<input type="text" @keyup.enter="sayHi" />
</div>
		
<!-- 开发环境版本，包含了有帮助的命令行警告 -->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script type="text/javascript">
	var app=new Vue({
		el:"#app",
		
		data:{
			message:"西红柿炒蛋"
		},
		methods:{
			doIt:function(p1,p2){
				alert("做it");
				console.log(p1);
				console.log(p2)
			},
			sayHi:function(){
				alert("吃了么？")
			}
		},
		
		
	})
</script>
	</body>
</html>

v-model

  • v-model指令的作用是便捷的设置和获取表单元素的值
  • 绑定的数据会和表单元素值相关联
  • 绑定的数据和表单元素的值任何一个改变，另一个都会改变，这种变化是双向的
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>vue练习</title>
	</head>
	<body>
		<div id="app">
			<input type="text" v-model="message" @keyup.enter="getMessage"/>
  <button type="button" value="v-model指令" v-on:click="setMessage"> v-model指令</button>
    <button type="button" value="v-modle指令" v-model="message" @click="getMessage"> v-model指令</button>
    	<h2>{{message}}</h2>
</div>
		
<!-- 开发环境版本，包含了有帮助的命令行警告 -->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script type="text/javascript">
	var app=new Vue({
		el:"#app",
		
		data:{
			message:"至少还有你"
		},
		methods:{
			setMessage:function(){
				this.message="月半小夜曲"
			},
			getMessage:function(){
				alert(this.message)
			}
		},
		
		
	})
</script>
	</body>
</html>

练习案列-记事本

  • 功能分析
    • 新增
      • 生成列表结构 v-for(数组)
      • 获取用户输入内容 v-model
      • 按下回车键，数组中新增一条数据 v-on.enter(添加数据)
    • 删除
      • 点击删除指定内容 (v-on splice 索引)
      • 如果数据改变，那么和数据绑定的元素会同步改变
      • 事件可以接收自定义参数
      • splice(param1,param2)
        • param1:数组索引（可变）
        • param2：每次删除几个
    • 统计
      • 统计任务的个数(v-text length)
      • 基于数据的开发方式
    • 清空
      • 点击清除所有信息(v-on.click 清空数组)
    • 隐藏
      • 没有数据时，隐藏清空按钮和统计文本（v-show/v-if 数组非空）
      • 可以设置在父元素上，也可在子元素上
   <!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>vue练习</title>
	</head>
	<body>
<section id="app">
<heade class="header">
	<h1>记事本</h1>
	<input v-model="inputValue" @keyup.enter="add" type="text" autocomplete="off" placeholder="请输入任务" class="new-todo"/>
</header>
<section class="main">
	<ul class="to-do-list">
	<li class=todo v-for="(it,index) in list">
		<div class="view">
			<span class="index">{{index+1}}</span>
			<label class="context">{{it}}</label>
			<button class="destory" @click="remove(index)" >×</button>
		</div>
	</li>
</ul>
</section>
<footer class="footer">
	<span v-if="list.length!=0">
		<strong>{{list.length}}</strong>
		"items"
	</span>
	<button @click="clear" v-show="list.length!=0">clear</button>
</footer>



</section>
		
<!-- 开发环境版本，包含了有帮助的命令行警告 -->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script type="text/javascript">
	var app=new Vue({
		el:"#app",
		data:{
			list:["吃饭饭","睡觉觉","写代码"],
			inputValue:"好好学习，天天向上",
			order:[
			{name:"西红柿炒蛋"},
			{name:"蛋炒西红柿"}
			]
		},
		methods:{
			add:function(){
				this.list.push(this.inputValue);
			},
			remove:function(index){
				this.list.splice(index,1);
			},
			clear:function(){
				this.list=[];
			}
			},
	})
</script>
	</body>
</html>

网络应用

Vue结合网络数据开发应用

axios网络请求库的使用

  • axios官网：https://github.com/axios/axios
  • axios必须先导入才可以使用
<!--官网提供的axios的在线地址-->
		<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
  • 使用get或post方法即可发送对应的请求
  • then方法中的回调函数会在相应成功或失败的时候触发
  • 通过回调函数的形参可以获取相应内容或错误信息
<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>
		<input value="get请求" class="get" type="button"></input>
		<input value="post请求" class="post" type="button"></input>
		<!--官网提供的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);
			},function (err){
				console.log(err);
			})
		}
		
		
		/**
		 * 接口1:用户注册
		 * 请求地址：https://autumnfish.cn/api/user/reg
		 * 请求方法：post
		 * 请求参数：username(用户名，字符串)
		 * 响应内容：注册成功或失败
		 */
		document.querySelector(".post").onclick=function(){
			axios.post("https://autumnfish.cn/api/user/reg",
			{username:"麻婆豆腐2"})
			.then(function(response){
				console.log(response);
			},function(err){
				console.log(err);
			}
			
			)
		}
		
	</script>
	
	</body>
</html>

axios和vue结合使用

  • vue和axios包导入的顺序随意
  • axios回调函数中的this已经改变，无法访问到data中的数据
  • 把this保存起来，回调函数中直接使用保存起来的this即可
<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>
		<div id="app">
			<input value="get请求随机获取一条笑话" class="get" type="button" @click="getJoke">
			<p>{{joke}}</p>	
			</input>
		</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">
		/*
			  接口1:随机笑话
		  	请求地址：https://autumnfish.cn/api/joke
		 	 请求方法：get
		  	请求参数：无
		 	 响应内容：随机笑话
		 */
		
	
		var app=new Vue({
		el:"#app",
		data:{
			joke:"很好笑的笑话"
		},
		methods:{
			getJoke:function(){
				var that=this;
				axios.get("https://autumnfish.cn/api/joke")
				.then(function(response){
					that.joke=response.data;
				},function(err){
					
				}
				)
			}
		}
		})
		
	
	</script>
	
	</body>
</html>

vue结合网络数据的应用

天气预报案列

  • 功能分析
    • 回车查询
      • 按下回车键 （v-on.enter）
      • 查询数据（axios接口，v-model）
      • 渲染数据 （v-for 数组 that）
    • 点击查询
      • 点击城市
      • 查询数据
      • 渲染数据
    • 总结
      • 自定义参数可以让代码的复用性更高
      • methods中定义的方法内部，可以通过this关键字点出其他方法
    <!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>
		<div id="app">
			<div id="logo">
				<h1><mark>天气预报</mark></h1>
			</div>
			<div id="select">
					<input v-model="city" type="text" name="citys" id="cityName" placeholder="请输入城市"  @keydown.enter="getData" />
					<button  value="搜索" @click.enter="getData">搜索</button>
				
			</div>
			
			<div id="defaultCities">
				<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 id="display">
				<ul>
					<li v-for="item in list">
						<div><b>{{item.type}}</b></div>
						<div >
							<b>{{item.low}}</b>
							<b>{{item.high}}</b>
						</div>
						<div>
							{{item.date}}
						</div>
						
					</li>
				</ul>
			</div>
		</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">
		/*
			  接口1:，天气接口
		  	请求地址：http://wthrcdn.etouch.cn/weather_mini
		 	 请求方法：get
		  	请求参数：city(查询的城市名称)
		 	 响应内容：天气信息
		 */
		
		
		var app=new Vue({
		el:"#app",
		data:{
			city:"",
			list:[]
		},
		methods:{
			getData:function(){
				var that=this;
				axios.get('http://wthrcdn.etouch.cn/weather_mini?city='+this.city)
				.then(function(response){
					console.log(response.data.data);
					that.list=response.data.data.forecast
				},function(err){
					
				}
				)
			},
			changeCity:function(city){
				this.city=city;
				this.getData();
			}
		}
		})
	
	</script>
	
	</body>
</html>

练习-综合应用-音乐播放器

  • 功能分析

    • 歌曲搜索

    • 歌曲播放

    • 歌曲封面

    • 歌曲评论

    • 播放动画

    • mv播放

avatar
文章
阅读
粉丝