事件处理-按键修饰符
js 里面的键盘事件对应的键码
1 <!DOCTYPE html> 2 <html lang="en"> 3 4 <head> 5 <meta charset="utf-8"> 6 <meta name="viewport" content="width=device-width,initial-scale=1.0"> 7 <title>Document</title> 8 <!--1.导入Vue的包--> 9 <script src=" /npm/vue"></script> 10 <!-- <link rel="stylesheet" href="./lib/bootstrap.css"> --> 11 <link rel="stylesheet" href=" /npm/bootstrap@3.3.7/dist/css/bootstrap.min.css"> 12 <!-- 需要用到Jquery吗???不推荐在vue中使用Jquery --> 13 14 </head> 15 16 <body> 17 <div id="app"> 18 19 <div class="panel panel-primary"> 20<div class="panel-heading"> 21 <h3 class="panel-title">添加品牌</h3> 22</div> 23<div class="panel-body form-inline"> 24 <label> 25 Id: 26 <input type="text" class="form-control" v-model="id"> 27 </label> 28 29 <label> 30 Name: 31 <input type="text" class="form-control" v-model="name" @keyup.f2="add"> 32 </label> 33 <!-- 在vue中,使用事件绑定机制,为元素指定处理函数的时候,如果加了小括号,就可以给函数传参了 --> 34 <input type="button" value="添加" class="btn btn-primary" @click="add()"> 35 36 <label> 37 搜索名称关键字: 38 <input type="text" class="form-control" v-model="keywords"> 39 </label> 40 41</div> 42 </div> 43 44 45 46 <table class="table table-bordered table-hover table-striped"> 47<thead> 48 <tr> 49 <th>Id</th> 50 <th>Name</th> 51 <th>Ctime</th> 52 <th>Operation</th> 53 </tr> 54</thead> 55<tbody> 56<!-- 之前,v-for中的数据,都是直接从data上的list中直接渲染过来的 --> 57<!-- 现在,我们自定义了一个方法,同时,把所有的关键字,通过传参的形式,传递给了search方法 --> 58<!-- 在search方法内部,通过执行for循环,把所有符合搜索关键字的数据,保存到一个新数组中,返回 --> 59<tr v-for="item in search(keywords)" :key="item.id"> 60 <td>{{item.id}}</td> 61 <td v-text="item.name"></td> 62 <td>{{ item.ctime | dateFormat()}}</td> 63 <td> 64 <a href="" @click.prevent="del(item.id)">删除</a> 65 </td> 66</tr> 67 </tbody> 68 </table> 69 70 71 </div> 72 73 <div id="app2"> 74 <h3>{{dt|dateFormat}}</h3> 75 </div> 76 77 78 <script> 79//全局的过滤器,进行时间的格式化 80//所谓的全局过滤器,就是所有的VM实例都共享 81Vue.filter('dateFormat',function(dateStr,pattern=""){ 82 //根据给定的时间字符串,得到特定的时间 83 var dt = new Date(dateStr) 84 85 //yyyy-mm-dd 86 var y=dt.getFullYear() 87 var m=dt.getMonth()+1 88 var d=dt.getDate() 89 90 // return y+'-'+m+'-'+d 91 //模板字符串 `` 92 // return `${y}-${m}-${d}` 93 94 if(pattern.toLowerCase() ==='yyyy-mm-dd'){ 95 return `${y}-${m}-${d}` 96 }else{ 97 var hh=dt.getHours() 98 var mm=dt.getMinutes() 99 var ss=dt.getSeconds()100 101 return `${y}-${m}-${d} ${hh}:${mm}:${ss}`102 }103 104})105 106//自定义全局按键修饰符107Vue.config.keyCodes.f2=113108 109 110 //创建 Vue 实例,得到 ViewModel111 var vm = new Vue({112el:'#app',113 data:{114 id:'',115 name:'',116 keywords:'',//搜索的关键字117 list:[118 {id:1,name:'奔驰',ctime:new Date()},119 {id:2,name:'宝马',ctime:new Date()}120 ]121 },122 methods:{123 add(){//添加的方法124 // console.log('ok')125 //分析:126 //1.获取到id 和name ,直接从data上面获取127 //2.组织出一个对象128 //3.把这个对下,调用数组的相关方法,添加到当前data上的list中129 //4.注意:在Vue中,已经实现了数据的双向绑定,每当我们修改了data中的数据,Vue会默认监听到数据的改动,自动把最新的数据,应用到页面上;130 //5.当我们意识到上面的第四部的时候,就证明大家已经入门Vue了,我们更多的是在进行VM中Model数据操作,同时,在操作Model数据的时候,指定的业务逻辑操作;131 132 var car={id:this.id,name:this.name,ctime:new Date()}133 this.list.push(car)134 this.id=this.name=''135 },136 del(id){//根据Id删除数据137 //分析:138 //1.如何根据Id,找到要删除这一项的索引139 //2.如果找到索引了,直接调用数组的splice方法140 141 /* this.list.some((item,i)=>{142if(item.id==id){143 this.list.splice(i,1)144 //在数组的some方法中,如果return true,就会立即终止这个数组的后续循环145 return true;146}147 })*/148 149 var index = this.list.findIndex(item=>{150if(item.id==id){151 return true;152}153 })154 // console.log(index)155 this.list.splice(index,1)156 },157 158 search(keywords){//根据关键字,进行数据的搜索159 /* var newList=[]160 this.list.forEach(item=>{161if(item.name.indexOf(keywords)!=-1){162 newList.push(item)163}164 })165 return newList*/166 //注意:forEach some filter findIndex 这些都属于数组的新方法,167 //都会对数组中的每一项,进行遍历,执行相关操作;168 return this.list.filter(item=>{169// if(item.name.indexOf(keywords)!=-1)170//注意:在ES6中,为字符串提供了一个新方法,叫做String.prototype.includes('要包含的字符串')171//如果包含,则返回true,否则返回false172//contains173if(item.name.includes(keywords)){174 return item175}176 })177 }178 }179 });180 181 //如何自定义一个私有的过滤器()182 var vm2=new Vue({183 el:'#app2',184 data:{185dt:new Date() 186 },187 methods:{},188 filters:{//定义私有过滤器 过滤器有两个条件【过滤器名称和处理函数】189 //过滤器调用的时候,采用的是就近原则,如果有过滤器和全局过滤器名称一致了,这时候 有线调用私有过滤器190 dateFormat:function(dateStr,pattern=''){191 //根据给定的时间字符串,得到特定的时间192 var dt = new Date(dateStr)193 194//yyyy-mm-dd195var y=dt.getFullYear() 196var m=(dt.getMonth()+1).toString().padStart(2,'0')197var d=(dt.getDate()).toString().padStart(2,'0')198 199 200if(pattern.toLowerCase() ==='yyyy-mm-dd'){201 return `${y}-${m}-${d}`202}else{203 var hh=dt.getHours().toString().padStart(2,'0')204 var mm=dt.getMinutes().toString().padStart(2,'0')205 var ss=dt.getSeconds().toString().padStart(2,'0')206 207 return `${y}-${m}-${d} ${hh}:${mm}:${ss} ~~~~~~~`208}209 }210 }211 212 })213 214 215</script>216 </body>217 </html>