data{
msg:'曾经，我也是一个单纯的少年，单纯的我傻傻的问，谁是世界上最单纯的男人'
}
1.filter:过滤
例子：var newList = this.list.filter(item=>{
if(item.name.includes(keywords))
return item;
})
注意：es6中，为字符串提供了一个新方法，叫做String.prototype.includes("要包含的字符串")，如果包含则返回true
2.过滤调用的格式{{ name | nameope}}
3.过滤器的定义语法：
过滤器的function，第一个参数，已经被规定死了，永远是管道符前面传递过来的数据
vue.filter('过滤器的名称',function(data){
return data + "123"
})
例子：<p>{{msg | msgFormat('123')}}</p>
Vue.filter('msgFormat',function(msg,arg){
return msg.replace('/单纯/g','arg')
})
注意：1.字符串的replace方法，第一个参数，除了可以写字符串之外，还可以写正则
2.过滤器可以传递多个参数，先调用第一个，结果再调用第二个依次类推
4.过滤器进行时间的格式化
<p>{{item.ctime | dateFormat(yy-MM-DD)}}</p>
Vue.filter('dateFormat',function(dateStr,pattern=""){
//根据给定时间字符串，得到特定的时间,形参可以传递一个默认值，es6，如果页面不传的话，patter是undefined，会报错所以给一个默认值
var dt = new Date(dateStr)
//yyyy-mm-dd
var y = dt.getFullYear()
var m = dt.getMonth() + 1
var d = dt.getDate
//toLowerCase(变成小写)
if(pattern.toLowerCase() === 'yyyy-mm-dd'){
return `$(y)-$(m)-$(d)`
}else{
var hh = dt.getHours()
var mm = dt.getMinutes()
var ss = dt.getSeconds()
return `$(y)-$(m)-$(d) $(hh):$(mm):$(ss)`
}
})
5.filters:私有的过滤器，写在组件中的，过滤器调用的时候，采用的是就近原则，如果私有过滤器和全局过滤器名称一致，这时候优先调用私有过滤器
filters:{
过滤器的名称：function(){}
}
6.String.prototype.padStart/End:填充字符串
StringpadStart(maxLength填充完毕后字符串长度,fillString用什么填充)用于当时间是08，09之类的前面0不显示的时候用的
例子：var m = (dt.getMonth() + 1).toString().padStart(2,0)
注意，只能是字符串用，所以先转换为字符串
7.按键修饰符
vue提供的.enter,.tab,.delete,.esc,.space,.up,.down,.left,.right没有提供的可以吧键盘码值写上
例子：<input type="text" v-model="name" @keyup.enter ="add()">点击回车触发添加事件
自定义全局案件修饰符
Vue.config.keyCodes.f2 = 113
8.自定义指令默认获取焦点
注意：vue中所有的指令在调用的时候都以v-开头
例子：<input type="text" v-model="name" @keyup.enter ="add()" v-focus>
使用Vue.dirctive()定义全局的指令，注意，在定义的时候，指令的名称前面，不需要加v-前缀，在调用的时候，必须在指令名称前加上v-前缀来进行调用,参数2是一个对象，身上有一些指令相关的函数，这些函数可以在特定的阶段，执行相关的操作
Vue.directive('focus',{
bind:function(el){
//每当指令立即绑定到元素上的时候，会立即执行这个bind函数，只执行一次
//注意：在每个函数中，第一个参数，永远是el，表示被绑定了指定的那个元素，这个el参数，是一个原生的JS对象
//在元素刚绑定了指令的时候，还没有插入到dom中去，这时候，调用用focus方法没有作用，因为一个元素只有插入到dom之后，才能获取焦点
//el.focus()
}
inserted:function(el){
//表示元素插入到DOM中的时候会执行inserted函数，只执行一次
//和JS行为有关的操作，最好在inserted中去执行，防止JS行为不生效
el.focus()
}
update:function(el){
//当组件更新的时候，会执行update，可能会触发多次}
})
9.自定义一个设置字体颜色的指令
例子：<input type="text" v-model="name" @keyup.enter ="add()" v-focus v-color>
Vue.directive('color',{
//样式，只要通过指令绑定给了元素，不管这个元素有没有被插入到页面中去，这个元素肯定有了一个内联的样式
//和样式相关的操作一般都可以在bind中使用
bind:function(el){
el.style.color = 'red'
}
})
10.https://cn.vuejs.org/v2/guide/custom-directive.html
例子：<input type="text" v-model="name" @keyup.enter ="add()" v-focus v-color=" 'blue' ">
Vue.directive('color',{
bind:function(el,binding){
el.style.color = binding.value
//console.log(binding.value)输出的是blue
//console.log(binding.expression)输出的是'blue'
}
})
11.定义私有指令
directive:{
//在组件中写的
'fontweight':{
bind:function(){
el.style.fontWeight = binding.value
}
inserted:function(){
}
}
}
12.指令函数的简写模式
directive:{
'fontsize':function(el,binding){
//注意这个function等同于把代码写到bind和update中去
//el.style.fontSize = binding.value
el.style.fontSize = parseInt(binding.value)+'px'
}
}
网友评论