Vue学习第二天（过滤器和自定义指令）
今天继续学习VUE的相关指令，使用拦截器和自定义指令完成其他操作，首先是拦截器，和后端的拦截器差不多，不过在这里，拦截器大多是完成文本的格式化，例如，指定前缀后缀的添加，日期格式的设定，下面，我们一一道来
拦截器的写法
- 首先，在html中，我们可以用管道命令调用拦截器，而且拦截器仅可用于插值表达式和v-bind指令之中
- 其次，在脚本文件中，我们可以定义全局拦截器和私有拦截器进行工作，二者作用域不同
<!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实例中创建
下面介绍自定义指令的使用
- 首先，在使用上，和以前定义后的指令一样，我们需要在htnl网页中插入我们的指令片段
- 其次，在我们的脚本文件中插入我们的自定义方法
自定义指令的相关练习
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实例的生命周期，也就是实例从创建到销毁的全过程
- beforeCreate()，第一个生命周期方法，在实例被创建出来之前，方法就会执行
- created()，第二个生命周期方法，会在初始化实例后执行
- beforeMount()，第三个生命周期函数，在此之前，VUE会获取到el元素
- mounted()，第四个生命周期函数，执行这个方法，从内存中取出渲染好的模板，生成想要的页面
- beforeUpdate()，第五个生命周期函数，当data中的数据发生变化，就会触发这个函数，不过页面的数据还是旧的
- updated()，将内存中的页面渲染到页面，更新页面
- beforeDestroy() ，第七个生命周期函数，此时内容还没销毁
- destroyed()，实例销毁
好了，今天就先到这里，为之则易，不为则难
606
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
