Vue学习笔记（组件、动画）

最新推荐文章于 2024-05-11 10:47:19 发布

小言同学Y

最新推荐文章于 2024-05-11 10:47:19 发布

阅读量442

点赞数

分类专栏： Vue学习笔记

本文链接：https://blog.csdn.net/m0_50925590/article/details/123060518

版权

Vue组件组件通信动画过渡效果数据绑定

关键词由CSDN通过智能技术生成

一、定义Vue组件

1.1 全局组件定义的三种方式

1.2 使用component定义私有组件

5.3 使用第三方animate.css类库实现动画

5.4 钩子函数实现小球半场动画

5.5 使用transition-group元素实现列表动画

一、定义Vue组件

什么是组件：组件的出现，就是为了拆分Vue实例的代码量的，能够让我们以不同的组件，来划分不同的功能模块，将来我们需要什么样的功能，就可以去调用对应的组件即可；

组件化和模块化的不同：模块化：是从代码逻辑的角度进行划分的；方便代码分层开发，保证每个功能模块的职能单一；组件化：是从UI界面的角度进行划分的；前端的组件化，方便UI组件的重用

组件可以扩展HTML元素，封装可重用的代码。

1.1 全局组件定义的三种方式

使用Vue.extend配合Vue.component方法：

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>组件</title>
<!-- 引入vue.js -->
<script type="text/javascript" src="vue.min.js"></script>
</head>
<body>
<div id="i1">
	<!-- 如果需要使用组件，直接把组件的名称，以HTML标签的形式，引入到页面中，即可 -->
	<!--  <my-com1></my-com1>-->
	<mycom1></mycom1>
</div>

<script>
	//1.1使用Vue.extend来创建全局的Vue组件
	//var com1=Vue.extend({
	//	template:'<h3>这是使用Vue.extend来创建的Vue组件</h3>'  //通过template属性，指定了组件要展示的HTML结构
	//})
	//1.2 使用Vue.component('组件的名称'，创建出来的组件的模板对象)
	//Vue.component('myCom1',com1)
	//如果使用Vue。component定义全局组件的时候，组件名称使用了驼峰命名，则再引用组件的时候，需要把大写的驼峰改为小写的字母，同时，两个单词之间，使用-连接；
	//如果不使用驼峰，则直接拿名称来使用即可；
	//Vue.component('mycom1',com1)
	
	//Vue.component 第一个参数：组件的名称，将来在引用的时候，就是一个标签形式来引入它的
	//第二个参数：Vue.extend 创建的组件，其中template就是组件将来要展示的HTML内容
	Vue.component('mycom1',Vue.extend({
		template:'<h3>这是使用Vue.extend来创建的Vue组件</h3>'  //通过template属性，指定了组件要展示的HTML结构
	}))
	
	//创建Vue实例，得到ViewModel
	var vm=new Vue({
		el:"#i1",
		data:{},
		methods:{}
	});
</script>
</body>
</html>

结果图展示：

直接使用Vue.component方法：

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>组件</title>
<!-- 引入vue.js -->
<script type="text/javascript" src="vue.min.js"></script>
</head>
<body>
<div id="i1">
	<!-- 还是使用标签的形式，引入自己的组件 -->
	<mycom2></mycom2>
</div>

<script>
	Vue.component('mycom2',{
		//注意：不论是哪种方式创建出来的组件，组件的template属性指向的模板内容，必须有且只有唯一的一个根元素
		template:'<div><h3>这是直接使用Vue.component创建出来的组件</h3><span>123456</span></div>'
	})
	//创建Vue实例，得到ViewModel
	var vm=new Vue({
		el:"#i1",
		data:{},
		methods:{}
	});
</script>
</body>
</html>

结果图展示：

将模板字符串，定义到script标签中；同时，需要使用Vue.component来定义组件：

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>组件</title>
<!-- 引入vue.js -->
<script type="text/javascript" src="vue.min.js"></script>
</head>
<body>
<div id="i1">
	<mycom3></mycom3>
</div>

<!-- 在被控制的#i1外面，使用template元素，定义组件的HTML模板结构 -->
<template id="tmp1">
	<div>
		<h1>这是通过template元素，在外部定义的组件结构,这种方式很好用</h1>
	</div>
</template>

<script>
	Vue.component('mycom3',{
		template:'#tmp1'
	})
	//创建Vue实例，得到ViewModel
	var vm=new Vue({
		el:"#i1",
		data:{},
		methods:{}
	});
</script>
</body>
</html>

结果图展示：

1.2 使用component定义私有组件

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>组件</title>
<!-- 引入vue.js -->
<script type="text/javascript" src="vue.min.js"></script>
</head>
<body>
<div id="i1">
	<login></login>
</div>

<!-- 在被控制的#i1外面，使用template元素，定义组件的HTML模板结构 -->
<template id="temp">
	<div>
		<h1>这是私有的login组件</h1>
	</div>
</template>

<script>
	
	//创建Vue实例，得到ViewModel
	var vm=new Vue({
		el:"#i1",
		data:{},
		methods:{},
		components:{
			login:{
				template:'#temp'
			}
		}
	});
</script>
</body>
</html>

结果图展示：

二、组件中的data

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>组件</title>
<!-- 引入vue.js -->
<script type="text/javascript" src="vue.min.js"></script>
</head>
<body>
<div id="i1">
	<mycom1></mycom1>
</div>


<script>
	//1.组件可以有自己的data数据
	//2.组件的data和实例的data有点不一样，实例中的data可以为一个对象，但是组件中的data必须是一个方法
	//3