Vue学习（二）

最新推荐文章于 2025-03-01 19:48:24 发布

码代马

最新推荐文章于 2025-03-01 19:48:24 发布

阅读量207

点赞数

CC 4.0 BY-SA版权

分类专栏： Vue

本文链接：https://blog.youkuaiyun.com/qq_37296487/article/details/94887394

Vue 专栏收录该内容

4 篇文章

订阅专栏

过滤器和自定义指令

代码实现:

<!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>