props属性的验证

最新推荐文章于 2025-03-19 22:41:01 发布

clover____

最新推荐文章于 2025-03-19 22:41:01 发布

阅读量4.8k

点赞数

分类专栏：三年数据开发

本文链接：https://blog.youkuaiyun.com/clover____/article/details/89481954

版权

三年数据开发专栏收录该内容

2 篇文章

订阅专栏

本文介绍了Vue.js中props属性的验证，强调了验证的作用以及如何通过内置的`:validator`进行自定义验证。同时，文章探讨了过滤器的使用，指出Vue 1.x的内置过滤器在2.x中不再提供，但提供了自定义过滤器的方法。过滤器可在插值和v-bind表达式中使用，并通过管道符表示。此外，文章还提及了Vue的自定义指令、渲染函数、JSX以及过渡和动画的基本概念。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1. props属性验证

注意：还是会正常的运行代码，只是对数据类型进行验证，判断是否有误

常用形式：

props: {
    key: keyType // key是从父组件获得的自定义属性， 值是我们期望得到的数据类型
}

如下所示：
在这里插入图片描述

报错：
在这里插入图片描述

需求：我现在想要 > 1000 我才要，没有 > 1000 我就不要
解决： vue提供了一个：validator

props: {
	key: {
		validator( value ){
			return value 的条件
		}
	}
}

在这里插入图片描述
报错：

不常用形式（表单的验证）

props: {
	propA: [],
	propB: {
		type: String,
		require: true
	},
	propC: {
		type:String,
		default: 'yyb'
	},
	propD: {
		type: String,
		default: function(){
			return 'yyb'
		}
	}
}

有时候有的项目也会使用 vue-validate validate这些第三方库

2. 过滤器

概念：对数据进行格式化的一个函数

vue 1.x版本一共提供了10个过滤器，但是不满足人们使用，vue2.x全部不提供了，交给开发者自己写
但是vue提供了定义过滤器的方式
过滤器可以用在两个地方：双花括号插值和 v-bind 表达式
过滤器用给一个 ’ | ’ 表示，我们称之为 ‘管道符’
定义局部的过滤器

html：
<div id="app">
   <p>
   	{{ time }}
   	{{ time | timeFilter('/') }}
   </p>
</div>

Js:
new Vue({
	el: '#app',
	data: {
		time: Date.now()
	},
	filters: {
		timeFilter( value,type ){
			const date = new Date( value )
			const result = date.getFullYear() + type + (date.getMonth() + 1) + type + date.getDate()
			return result 
		}
	}
})

定义全局的过滤器

html：
<div id="app">
   <p>
   	{{ time }}
   	{{ time | timeFilter('/') }}
   </p>
</div>

Js:
Vue.filter('timeFilter',function( value , type ){
	const date = new Date( value )
	const result = date.getFullYear() + type + (date.getMonth() + 1) + type + date.getDate()
	return result
})
new Vue({
	el: '#app',
	data: {
		time: Date.now()
	}
})

自定义指令 directive
全局自定义指令

Html:
<div id="app">
	<div v-append v-if = "flag">
		{{ msg }}
	</div>
	<input type="text" v-focus>
</div>

Js:
Vue.directive('focus',{
/* 钩子函数 */
	bind () {
		console.log('指令和元素第一次绑定')
	},
	inserted ( el, binding, vnode, oldVnode ) {
		console.log('el',el)
		console.log('binding',binding)
		console.log('vnode',vnode)
		console.log('oldvnode',oldVnode)
		el.focus()
		el.style.background = 'red'
	}
	});
Vue.directive('append',{
	inserted (el) {
		var p = document.createElement('P')
		p.innerHTML = '你好吗'
		el.appendChild(p)
	},
	update () {
		console.log('update')
	},
	componentUpdated () {
		console.log( 'componentUpdated' )
	},
	unbind ( el ) {
		console.log( 'unbind' )
	}
})
new Vue({
	el: '#app',
	data: {
		msg: 'hello 指令',
		flag: true
	}
})

局部自定义指令
指令的钩子函数（一共有5个）

bind :只调用一次，指令和元素第一次绑定的时候调用
inserted ：指令绑定的元素插入父节点的时候调用
update ：指令绑定的元素自身，或是他的内容（子节点）发生改变的时候出发
componentUpdated ：指令绑定的组件自身，或是他的内容（子节点）发生改变的时候出发
unbind ：指令和元素第一次解绑是调用（移除元素）
指令的钩子函数的参数
el 当前元素
binding 前端指令的所有信息
vNode 当前指令绑定的虚拟节点
oldVnode 指令绑定前的虚拟节点

渲染函数和 jsx

渲染函数 render函数 — 》 createElment
jsx( javascript + xml )
xml 就是一种标签化的数据格式
jsx语法浏览器无法解析，必须靠babel来解析
jsx语法出现的原因是为了解决,render函数频繁使用createElement来创建节点

<body>
   <div id="app"></div>
</body>

<script type="text/babel">
	new Vue({
		el: '#app',
		data: {
			msg: 'hello jsx'
		},
		render(){
			return (
				<div>
					{{ this.msg }}
				</div>
			)
		}
	})
</script>

过渡 & 动画
https://cn.vuejs.org/v2/guide/transitions.html#过渡的类名

过渡指的是用 css3 的transition来实现动画效果
动画指的是用 js来实现动画效果
Vue中一共给了四种解决方案，但是我们常用的只有一种

在 CSS 过渡和动画中自动应用 class
可以配合使用第三方 CSS 动画库，如 Animate.css 【推荐】
在过渡钩子函数中使用 JavaScript 直接操作 DOM
可以配合使用第三方 JavaScript 动画库，如 Velocity.js
7. slot
可以代替组件内直接写的内容
注意：写在模板中，可以让模板中的内容被解析（原始的模板template中的标签内容不会解析）
如何调节模板中的顺序呢？

<div id="app">
	<Hello>
		<header slot = 'header'>头部</header>
		<section slot = "content"> 内容 </section>
		<footer slot = "footer"> 底部 </footer>
	</Hello>
</div>
<template id="hello">
	<div>
		<slot name = 'header'></slot>
		<h3> 嗨啊 </h3>
		<slot name = "content"></slot>
		<slot name = "footer"></slot>
	</div>
</template>
```js
Js:
Vue.component('Hello',{
	template: '#hello'
})
new Vue({
	el: '#app'
})