第二章 Vue快速入门-- 28 自定义按键修饰符
生活随笔
收集整理的這篇文章主要介紹了
第二章 Vue快速入门-- 28 自定义按键修饰符
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
?
?
?事件處理-按鍵修飾符
?
?
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=" https://cdn.jsdelivr.net/npm/vue"></script> 10 <!-- <link rel="stylesheet" href="./lib/bootstrap.css"> --> 11 <link rel="stylesheet" href=" https://cdn.jsdelivr.net/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實例都共享 81 Vue.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}-$ozvdkddzhkzd` 93 94 if(pattern.toLowerCase() ==='yyyy-mm-dd'){ 95 return `${y}-${m}-$ozvdkddzhkzd` 96 }else{ 97 var hh=dt.getHours() 98 var mm=dt.getMinutes() 99 var ss=dt.getSeconds() 100 101 return `${y}-${m}-$ozvdkddzhkzd ${hh}:${mm}:${ss}` 102 } 103 104 }) 105 106 //自定義全局按鍵修飾符 107 Vue.config.keyCodes.f2=113 108 109 110 //創建 Vue 實例，得到 ViewModel 111 var vm = new Vue({ 112 el:'#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)=>{ 142 if(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=>{ 150 if(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=>{ 161 if(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，否則返回false 172 //contains 173 if(item.name.includes(keywords)){ 174 return item 175 } 176 }) 177 } 178 } 179 }); 180 181 //如何自定義一個私有的過濾器（） 182 var vm2=new Vue({ 183 el:'#app2', 184 data:{ 185 dt:new Date() 186 }, 187 methods:{}, 188 filters:{//定義私有過濾器 過濾器有兩個條件【過濾器名稱和處理函數】 189 //過濾器調用的時候，采用的是就近原則，如果有過濾器和全局過濾器名稱一致了，這時候 有線調用私有過濾器 190 dateFormat:function(dateStr,pattern=''){ 191 //根據給定的時間字符串，得到特定的時間 192 var dt = new Date(dateStr) 193 194 //yyyy-mm-dd 195 var y=dt.getFullYear() 196 var m=(dt.getMonth()+1).toString().padStart(2,'0') 197 var d=(dt.getDate()).toString().padStart(2,'0') 198 199 200 if(pattern.toLowerCase() ==='yyyy-mm-dd'){ 201 return `${y}-${m}-$ozvdkddzhkzd` 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}-$ozvdkddzhkzd ${hh}:${mm}:${ss} ~~~~~~~` 208 } 209 } 210 } 211 212 }) 213 214 215 </script> 216 </body> 217 </html>?
轉載于:https://www.cnblogs.com/songsongblue/p/10990782.html
總結
以上是生活随笔為你收集整理的第二章 Vue快速入门-- 28 自定义按键修饰符的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 限流神器Sentinel，不了解一下吗？
- 下一篇： 手把手教你webpack4.x从零开始搭