Vue学习笔记（样式，过滤器，自定义指令，生命周期）

最新推荐文章于 2023-10-28 13:46:38 发布

小言同学Y

最新推荐文章于 2023-10-28 13:46:38 发布

阅读量296

点赞数

分类专栏： Vue学习笔记文章标签： vue.js 学习 javascript

版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。

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

版权

Vue学习笔记专栏收录该内容

3 篇文章 0 订阅

订阅专栏

目录

一、在Vue中使用样式

1.1 使用class样式

1.2 使用内联样式

二、过滤器

2.1 全局过滤器

2.2 私有过滤器

三、自定义指令

3.1 全局指令

3.2 私有指令

四、vue实例的生命周期

一、在Vue中使用样式

1.1 使用class样式

数组

<h1 :class="['red','thin']">标题一!!!!!</h1>

数组中使用三元表达式

<h1 :class="['red','thin']">标题一!!!!!</h1>

数组中嵌套对象

<h3 :class="['thin','italic',{'active':flag}]">标题三!!!!</h3>

直接使用对象

<p :class="{red:true,thin:true,italic:false,active:false}">好好学习</p>

总代码：

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<!-- 引入vue.js -->
<script type="text/javascript" src="vue.min.js"></script>
<style>
	.red{
		color:red;
	}
	.thin{
		font-weight:200;
	}
	.italic{
		font-style:italic;
	}
	.active{
		letter-spacing:0.5em;
	}
</style>
</head>
<body>
<div id="i1">
	<!-- d第一种使用方式，直接传递一个数组，注意:这里的class需要使用v-bind做数据绑定 -->
	<h1 :class="['red','thin']">标题一!!!!!</h1>
	<!-- 在数组中使用三元表达式 -->
	<h2 :class="['thin','italic',flag?'active':'']">标题二!!!</h2>
	<!--在数组中使用对象来代替三元表达式，提高代码的可读性  -->
	<h3 :class="['thin','italic',{'active':flag}]">标题三!!!!</h3>
	<!-- 在为class使用v-bind绑定对象的时候，对象的属性是类名，由于对象的属性可带引号，也可不带引号，所以，这里没有写引号 -->
	<p :class="{red:true,thin:true,italic:false,active:false}">好好学习</p>
</div>

<script>
	var vm=new Vue({
		el:"#i1",
		data:{
			flag:true
		}
	});
</script>
</body>
</html>

结果图展示：

1.2 使用内联样式

直接在元素上通过 :style的形式，书写样式对象

<h1 :style="{color:'red','font-weight':300}">这是一个h1</h1>

将样式对象定义到data中，并直接引用到 :style中

在data上定义样式：

data:{
styleObj1:{color:'red','font-weight':200}
}

在元素中，通过属性绑定的形式，将样式对象应用到属性中：

<h1 :style="styleObj1">我是小言</h1>

在 :style中通过数组，引用多个data上的样式对象

在data上定义样式：

data:{
           styleObj1:{color:'red','font-weight':200},
           styleObj2:{'font-style':'italic'}
       }

在元素中，通过属性绑定的形式，将样式对象应用到元素中：

<h2 :style="[styleObj1,styleObj2]">标题二</h2>

总代码：

<!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">
	<!-- 对象就是无序键值对的集合 -->
	<h1 :style="{color:'red','font-weight':300}">这是一个h1</h1>
	
	<h1 :style="styleObj1">我是小言</h1>
	
	<h2 :style="[styleObj1,styleObj2]">标题二</h2>
</div>

<script>
	var vm=new Vue({
		el:"#i1",
		data:{
			styleObj1:{color:'red','font-weight':200},
			styleObj2:{'font-style':'italic'}
		},
		methods:{}
	});
</script>
</body>
</html>

结果图展示：

二、过滤器

概念：Vue.js允许你自定义过滤器，可被用作一些常见的文本格式化。过滤器可以用在两个地方：mustachc插值和v-bind表达式，过滤器应该被添加在JavaScript表达式的尾部，又管道符（|）指示。

2.1 全局过滤器

过滤器的基本使用

<!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">
	<p>{{message | mesgFormat('朋友','A') | test}}</p>
</div>

<script>
	//定义一个vue全局过滤器，名字叫做msgFormat
	Vue.filter('mesgFormat',function(message,arg,arg2){
		//字符串的 replace方法，第一个参数，除了可以写一个字符串之外，还可以定义一个正则
		return message.replace(/同学/g,arg+arg2)
	})
	
	Vue.filter('test',function(message){
		return message+'Yan'
	})
	
	
	var vm=new Vue({
		el:"#i1",
		data:{
			message:'同学1,同学2,同学3 你好呀'
		}
	});
