VUE-2.X学习笔记day5

最新推荐文章于 2023-06-07 01:47:35 发布

Rain武煜

最新推荐文章于 2023-06-07 01:47:35 发布

阅读量108

点赞数

分类专栏：框架文章标签： vue

本文链接：https://blog.csdn.net/qq_35885175/article/details/116158411

版权

框架专栏收录该内容

12 篇文章 0 订阅

订阅专栏

1.过渡&动画

1.vue动画的理解

操作css的trasition 或者 appimation
vue会给元素添加/移除特定的class
过渡的相关类名
1. xxx-enter-active:指定显示的transition
2. xxx-leave-active:指定隐藏的transiton
3. xxx-enter/xxx-leave-io:指定隐藏时的样式

2.理解图

在这里插入图片描述

3.代碼

html

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			/**
			 * 指定显示/隐藏的过渡效果
			 * */
			.hello-enter-active, .hello-leave-active{
				transition: opacity 1s;
			}
			/**
			 * 指定隐藏时的样式
			 */
			.hello-enter, .hello-leave-to{
				opacity: 0;
			}
			/**
			 * //显示的过渡效果
			 * */
			.move-enter-active{
				transition: all 1s; 
			}
			/**
			 * 消失的过度效果
			 * */
			.move-leave-active{
				transition: all 3s;
			}
			/**
			 * //隐藏时的过渡效果
			 * */
			.move-enter , .move-leave-to{
				opacity: 0;
				transform: translateX(20px);
			}
		</style>
	</head>
	<body>
		<div id="app">
			<button @click="isShow=!isShow">toggle1</button>
			<transition name="hello">
				<p v-show="isShow">hello</p>
			</transition>
		</div>
		<div id="app2">
			<button @click="isShow2=!isShow2">toggle2</button>
			<transition name="move">
				<p v-show="isShow2">hello2</p>
			</transition>
		</div>
	</body>
	<script src="/vueDemo/vue/vue.js"></script>
	<script src="demo1.js"></script>
</html>

const vm = new Vue({
 	el: "#app",
 	data : {
 		isShow: true,
 	}
 })
 
const vm2 = new Vue({
 	el: "#app2",
 	data : {
 		isShow2: true,
 	}
 })

前端

2.过滤器

Demo过滤时间

html

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<div id="app">
			<h2>显示格式化的时间</h2>
			<p>{{date}}</p>
			<p>完整版:{{date | dateString}} </p>
			<p>年月日:{{date | dateString("YYYY-MM-DD")}} </p>
			<p>时分秒:{{date | dateString("HH:mm:ss")}} </p>
		</div>
	</body>
	<script src="../../../vue/vue.js"></script>
	<script src="../../../common/moment.js"></script>
	<script src="demo2.js"></script>
</html>

//自定义过滤器
// Vue.filter("dateString",function(value,format){
// 	return moment(value).format(format || "YYYY-MM-DD HH:mm:ss");
// });

Vue.filter("dateString",function(value,format="YYYY-MM-DD HH:mm:ss"){
	return moment(value).format(format);
});

const vm=new Vue({
	el:"#app",
	data:{
		date:new Date(),
	},
	mounted() {
		setInterval(()=>{
			this.date=new Date();
		},1000)
	}
});

展示效果

2.指令

指令属性在解析之前是存在的,在解析之后消失

常用内置指令

v:text:更新元素的 textConteng
v-html:更新元素的innerHTML
v-if:如果为true,当前标签才会输出到页面上
v-else:如果v-if的值为false.当前标签才会输出到页面上
v-show:通过display样式来控制显示/隐藏
v-for:用来遍历数组或者对象
v-on:绑定时间监听简写@
v-bing: 绑定,或者直接使用冒号
v-model:数据绑定
ref:指定唯一标识,vue对象通过$els属性访问这个对象
v-cloak:防止闪现,与css配合:[v-cloak]{display:none}

代码

const vm = new Vue({
	el: "#app",
	data:{
		msg:"Rain",
	},
	methods:{
		alter(){
			alert(this.$refs.PR.textContent);
		}
	}
})

html

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			/**
			 * 
			 [v-cloak]属性选择器
			 */
			[v-cloak]{
				display: none;
			}
		</style>
	</head>
	<body>
		<div id="app">
			<p ref="PR">Rain</p>
			<button @click="alter">提示</button>
			<p v-text="msg"></p>
			<p v-cloak>{{msg}}</p>
		</div>
	</body>
	<script src="../../../vue/vue.js"></script>
	<script src="demo3.js"></script>
</html>

自定义指令

全局指令

Vue.directive('my-directive',.function(el,binding){
		el.innerHTML =binding.value.toupperCase();
	})

局部指令

directive:{
		'my-directive':{
			bind(el,binding){
				el.innerHtml =binding.value.toupperCase(); 
			}
		}	
	}

3.使用指令

 v-my-directive=''

代码

html代码

	<div id="app1">
			<p v-upper-text="msg1"></p>
			<p v-lower-text="msg1"></p>
		</div>
		<div id="app2">
			<p v-upper-text="msg2"></p>
			<p v-lower-text="msg2"></p>
		</div>

js代码

//定义全局指令
//el 指令所在标签对象
//binding 包含指令相关信息数据的对象
Vue.directive('upper-text',function(el,binding){
	el.textContent=binding.value.toUpperCase();
})

new Vue({
	el:"#app1",
	data:{
		msg1:"aaBBccDDeeFFggHH"
	},
	directives:{//注册局部指令,只在当前示例中可用
		'lower-text'(el,binding){
			el.textContent=binding.value.toLowerCase();
		}
	}
})

new Vue({
	el:"#app2",
	data:{
		msg2:"I Love Rain By Study"
	}
})