1.过滤器
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<script src="./lib/vue-2.4.0.js"></script>
</head>
<body>
<div id='app'>
<p>{{msg|msgformat('疯狂')|text}}</p>
</div>
<script>
Vue.filter('msgformat',function(msg,arg){
return msg.replace(/单纯/g,arg)
})
Vue.filter('text',function(msg){
return msg+'======'
})
var vm = new Vue({
el:'#app',
data:{
msg:'曾经,我也是个单纯的人,单纯的我傻傻的问谁是世界上最单纯的人'
},
methods:{
}
})
</script>
</body>
</html>
简单的文本替换功能
完善汽车时间
Vue.filter('dateformat',function(datestr,pattern){
var dt=new Date(datestr)
var y=dt.getFullYear()
var m=dt.getMonth()+1
var d=dt.getDay()
if(pattern.toLowerCase()=='yyyy-mm-dd'){
return y+'-'+m+'-'+d
}else{
var h=dt.getHours()
var m1=dt.getMinutes()
var s=dt.getSeconds()
return y+'-'+m+'-'+d+' '+h+':'+m1+':'+s
}
})
2.padStart
需要补足前置位多少个零的情况
var h=(dt.getHours()).toString().padStart(2,'0')
将小时位补足两位, 不足的话将添0
3.按键修饰符
@keyup.enter="add"
按动回车键盘实现操作
如果需要其他的键,vue内部自身未提供,我们可以写出键码来代替键例如f2键用113代替
4.获取焦点
在标签上例如添加一个id=‘search’
document.getElementById('search').focus()
完成获取焦点
5.自定义指令(全局)
Vue.directive('color',{
bind:function(el,binding){
el.style.color=binding.value
}
})
使文本框的输入内容变为红色的v-color指令(自定义)
6.自定义指令(私有)
directives:{
"fontweight":{
bind:function(el,binding){
el.style.fontWeight=binding,value
}
}
}