vue基础篇 02 本地应用

最新推荐文章于 2022-06-13 13:50:20 发布

LeyoBiang

最新推荐文章于 2022-06-13 13:50:20 发布

阅读量111

点赞数

分类专栏：前端 vue 文章标签： vue html js javascript css

本文链接：https://blog.csdn.net/qilie_32/article/details/114335953

版权

前端同时被 2 个专栏收录

32 篇文章 0 订阅

订阅专栏

vue

12 篇文章 0 订阅

订阅专栏

02 本地应用

通过Vue实现常见的网页效果
学习Vue指令，以案例巩固知识点
Vue指令指的是，以**v-**开头的一组特殊语法

v-text

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

v-html

v-html指令的作用是：设置元素的innerHTML
内容中由html结构会被解析为标签
v-text指令无论内容是什么，只会解析为文本

v-on

v-on指令的作用是：为元素绑定事件
事件名不需要写on
指令可以简写为**@**
绑定的方法定义在methods属性中

v-text、v-html、v-on实战演练

计数器

代码

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>计数器</title>
		<style type="text/css">
			#app{
				width: 200px;
				height: 50px;
				border-radius: 10px;
				box-shadow: 5px 5px 10px -4px rgba(0,0,0,.3); ;
				overflow: hidden;
			}
			#app button{
				float: left;
				height: 50px;
				width: 66.5px;
				font-size: 30px;
				color: white;
				background-color: gray;
				border-width: 0px;
			}
			#app div{
				float: left;
				height: 50px;
				width: 67px;
				font-size: 30px;
				line-height: 50px;
				text-align: center;
			}
		</style>
	</head>
	<body>
		<div id="app">
			<button type="button" @click="sub">-</button>
			<div v-text="num"></div>
			<button type="button" @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>0){
							this.num--;
						}else{
							alert("已经到底了");
						}
					}
				}
			})
		</script>
	</body>
</html>

效果

在这里插入图片描述

v-show

v-show指令的作用是：根据真假切换元素的显示状态
原理是修改元素的display，实现显示隐藏
指令后面的内容，最终都会解析为布尔值
值为true元素显示，值为false元素隐藏

v-if

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

v-bind

v-bind指令的作用是：为元素绑定属性
完整写法是v-bind：属性名
简写的话可以直接忽略v-bind，只保留**：属性名**
需要动态的增删class建议使用对象的方式

v-show、v-if、v-bind实战演练

图片切换

代码

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>图片切换</title>
	</head>
	<body>
		<div id="app">
			<a href="#" @click="prev()" v-show="index>0">上一张</a>
			<img :src="imgSrcs[index]">
			<a href="#" @click="next()" v-show="index<imgSrcs.length">下一张</a>
		</div>
		<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
		<script type="text/javascript">
			var app=new Vue({
				el:'#app',
				data:{
					imgSrcs:['1.jpg','2.jpg','3.jpg'],
					index:0
				},
				methods:{
					prev:function(){
						if(this.index>0){
							this.index--;
						}
					},
					next:function(){
						if(this.index<this.imgSrcs.length){
							this.index++;
						}
					}
				}
			})
		</script>
	</body>
</html>

v-for

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

v-on补充

事件绑定的方法写成函数调用的形式，可以传入自定义参数
定义方法是需要定义形参来接收传入的实参
事件的后面跟上.修饰符可以对事件进行限制
.enter可以限制触发的按键为回车
事件修饰符有很多种，参考https://cn.vuejs.org/v2/api/#v-on

v-model

v-model指令的作用是便捷的设置和获取表单元素的值
绑定的数据回合表单元素值相关联
绑定的数据<–>表单元素的值

v-for、v-on、v-model实战演练

记事本

代码

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>记事本</title>
		<style type="text/css">
			*{
				margin: 0px;
				padding:0px;
			}
			li{
				list-style: none;
			}
			body{
				background-color: rgb(154, 157, 163);
			}
			a{
				color: black;
				text-decoration: none
			}
			a:hover {
			    color: gray;
			}
			.w{
				margin: 0 auto;
				width: 600px;
				background-color: white;
				text-align: center;
			}
			header{
				height: 60px;
				color: #808080;
				font-size: 50px;
				font-family: "楷体";
				text-shadow: 4px 4px 4px rgba(153, 154, 181, .3);
			}
			.main_content{
				
			}
			.main_content input{
				height: 40px;
				width: 278px;
				padding-left: 20px;
				font-size: 20px;
				text-align: left;
				color: rgb(152, 165, 148);
			}
			.main_content ul{
				display: inline-block;
				width: 300px;
				border: 1px solid rgb(123, 134, 120);
				z-index: 0;
				box-shadow: 10px 10px 10px -4px gray;
			}
			.main_content ul li{
				height: 40px;
				width: 300px;
				text-align: left;
				line-height: 40px;
				border-bottom: 1px solid rgb(123, 134, 120);
			}
			.main_content ul li span{
				float: left;
				padding:0px 10px;
			}
			.main_content ul li p{
				float: left;
				margin-left:20px;
			}
			.main_content ul li a{
				float: right;
				margin-right:20px;
			}
			.tip{
				display: inline-block;
				height: 20px;
				width: 300px;
			}
			.tip span{
				float: left;
			}
			.tip a{
				float: right;
			}
		</style>
	</head>
	<body>
		<div id="app">
			<header class="w">
				小黑记事本
			</header>
			<section class="w main_content">
				<input type="text" 
				v-model="inputEvent" 
				@focusin="inputPrepareFocus()" 
				@blur="inputPrepareBlur()"
				@keyup.enter="addEvent()"/><br>
				<ul>
					<li v-for="(item,index) in eventList" 
					@mouseover="changeMouseOverToIndex(index)"
					@mouseout="changeMouseOverToNull()">
						<span>{{index+1}}</span>
						<p>{{item}}</p>
						<a href="#" 
						v-show="index==mouseOver"
						@click="removeEvent(index)">X</a>
					</li>
				</ul><br>
				<div class="tip" v-show="eventList.length>0">
					<span>{{eventList.length}}条任务</span>
					<a href="#" @click="clearEvent()">清空</a>
				</div>
				
			</section>
			<footer class="w">
				由正在学习vue的<span @click="cheer">biang</span>完成
			</footer>
		</div>
		
		<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
		<script type="text/javascript">
			var app=new Vue({
				el:'#app',
				data:{
					eventList:['背单词','学js','学vue'],
					inputEvent:'请输入任务',
					mouseOver:-1
				},
				methods:{
					inputPrepareFocus:function(){
						if(this.inputEvent=='请输入任务'){
							this.inputEvent='';
						}
					},
					inputPrepareBlur:function(){
						if(this.inputEvent==''){
							this.inputEvent='请输入任务';
						}
					},
					addEvent:function(){
						if(this.inputEvent!=''){
							this.eventList.push(this.inputEvent);
						}
					},
					clearEvent:function(){
						this.eventList=[];
					},
					changeMouseOverToIndex:function(index){
						this.mouseOver=index;
					},
					changeMouseOverToNull:function(){
						this.mouseOver=-1;
					},
					removeEvent:function(index){
						this.eventList.splice(index,1);
					},
					cheer:function(){
						alert('棒棒哒！');
					}
				}
			})
		</script>
	</body>
</html>