Vue学习第二天(过滤器和自定义指令)

Vue学习第二天(过滤器和自定义指令)
今天继续学习VUE的相关指令,使用拦截器和自定义指令完成其他操作,首先是拦截器,和后端的拦截器差不多,不过在这里,拦截器大多是完成文本的格式化,例如,指定前缀后缀的添加,日期格式的设定,下面,我们一一道来
拦截器的写法

  1. 首先,在html中,我们可以用管道命令调用拦截器,而且拦截器仅可用于插值表达式和v-bind指令之中
  2. 其次,在脚本文件中,我们可以定义全局拦截器和私有拦截器进行工作,二者作用域不同
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>品牌管理</title>
		<script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
		<link href="./css/bootstrap.min.css" />
	</head>
	<body>
		<div id="div1">
			<div class="panel-body form-inner">
				<label>ID</label>
				<input id="text1" v-model="id"/>
			
				<label>名称</label>
				<input id="text2" v-model="name" v-focus/>
				<button id="btn2" v-on:click="add" v-color="'blue'">添加</button>
				<input v-model="keywords"/>
			</div>
			<table >
				<thead>
					<th>名称</th>
					<th>创建时间</th>
					<th>删除记录</th>
				</thead>
				<tbody>
					<tr v-for="item in select(keywords)" v-bind:key="item.id">
						<!--使用过滤器时,我们先把要过滤的对象用管道命令传递给过滤器-->
						<td>{{item.name}}</td>
						<td>{{item.create | myfilter}}</td>
						<td><button v-on:click="del(item.id)">删除</button></td>
					</tr>
				</tbody>
			</table>
		</div>
		<script>
			//在vue中可以利用过滤器完成页面文本的格式化操作
			//但是过滤器只能用到插值表达式和v-bind标签用到的地方
			//第一个参数是过滤器的名称,第二个是过滤器的回调函数
			Vue.filter("myfilter", function(str){
				var format = new Date(str);
				var year = format.getFullYear();
				//字符串的padStart(len, "")方法,在字符串开始填充字符串,len指的是需要填充到几位,后面的是用什么填充
				var month = (format.getMonth() + 1).toString().padStart(2, "0");
				var day = format.getDate().toString().padStart(2, "0");
				//return year+"-"+month+"-"+day
				//使用拼接字符串的方法固然是可以的,下面的方法也行(模板字符串)
				return `${year}-${month}-${day}`
				
			})
			
			//自定义指令的相关练习
			// Vue.directive('focus', {
			// 	//无论哪个方法,函数传入的第一个参数一定是,绑定的DOM节点即el,那是一个原生的js对象
			// 	//如果是和样式有关的操作,放在这里
			// 	bind:function(el){  //指令绑定到DOM元素的时候会触发一次
			// 		el.focus();
			// 	},
			// 	//和行为有关的操作,放在这里
			// 	inserted:function(el){  //插入到DOM中是会触发函数
			// 		el.focus();
			// 	},
			// 	updates:function(){  //节点DOM更新时触发一次
					
			// 	}
			// })
			
			Vue.directive('color', {
				bind:function(el, ui){
					el.style.color = ui.value
				}
			})
			
			var vue = new Vue({
				el:'#div1',
				data:{
					list:[
						{id: 1, name:"奔驰", create:new Date()},
						{id: 2, name:"宝马", create:new Date()},
						{id: 3, name:"布加迪威龙", create:new Date()},
						{id: 4, name:"超音速", create:new Date()}
					],
					name:null,
					id:null,
					keywords:""
				},
				methods:{
					add:function(){
						this.list.push({id:this.id, name:this.name, create:new Date()})
						this.id = this.name = null
					},
					del:function(id){
						var index = this.list.findIndex(item =>{
							if(item.id == id){
								return true;
							}
						})
						this.list.splice(index, 1);
					},
					select:function(keywords){
						var seList = [];
						//可以使用forEach完成对于数组的遍历,然后利用关键字进行筛选
						this.list.forEach(item =>{
							if(item.name.indexOf(keywords) != -1){
								seList.push(item)
							}
						})
						return seList;
					}
				},
				//如果不使用全局指令,也可以在vue实例中定义私有指令,满足需求
				directives:{
					'color':{
						bind:function(el, ui){
							el.style.color = ui.value
						}
					},
					'focus':function(el){
						el.focus()
					}
				}
			})
		</script>
	</body>
</html>