</script>

<!-- 过滤器调用时候的格式  {{name|过滤器的名称}} -->
<script type="text/javascript">
	//过滤器的定义语法
	Vue.filter('过滤器的名称',function(){})
</script>
</body>
</html>

结果图展示：

定义格式化时间的全局过滤器

<!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">
	<p>{{dateStr}}</p>
	<p>{{dateStr | dateFormat}}</p>
</div>

<script>
	//定义一个vue全局过滤器，进行时间的格式化
	Vue.filter('dateFormat',function(dateStr){
		//根据给定的时间字符串，得到特定的事件
		var dt=new Date(dateStr)
		
		//yyyy-mm-dd
		
		var y=dt.getFullYear()
		var m=dt.getMonth()+1
		var d=dt.getDate()
		
		return y+'-'+m+'-'+d
		
		
	})
	
	var vm=new Vue({
		el:"#i1",
		data:{
			dateStr:new Date()
		}
	});
</script>

</body>
</html>

结果图展示：

2.2 私有过滤器

定义私有过滤器

<!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="i2">
	{{dt|dateFormat}}
</div>

<script>
	//如何自定义一个私有的过滤器
	var vm2=new Vue({
		el:'#i2',
		data:{
			dt:new Date()
		},
		methods:{},
		filters:{ //定义私有过滤器，过滤器有两个条件 [过滤器名称和处理函数]
			//过滤器调用的时候，采用的是就近原则，如果私有过滤器和全局过滤器名称一致了，这时候就优先调用私有过滤器
			dateFormat:function(dateStr){
				var dt=new Date(dateStr)
				
				//yyyy-mm-dd
				
				var y=dt.getFullYear()
				var m=dt.getMonth()+1
				var d=dt.getDate()
				
				return y+'-'+m+'-'+d
				
			}
			
		}
	});
</script>

</body>
</html>

三、自定义指令

添加一个自定义指令，有两中方式：

通过Vue.directive()函数注册一个全局的指令。
通过组件的directives属性，对该组件添加一个局部的指令。

3.1 全局指令

自定义全局指令v-focus，为绑定的元素自动获取焦点：

<!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">
	<p>页面载入时，文本框自动获取焦点</p>
	<p><input v-focus v-color="'blue'"></p>
</div>

<script>
	//使用 Vue.directive()定义全局的指令
	//其中：参数1：指令的名称；注意，在定义的时候，指令的名称前面，不需要加v-前缀\
	//但是，在调用的时候，必须在指令名称前 加上v-前缀来调用
	//参数2：是一个对象，这个对象身上，有一些指令相关的函数，这些函数可以在特定的阶段，执行相关的操作
	Vue.directive('focus',{
		bind:function(el){ //每当指令绑定到元素上的时候，会立即执行这个bind函数，只执行一次
			//注意：在每个函数中，第一个参数，永远是el,表示被绑定了指令的那个元素，这个el参数，是一个元素的JS对象
			//在元素 刚绑定了指令的时候，还没有插入到DOM中去，这时候，调用focus方法没有作用
			//因为，一个元素，只有插入DOM之后，才能获取焦点
			//el.focus()
		},
		inserted:function(el){ //inserted表示元素插入到DOM中的时候，会执行inserted函数[触发一次]
			//和JS行为有关的操作，最好在inserted中执行，防止JS行为不生效
			el.focus()
		},
		updated:function(){ //当VNode更新的时候，会执行update，可能会触发多次
			
		}
		
	});
	//自定义一个设置字体颜色的指令
	Vue.directive('color',{
		//样式，只要通过指令绑定给了元素，不管这个元素有没有被插入到页面中去，这个元素肯定有了一个内联的样式
		bind:function(el,binding){
			el.style.color=binding.value  //指令绑定的值
			//console.log(binding.value)
			//和样式相关的操作，一般可以在bind执行
		}
	});
	var vm=new Vue({
		el:"#i1",
		data:{},
		methods:{}
	});
</script>
</body>
</html>

3.2 私有指令

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>v-bind</title>
<!-- 引入vue.js -->
<script type="text/javascript" src="vue.min.js"></script>
</head>
<body>
<div id="i1">
	<p v-fontweight="500" v-fontsize="'50px'">向文本框中输入文字</p>
</div>

<script>
	var vm=new Vue({
		el:"#i1",
		data:{},
		methods:{},
		directives:{ //自定义私有指令
			'fontweight':{  //设置字体粗细
				bind:function(el,binding){
					el.style.fontWeight=binding.value
				}
			},
			'fontsize':function(el,binding){ //设置字体大小
				el.style.fontSize=parseInt(binding.value)+'px'
			}
			
		}
	});
