2021-07-23大连东软实训第四天---vue

最新推荐文章于 2024-09-27 13:47:16 发布

汤姆z

最新推荐文章于 2024-09-27 13:47:16 发布

阅读量228

点赞数

分类专栏：知识点文章标签：过滤器 vue java js javascript

本文链接：https://blog.csdn.net/nalidour/article/details/119023112

版权

知识点专栏收录该内容

26 篇文章 1 订阅

订阅专栏

数据库一个表对应一个类，表由子段组成，类由属性组成，互相对应，查表就是查一组对象，一个的对象数组，在vue迭代中最多的就是对象数组，
button默认的type是submit的，一提交就刷新页面，所以要想让他成为一个普通的按钮就type=button

全局过滤器＋调用

在这里插入图片描述
全局不能定义到vm实例上，必须定义到外部

注意第一个参数第二个参数的区别

局部过滤器＋调用

在这里插入图片描述

时间过滤器
在这里插入图片描述

在这里插入图片描述

过滤器加参数用pattern接受

在这里插入图片描述

在这里插入图片描述
让9变09用padStart，注意是大写

在这里插入图片描述

在这里插入图片描述
点击回车就添加，调用add事件，如果换成别的键比如f2就不好使，

在这里插入图片描述

如果用f2的话可以写113

在这里插入图片描述
记住太费劲，vue允许自定义键盘码

在这里插入图片描述
要焦点

自定义指令，全局和局部

在这里插入图片描述

自定义指令，此时el相当于
在这里插入图片描述
input

在这里插入图片描述

bind也行，但是全局不行，执行最早，当在元素上使用自定义指令时，就会被调用。此时，内存中的dom树，还没有被渲染到页面中，只执行一次以后，渲染以后不再执行，inserted当dom树被渲染到页面时执行，update只要更新就执行

如何给赋值？

在这里插入图片描述

如果有-就必须加‘’，上图是一个简写的形式，此时表示bind或update时该指令被执行。

在这里插入图片描述

生命周期

在这里插入图片描述

所以不能用data和method里面的东西

在这里插入图片描述

vue动画，三种方式

transform和transition过渡

在这里插入图片描述

动画分为两个阶段，入场和离场，四个状态

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>切换效果</title>
		<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
		<style type="text/css">
			.v-enter,.v-leave-to{
				opacity: 0;
				transform:translateX(200px) ;
			}
			.v-enter-active,
			.v-leave-active{
				transition: all 0.8s ease;
			}
			.my-enter,.my-leave-to{
				opacity: 0;
				transform:translateY(200px) ;
			}
			.my-enter-active,
			.my-leave-active{
				transition: all 0.8s ease;
			}
		</style>
	</head>
	<body>
		<div id="app">
			<button @click="flag=!flag">toggle</button>
			<transition name='my'>
				<h3 v-if="flag">{{msg}}</h3>
			</transition>	
		</div>
		<div id="app1">
			<button @click="flag=!flag">toggle</button>
			<transition>
				<h3 v-if="flag">{{msg}}</h3>
			</transition>	
		</div>
		<script type="text/javascript">
			let vm=new Vue({
				el:'#app',
				data:{
					msg:"被执行的动画效果",
					flag:false
				},
				methods:{
			}
			});
			let vm1=new Vue({
				el:'#app1',
				data:{
					msg:"被执行的动画效果",
					flag:false
				},
				methods:{
			}
			});
		</script>
	</body>
</html>

name属性就是前缀

使用第三方动画库 Animate.css

https://animate.style/

第三种方式用钩子函数

https://cn.vuejs.org/v2/guide/transitions.html#JavaScript-%E9%92%A9%E5%AD%90

在这里插入图片描述
前四个进，后四个出

在这里插入图片描述

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
		<style type="text/css">
			.ball{
				width: 20px;
				height: 20px;
				background-color: red;
				border-radius: 50%;
			}
		</style>
	</head>
	<body>
		<div id="app">
			<button @click="flag=!flag">加入购物车</button>
			<transition
				v-on:before-enter="beforeEnter"
				v-on:enter="enter"
				v-on:after-enter="afterEnter"
				>
				<div class="ball" v-if="flag"></div>
			</transition>
			
		</div>
		<script type="text/javascript">
			let vm=new Vue({
				el:'#app',
				data:{
					flag:false
				},
				methods:{
					//el表示要执行动画的元素
					beforeEnter(el){
						el.style.transform='translate(0,0)';
					},
					enter(el){
						el.offsetLeft;//不加的话直接跳转没有移动的过程，offset强制重新绘制页面
						el.style.transform='translate(100px,450px)';
						el.style.transition='all 0.8s ease';
						done();//立刻执行afterEnter
						
					},
					afterEnter(el){
						this.flag=!this.flag;
					}
			}
			});
		</script>
	</body>
</html>

在这里插入图片描述

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
		<style>
			li{
				border:2px dashed #aaa;
				height:50px;
				line-height:50px;
				width: 100%;
			}
			li:hover{
				background-color:#aa4765;
			}
			.v-enter,.v-leave-to{
				opacity: 0;
				transform:translateY(200px) ;
			}
			.v-enter-active,
			.v-leave-active{
				transition: all 0.6s ease;
			}
			.v-move{
				transition: all 0.8s ease;
			}
			.v-leave-active{
				position: absolute;
			}
		</style>
	</head>
	<body>
		<div id="app">
				id:<input v-model="Userid" />
				name:<input v-model="Username" />
				<button @click="add()">添加</button>
				<!--<ul>		tag属性修改transition-group编译后默认为span-->
					<!--为多个元素添加动画-->
					<transition-group appear tag="ul">
					<li v-for="(item,index) in Userlist" :key='item.Userid1' @click="del(index)" >
						{{item.Userid1}}---------------{{item.Username1}}
					</li>
					</transition-group>
				</ul>
		</div>
		<script type="text/javascript">
			let vm=new Vue({
				el:'#app',
				data:{
						Userid:'',
						Username:'',
						Userlist:[
							{
							Userid1:'1',
							Username1:'张飞'}
					]
				},
				methods:{
					add(){
						let user= {Userid1:this.Userid,Username1:this.Username};
						this.Userid=this.Userlist.push(user);
						this.Userid=this.Username='';
					},
					del(index){
						this.Userlist.splice(index,1);
					}
					
			}
			});
		</script>
	</body>
</html>