vue总结(三)

最新推荐文章于 2023-04-20 19:30:46 发布

超人不会飞 °

最新推荐文章于 2023-04-20 19:30:46 发布

阅读量96

点赞数

文章标签： vue.js javascript ecmascript

本文链接：https://blog.csdn.net/weixin_52897462/article/details/121084663

版权

本文详细介绍了Vue中的动画实现原理，包括CSS动画、自定义添加class动画、过渡和动画类名的切换，以及如何使用`transition`、`transition-group`、`@keyframes`和`animate.css`库。同时，还讲解了自定义指令的bind、insert和update等生命周期。

摘要由CSDN通过智能技术生成

一. 过滤（管道）

过滤器，是一个有参数，有返回值的方法。
其作用在于用户输入数据后，它能够进行处理，并返回一个数据结果。

过滤器可以用在两个地方：双花括号插值和v-bind表达式。

过滤器应该被添加在JavaScript表达式的尾部，由“管道” | 符号指示：

组件内: 如果出现同名时，权利大，范围小
实例:

<div id="app">
			<p>num:{
   {
   num}}</p>
			<p><input type="text" v-model.number="num"></p>
			<!-- 显示num 使用fix管道 -->
			<p>{
   {
   num|fix}}</p>
			<p>{
   {
   3.1415926|fix}}</p>//fix数据保留后两位，可以四舍五入
			<p>{
   {
   3.1415926|fix(4)}}</p>//fix(4)数据保留后四位
			</div>
			<script>
			new Vue({
   
				el:"#app",
				data:{
   num:100},
				//过滤，管道，（格式化数据）
				filters:{
   
					//过滤名称，value过滤前的值
					fix(value,arg=2){
   
						//返回转为小数的值
						return value.toFixed(arg)
					}

二.类的绑定

对于数据绑定的一种常见需要是操作元素的类列表和它的内联样式。由于它们都是属性，我们能用v-bind管理他们。我们仅仅需要使用我们的表达式计算最后的字符串。然而，字符串串联的干扰是令人烦恼和易于出错的。因为这个原因，当v-bind用于class和style的时候Vue提供了特定的改进手段。除了字符串，表达式也可以使用对象和数组作计算。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			.red{
   
				color: red;
			}
			.active{
   
				color: pink;
			}
			.big{
   
				font-size: 30px;
			}
		</style>
		
	</head>
	<script src="./js/vue.js" type="text/javascript" charset="utf-8"></script>
	<body>
		<div id="app">
			<h1 >类的绑定</h1