Vue组件与生命周期详解-优快云博客

本文链接：https://blog.youkuaiyun.com/qq_67693370/article/details/125746465

vue选项：

template=>模板
el:=>指定模板
data=>数据
methods=>方法
components=>注册可以使用的组件
computed=>计算
watch=>监听
filters=>过滤
directives=>自定义指令
mounted dom=> 挂载完毕

vue 组件

定义组件：

const steper={
template：

}

注册组件：

 new Vue({
				 components: {
				 	steper
				 },

使用组件：

//使用组件
<steper> </steper>

组件的传参

父元素向子元素传参数：props

//组件外
<steper num=10>
//组件内
props:["num"]
props:{
"num":{type:Number,default:1}

//传入的props只读的
this.num访问数据,不能修改数据⭐⭐⭐⭐

子元素向父元素传参数：事件 emit

//组件内
this.$emit（countchange  this.count）
//组件内部
<stepper @countchange="r=$event">

组件的插槽：

定义组件如何嵌套标签的内容

//组件外部
<modal>
<p>插槽内容1</p>
<p>插槽内容2</p>
</modal>

//组件内部
<div>
<slot></slot>
</div>

计算：computed

从现有的数据计算新的数据，多个数据对一个

computed:{
					undoList(){
						return this.list.filter(item => !item.done);
					},
					doneList(){
						return this.list.filter(item => item.done)
					},
					all:{
						set(val){
							this.list.forEach((item) => (item.done = val))
						}
					}
				},

自定义指令：directive

用来获取dom节点.执行第三方插件获取指令的值

focus:{
inserted(el,binding){
//el指令所在的节点
// binding.value 指令的值
}
}
//inserted插入到父节点执行
//update更新后执行
//bind只执行一次,绑定执行

节点引用

可以理解为vue中的id

//定义引用.
<div ref="container">

//使用引用
this.$refs.container
//当前的节点

命名插槽

父组件命名

//父组件命名
<price>
<span slot="pre">￥</span>
<span slot="next">元</span>

<price>
<template v-slot:pre>￥</template>
<template v-slot:next> 元</template>

<price>
<template #pre> ￥</template>
<template #next> 元</template>
 </price>

组件内部使用

//组件内部使用
<span>
<slot name="pre"> </slot>
{n}}
<slot name="next"> </slot>
使用</span>

vue 动画

特点：vue不直接创造动画,vue会在元素显示与隐藏的过程中添加
class类名,通过两个内置组件
开始的过程和离开过程三种动画方法：
第一种较复杂

/* 进入整个过程 */
		/* 离开的整个过程 */
			.fade-enter-active,
			.fade-leave-active
			{
				transition: all ease 2s;
			}
		/* 进入的起点 (从什么状态进入)*/
			.fade-enter{
				opacity: 0;
				transform: rotate(-180deg);
			}
		/* 进入的终点 (进入到什么状态)*/
			.fade-enter-to{
				opacity: 1;
				transform: rotate(0deg);
			}
			/* 离开的起点(从什么状态离开) */
			.fade-leave{
				opacity: 1;
			}
			/* 离开的终点(离开到什么状态)*/
			.fade-leave-to{
				opacity: 0;
			}
		</style>

/* opacity 透明度 transform变换 rotate旋转 scale 缩放 deg 角度 */
		/* 定义动画关键字 */
		 @keyframes fadeIn{
		 	from{ opacity: 0; transform: rotate(-90deg);}
		 	to{ opacity: 1;  transform: rotate(0deg);}
		 }
		 @keyframes fadeOut{
		 	0%{opacity: 1;  transform: rotate(0deg);}
			50%{ transform: scale(1.3) rotate(30deg); opacity: 0.5;}
			75%{ transform: scale(0.8) rotate(15deg); opacity:0.2;}
		 	100%{ opacity: 0;  transform: rotate(90deg);}
		 }
		 /* 调用动画关键帧 */
		 .fade-enter-active{
			 animation: fadeIn ease 2s;
		 }
		 /* 离开的整个过程 */
		 .fade-leave-active{
		 			 animation: fadeOut ease 2s;
		 }

最简单的完整代码

<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="./js/vue.js"></script>
		<link rel="stylesheet" href="./css/animate.min.css">
		<style>
		</style>
	</head>
	<body>
		<div id="app">
			<button @click="flag=!flag">切换</button> <br>
			<transition 
			name="fade" 
			enter-active-class="animated slideInDown"
			leave-active-class="animated hinge"
			>
				<img src="./images/sun.jpg"  v-if="flag" width="120">
			</transition>
			
		</div>
		<script>
			new Vue({
				el:"#app",
				data(){
					return {flag:true}
				}
			})
		</script>
	</body>
</html>