Vue学习（二）

最新推荐文章于 2023-04-02 11:15:07 发布

码代马

最新推荐文章于 2023-04-02 11:15:07 发布

阅读量171

点赞数

分类专栏： Vue

本文链接：https://blog.csdn.net/qq_37296487/article/details/94887394

版权

Vue 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

过滤器和自定义指令

代码实现:

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="vue.js" type="text/javascript" charset="utf-8"></script>
	</head>
	<body>
		<div id="app">
			<p v-color>{{ msg | month }}</p>
			<input type="text" v-fouce/>
		</div>
		
		<script>
			Vue.directive('color',{
				bind:function(el){
					el.style.color = 'red';
				}
			})
			
			var vm = new Vue({
				el:'#app',
				data:{
					msg:'Hello World'
				},
				filters:{
					month:function(value){
						return value.replace("World","HHHH");
					}
				},
				directives:{
					fouce:{
						inserted:function(el){
							el.focus();
						}
					}
				}
			});

		</script>
	</body>
</html>

过滤器实现

过滤器长用于文本格式化，多用于两个地方：

双括号插值
如 <p>{{ msg | filter }}</p>在此处msg是数据，而filter是过滤器
v-bind表达式
如<input type="text" v-bind:value="msg | filter" />,msg是数据，而filter是过滤器

也可以多个过滤器串联：
<p>{{ msg | filter | filter2 }}</p>

在Vue中实例化有两种方式

全局实例化
全局利用Vue.filter( id, [definition] )方法，
例如：

<script>
Vue.filter('month',(value)=>{
			return value.replace("World","HHH");
})
</script>

私有实例化
实例化是在Vue的实例化对象中定义的
例：

<script>
	var vm = new Vue({
			el:'#app',
			data:{
				msg:'Hello World'
			},
			filters:{
				month:function(value){
					return value.replace("World","HHHH");
				}
			}
	});
</script>

传参

过滤器中是可以传参的，过滤器食指上也是一个函数，因此可以传参，{{ msg | filiter }}的过滤器是单参数的，可以说JavaScript函数filiter，它传的参数是msg。
过滤器也可以传入其它参数，仅需修改一小部分，如下：

		<p>{{ msg | addString('后面添加的字符串') }}</p>
		<script>
			Vue.filter('addString',function(arg1, arg2){
				return arg1 + arg2;
			})
		
		</script>

自定义指令

Vue除了一些内置的指令，还可以自定义指令
如：
<input type="text" v-fouce/>
如上v-fouce是自定义的指令

在Vue中实例化的两种方式

自定义指令同过滤器一样，有两种实例化方式，同样是私有的和全局的。

全局的方式

	<script>
			Vue.directive('fouce',{
				bind:function(el){
					el.focus();
				}
			})
	</script>

私有的方式

	<script>
			var vm = new Vue({
				el:'#app',
				data:{
					msg:'Hello World'
				},
				directives:{
					fouce:{
						inserted:function(el){
							el.focus();
						}
					}
				}
			});
	</script>

自定义指令的钩子函数

一个自定义指令可以有一个或多个钩子函数

bind: 仅调用一次，在指令第一次绑定到元素时调用，可以进行一次性的初始化设置（元素未加载时，此钩子函数无效）
inserted：元素插入，保证父节点存在，但不一定已被插入文档中。
update: 所在组件的 VNode 更新时调用，但是可能发生在其子 VNode 更新之前。指令的值可能发生了改变，也可能没有。
componentUpdated: 指令所在组件的 VNode 及其子 VNode 全部更新后调用。
unbind: 只调用一次，指令与元素解绑时调用。

码代马

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
Vue学习（二）

过滤器和自定义指令代码实现:<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title></title> <script src="vue.js" type="text/javascript" charset="utf-8"></s...
复制链接

扫一扫