</script>
</body>
</html>

四、vue实例的生命周期

1.什么是生命周期：从Vue实例创建、运行、到销毁期间，总是伴随着各种各样的事件，这些事件，统称为生命周期！

2.生命周期钩子：就是生命周期事件的别名而已；

3.主要的生命周期函数分类：

创建期间生命周期函数：

beforeCreate：实例刚在内存中被创建出来，此时，还没有初始化好data和methods属性；

created：实例已经在内存中创建好了，此时data和methods已经创建好了，此时还没有开始编译模板；

beforeMount：此时已经完成了模板的编译，但是还没有挂载到页面中；

mounted：此时，已经将编译好的模板，挂载到了页面指定的容器中显示；

运行期间的生命周期函数：

beforeUpdate：状态更新之前执行此函数，此时data中的状态值是最新的，但是界面上显示的数据还是旧的，因为此时还没有从新渲染DOM节点；

updated：实例更新完毕之后调用此函数，此时data中的状态值和界面上显示的数据，都已经完成了更新，界面已经被重新渲染好了！

销毁期间的生命周期函数：

beforeDestroy：实例销毁之前调用。在这一步，实例任然完全可用；

destroyed：Vue实例销毁后调用。调用后，Vue实例指示的所有东西都会解绑，所有的事件监听器会被移除，所有的子实例也会被销毁。

代码：

<!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">
	<input type="button" value="修改message" @click="message='no'">
	<h3 id="h3">{{message}}</h3>
</div>

<script>
	var vm=new Vue({
		el:"#i1",
		data:{
			message:'ok'
		},
		methods:{
			show(){
				console.log('执行了show方法')
			}
		},
		beforeCreated(){ //这是我们遇到的第一个生命周期函数，表示实例完全被创建出来之前，会执行它
			//console.log(this.message)
			//this.show()
			//注意：在beforeCreate生命周期函数执行的时候，data和methods中的数据都还没有初始化
		},
		created(){ //这是遇到的第二个生命周期函数
			//console.log(this.message)
			//this.show()
			//在created中，data和methods都已经被初始化好了
			//如果要调用methods中的方法，或者操作data中的数据，最早只能在created中操作
		},
		beforeMount(){ //这是遇到的第三个生命周期函数，表示模板已经在内存中编辑完成了，但是尚未把模板渲染到页面中
			//console.log(document.getElementById('h3').innerText)
			//在beforeMount执行的时候，页面中的元素，还没有被真正替换过来，只是之前写的一些模板字符串
			
		},
		mounted(){//这是遇到的第4个生命周期函数，表示，内存中的模板，已经真实的挂载到了页面中，用户已经可以看到渲染好的页面了
			//console.log(document.getElementById('h3').innerText)
			//注意：mounted是实例创建期间的最后一个生命周期函数，当执行完mounted就表示实例已经被完全创建好了，
			//此时，如果没有其它操作的话，这个实例，就静静的躺在我们的内存中，一动不动
		},
		//接下来的是运行中的两个事件
		beforeupdate(){//这时候，表示我们的界面还没有被更新[数据肯定被更新了]
			//console.log('界面上元素的内容:'+ document.getElementById('h3').innerText)
			//console.log('data中的message数据是:'+ this.message)
			//得出结论：当执行beforeUpdate的时候，页面中的显示数据，还是旧的，此时data数据是最新的，页面上未和最新的数据保持同步
		},
		updated(){
			console.log('界面上元素的内容:'+ document.getElementById('h3').innerText)
			console.log('data中的message数据是:'+ this.message)
			//updated事件执行的时候，页面和data数据已经保持同步了,都是最新的
		}
	});
</script>
</body>
</html>

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
Vue学习笔记（样式，过滤器，自定义指令，生命周期）

一、在Vue中使用样式1.使用class样式数组<h1 :class="['red','thin']">标题一!!!!!</h1>数组中使用三元表达式<h1 :class="['red','thin']">标题一!!!!!</h1>数组中嵌套对象<h3 :class="['thin','italic',{'active':flag}]">标题三!!!!</h3>直接使用对象<p :class="
复制链接

扫一扫

专栏目录

评论

被折叠的条评论为什么被折叠?

到【灌水乐园】发言

查看更多评论

添加红包

成就一亿技术人!

hope_wisdom

发出的红包

打赏作者

小言同学Y 你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20

扫码支付：¥1

获取中

扫码支付

您的余额不足，请更换扫码支付或充值

实付元

使用余额支付

点击重新获取

扫码支付

钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。