不难看到,在插值表达式中,我们加上管道命令

<td>{{item.create | myfilter}}</td>

我们就调用了一个拦截器,拦截器的名字是myfilter,之后我们在自己的脚本文件中,自定义一个全局过滤器即可

//在vue中可以利用过滤器完成页面文本的格式化操作
			//但是过滤器只能用到插值表达式和v-bind标签用到的地方
			//第一个参数是过滤器的名称,第二个是过滤器的回调函数
			Vue.filter("myfilter", function(str){
				var format = new Date(str);
				var year = format.getFullYear();
				//字符串的padStart(len, "")方法,在字符串开始填充字符串,len指的是需要填充到几位,后面的是用什么填充
				var month = (format.getMonth() + 1).toString().padStart(2, "0");
				var day = format.getDate().toString().padStart(2, "0");
				//return year+"-"+month+"-"+day
				//使用拼接字符串的方法固然是可以的,下面的方法也行(模板字符串)
				return `${year}-${month}-${day}`
				
			})

在这里,我们将获取到的字符串格式化输出,呈现出一个日期,私有化过滤器的构建则需要我们在VUE实例中创建
下面介绍自定义指令的使用

  1. 首先,在使用上,和以前定义后的指令一样,我们需要在htnl网页中插入我们的指令片段
  2. 其次,在我们的脚本文件中插入我们的自定义方法
自定义指令的相关练习
			Vue.directive('focus', {
				//无论哪个方法,函数传入的第一个参数一定是,绑定的DOM节点即el,那是一个原生的js对象
				//如果是和样式有关的操作,放在这里
				bind:function(el){  //指令绑定到DOM元素的时候会触发一次
					el.focus();
				},
				//和行为有关的操作,放在这里
				inserted:function(el){  //插入到DOM中是会触发函数
					el.focus();
				},
				updates:function(){  //节点DOM更新时触发一次
					
				}
			})

这样就创建出来了,常见的有三个方法,bind,focus,uodate,三个方法,三个方法都会传进来一个参数el,这个参数就是标签所在DOMj节点,这里拿到的是一个js对象,有很多方法可以调用,不过要注意的是,如果是要加上样式,则一般使用bind,而如果要插入和行为有关的操作,则使用inserted方法
如果要进行相关的私有化过滤器,则应该在VUE实例中创建

var vue = new Vue({
				el:'#div1',
				data:{
					list:[
						{id: 1, name:"奔驰", create:new Date()},
						{id: 2, name:"宝马", create:new Date()},
						{id: 3, name:"布加迪威龙", create:new Date()},
						{id: 4, name:"超音速", create:new Date()}
					],
					name:null,
					id:null,
					keywords:""
				},
				methods:{
					add:function(){
						this.list.push({id:this.id, name:this.name, create:new Date()})
						this.id = this.name = null
					},
					del:function(id){
						var index = this.list.findIndex(item =>{
							if(item.id == id){
								return true;
							}
						})
						this.list.splice(index, 1);
					},
					select:function(keywords){
						var seList = [];
						//可以使用forEach完成对于数组的遍历,然后利用关键字进行筛选
						this.list.forEach(item =>{
							if(item.name.indexOf(keywords) != -1){
								seList.push(item)
							}
						})
						return seList;
					}
				},
				//如果不使用全局指令,也可以在vue实例中定义私有指令,满足需求
				directives:{
					'color':{
						bind:function(el, ui){
							el.style.color = ui.value
						}
					},
					'focus':function(el){
						el.focus()
					}
				}
			})

使用方法大致相同
最后介绍VUE实例的生命周期,也就是实例从创建到销毁的全过程

  1. beforeCreate(),第一个生命周期方法,在实例被创建出来之前,方法就会执行
  2. created(),第二个生命周期方法,会在初始化实例后执行
  3. beforeMount(),第三个生命周期函数,在此之前,VUE会获取到el元素
  4. mounted(),第四个生命周期函数,执行这个方法,从内存中取出渲染好的模板,生成想要的页面
  5. beforeUpdate(),第五个生命周期函数,当data中的数据发生变化,就会触发这个函数,不过页面的数据还是旧的
  6. updated(),将内存中的页面渲染到页面,更新页面
  7. beforeDestroy() ,第七个生命周期函数,此时内容还没销毁
  8. destroyed(),实例销毁
    好了,今天就先到这里,为之则易,不为则难
  • 1
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值