（Sjran）vue.js第五天学习-CSDN博客

本文链接：https://blog.csdn.net/qq_45506707/article/details/99682781

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