Vue,品牌列表案例（仅添加,删除，搜索，全局过滤器，私有过滤器，日期填充，自定义按键修饰符，全局自定义指令文本框获取焦点）...

最新推荐文章于 2024-06-25 08:13:54 发布
weixin_30405421
最新推荐文章于 2024-06-25 08:13:54 发布
阅读量129
点赞数
文章标签： javascript ViewUI
原文链接：http://www.cnblogs.com/wo1ow1ow1/p/11051026.html
版权
Vue,品牌列表案例（仅添加,删除，搜索，全局过滤器，私有过滤器，日期填充，自定义按键修饰符，全局自定义指令文本框获取焦点）

  1 <!DOCTYPE html>
  2 <html>
  3     <head>
  4         <meta charset="utf-8">
  5         <title></title>
  6         <script src="../js/vue.js"></script>
  7         <link rel="stylesheet" type="text/css" href="../css/bootstrap.css" />
  8     </head>
  9     <body>
 10         <div id="app">
 11             
 12             
 13             <div class="panel panel-primary">
 14                 <div class="panel-heading">
 15                     <h3 class="panel-title">添加品牌</h3>
 16                 </div>
 17                 <!-- form-inline 填在父元素里， 里面的子元素 占一行 -->
 18                 <div class="panel-body form-inline">
 19                     <label>
 20                         Id:
 21                         <input type="text" class="form-control" v-model="id">
 22                     </label>
 23                     
 24                     <label>
 25                         <!-- @keyup.enter 回车键抬起是触发add方法 keyup监听键盘抬起事件 .enter是确定了回车键而不是别的键 -->
 26                         Name:
 27                         <input type="text" class="form-control" v-model="name" @keyup.f2="add">
 28                     </label>
 29                 
 30                     <!-- 在Vue中，使用事件绑定机制，为元素指定处理函数的时候，如果加了小括号，就可以给函数传参了
 31                       不加（）也可以， 只不过不能传参-->
 32                     <input type="button" class="btn btn-primary" value="添加" @click="add()"/>
 33                     
 34                     
 35                     <label>
 36                         搜索名称关键字：
 37                         <!-- 注意： Vue中所有的指令， 在调用的时候 都以 v- 开头 -->
 38                         <input type="text" class="form-control" v-model="keywords" v-focus="search" />
 39                     </label>
 40                 </div>
 41             </div>
 42             
 43             
 44             <table class="table table-bordered table-hover table-striped">
 45                 <thead>
 46                     <tr>
 47                         <th>Id</th>
 48                         <th>Name</th>
 49                         <th>Ctime</th>
 50                         <th>Operation</th>
 51                     </tr>
 52                 </thead>
 53                 <tbody>
 54                     <!-- 之前， v-for 中的数据， 都是直接从 data 上的list中直接渲染过来的 -->
 55                     <!-- 现在， 我们自定义了一个 search 方法，同时， 把 所有的关键字，通过传参的形式，传递给了
 56                      search 方法 -->
 57                     <!-- 在 search 方法内部，通过 执行 for 循环， 把所有符合 搜索关键字的数据，保存到 一个新数组
 58                      中， 返回-->
 59                     <tr v-for="item in search(keywords)" :key="item.id">
 60                         <td>{{ item.id }}</td>
 61                         <td>{{ item.name }}</td>
 62                         <td>{{ item.ctime | dateFormat() }}</td>
 63                         <td>
 64                             <!-- 使用 .prevent 阻止默认行为， 否则超链接跳转页面  -->
 65                             <a href="#" @click.prevent="del(item.id)">删除</a>
 66                         </td>
 67                     </tr>
 68                 </tbody>
 69             </table>
 70         </div>
 71     
 72         <div id="app1">
 73             <h3>{{ dt | dateFormat}} + 利用了全局过滤器</h3>
 74         </div>
 75             
 76         <div id="app2">
 77             <h3>{{ dt | dateFormat}} + 利用了私有过滤器</h3>
 78         </div>
 79     </body>
 80 </html>
 81 <script>
 82         // 全局的过滤器,进行时间的格式化
 83         // 所谓的全局过滤器, 就是所有的VM实例都共享的
 84         // 注意 pattern ="" 这块是传值的部分,如果后台传值 传的是 "yyyy-mm-ss"格式就会显示 "yyyy-mm-ss"格式, 如果是 "yyyy-mm-ss hh:mm:ss" 
 85         // 则会显示 "yyyy-mm-ss hh:mm:ss" 下面有 if 判断
 86         Vue.filter('dateFormat', function (dateStr, pattern =""){
 87             // 根据给定的时间字符串, 得到特定的时间
 88             var dt = new Date(dateStr)
 89             
 90             // 日期格式 yyyy-mm-dd
 91             // 得到一个四位的年份
 92             var y = dt.getFullYear()
 93             
 94             //
 95             var m = dt.getMonth() + 1
 96             
 97             // getDate得到的是日期, getDay得到的是星期
 98             var d = dt.getDate()
 99             
100             // return y + '-' + m + '-' + d
101             
102             // .toLowerCase 统一转成小写
103             //判断在这里 依照格式判断
104             if(pattern.toLowerCase() === 'yyyy-mm-dd'){
105                 return `${y}-${m}-${d}`
106             }else{
107                 var hh = dt.getHours()
108                 var mm = dt.getMinutes()
109                 var ss = dt.getSeconds()
110                 
111                 return `${y}-${m}-${d} ${hh}:${mm}:${ss}`
112             }
113         })
114         
115     
116         //自定义全局按键修饰符
117         Vue.config.keyCodes.f2 = 113
118         
119         // 使用 Vue.directive() 定义全局的指令 v-focus
120         // 其中: 参数1 :  指令的名称, 注意, 在定义的时候, 指令的名称前面, 不需要加 v- 前缀
121         // 但是: 在调用的时候, 必须 在指令名称前 加上 v- 前缀来进行调用
122         // 参数2: 是一个对象, 这个对象身上, 有一些指令相关的函数, 这些函数可以在特定的阶段, 执行相关的操作
123         Vue.directive('focus', {
124             // 注意: 在每个 函数中, 第一个参数, 永远是 el , 表示 被绑定了指令的那个元素, 这个 el 参数, 是一个原生的JS对象（一个DOM对象） 
125             bind: function(){  //每当指令绑定到元素上的时候, 会立即执行这个 bind 函数, 只执行一次
126                 // 在元素 刚绑定了指令的时候, 还没有 插入到 DOM中去（还在内存中）, 这时候, 调用了 focus 方法没有作用
127                 // 因为, 一个元素, 只有插入DOM之后, 才能获取焦点
128                 // el.focus()
129             },
130             inserted: function(el){  //inserted 表示元素 插入到DOM中的时候, 会执行 inserted 函数 [触发1次]
131                 el.focus()
132             },
133             updated: function(){  //当VNode更新的时候, 会执行 updated, 可能会触发多次 (与bind一样， 还没有插入到DOM 元素中)
134                 
135             }
136         })
137         
138         //创建 Vue 实例, 得到 ViewModel
139         var vm = new Vue({
140             el: '#app',
141             data:{
142                 id:'',
143                 name:'',
144                 keywords:'',
145                 list:[
146                     { id: 1, name: '奔驰', ctime: new Date() },
147                     { id: 2, name: '宝马', ctime: new Date() },
148                     { id: 3, name: '五菱宏光', ctime: new Date() }
149                 ]
150             },
151             methods:{
152                 add(){
153                     // console.log("5555")
154                     //分析:
155                     //1. 获取到 id 和 name , 直接从data 上面获取
156                     //2. 组织出一个对象
157                     //3. 把这个对象, 调用 数组的 相关方法, 添加到data 的 list 中
158                     //4. 注意: 在Vue中, 已经实现了数据的双向绑定, 每当我们修改了 data 中的数据, Vue
159                     // 默认监听 数据的改动, 自动把最新的数据, 应用到页面上;
160                     
161                     // 5. 当我们意识到上面的第四步的时候,就证明大家已经入门Vue了, 我们更多的是在进行 VM中
162                     // Model 数据的操作, 同时, 在操作 Model数据的时候, 指定的业务逻辑操作
163                 
164                     var car = { id: this.id, name: this.name, ctime: new Date() }
165                     this.list.push(car)
166                     
167                     // 将输入框清空, 否则输入的内容还在
168                     this.id = this.name = ''
169                 },
170                 del(id){
171                     // 分析:
172                     // 1. 如何根据Id, 找到要删除这一项的索引
173                     // 2. 如果找到索引了, 直接调用 数组的 splice 方法
174                     
175                     // 方法一:
176                     // some 根据指定的条件判断 (循环)
177                     // this.list.some((item, i) => {
178                     //     if(item.id == id) {
179                     //         //从索引为 i的位置开始删, 删1个
180                     //         this.list.splice(i, 1)
181                     //         // 在 数组的 some 方法中,如果 return true,就会立即终止这个数组的后续循环
182                     //         return  true;
183                     //     }
184                     // })
185                     
186                     // 方法二
187                     //数组查找当前索引
188                     var index = this.list.findIndex(item => {
189                         if (item.id == id) {
190                             return true;
191                         }
192                     })
193                     console.log(index)
194                     
195                     this.list.splice(index, 1)
196                 },
197             search(keywords){  //搜索
198                 
199                 // 方法一
200                 /* var newlist = []
201                 this.list.forEach( item => {
202                     if ( item.name.indexOf(keywords) != -1) {
203                         newlist.push(item)
204                     }
205                 })
206                 return newlist */
207                 
208                 //方法二
209                 // 注意:  forEach   some   filter   findIndex   这些都属于数组的新方法
210                 //  都会对数组中的每一项, 进行遍历, 执行相关操作 
211                 
212                 return this.list.filter( item => {
213                 // var newlist = this.list.filter( item => {
214                     // if(item.name.indexOf(keywords) != -1)
215                     
216                     // 注意 : ES6中, 为字符串提供了一个新方法, 叫做 String.prototype.includes('要包含的字符串')
217                     //如果包含, 则返回 true , 否则返回 false
218                     //jq 中有个类似的方法是 contain
219                     if(item.name.includes(keywords)){
220                         return item
221                     }
222                 })
223                 
224                 // return newlist
225             },
226         }
227     });
228 
229         //利用了全局过滤器    
230         var vm2 =new Vue({
231             el: '#app1',
232             data:{
233                 dt: new Date()
234             }
235         })    
236         
237         //如何自定义一个私有的过滤器(局部)
238         var vm3 = new Vue({
239             el: '#app2',
240             data:{
241                 dt: new Date()
242             },
243             methods:{},
244             filters:{
245                    // 定义私有过滤器  过滤器有两个  条件   [过滤器名称 和 处理函数]
246                 //过滤器调用的时候, 采用的是就近原则, 如果私有过滤器和全局过滤器名称一致了, 这时候 优先调用私有过滤器
247                 dateFormat: function (dateStr, pattern = ''){
248                     //根据给定的时间字符串,得到特定的时间
249                     var dt = new Date(dateStr)
250                     
251                     //日期格式 yyyy-mm-dd
252                     //得到一个四位的年份
253                     var y = dt.getFullYear()
254                     
255                     //得到月份
256                     // String.prototype.padStart(maxlength, fillString='')  填充字符串
257                     //maxlength 是填充完总长度多少  fillString='' 表示用什么填充
258                     var m = (dt.getMonth() + 1).toString().padStart(2, '0') 
259                     
260                     //getDate 得到的是日期 getDay得到的是星期
261                     var d = dt.getDate().toString().padStart(2, '0') 
262                     
263                     // return y + '-' + m + '-' + d
264                     
265                     // .toLowerCase 统一转成小写
266                     // 判断在这里 依照格式判断
267                     if(pattern.toLowerCase() === 'yyyy-mm-dd'){
268                         return `${y}-${m}-${d}`
269                     }else{
270                         var hh = dt.getHours().toString().padStart(2, '0') 
271                         var mm = dt.getMinutes().toString().padStart(2, '0') 
272                         var ss = dt.getSeconds().toString().padStart(2, '0') 
273                         
274                         return `${y}-${m}-${d} ${hh}:${mm}:${ss}`
275                     }
276                 }
277             }
278         })
279 
280             // 过滤器的定义语法
281             // Vue.filter('过滤器的名称', function(){})
282             
283             // 过滤器中的 function ,第一个参数, 已经被规定死了, 永远都是 过滤器 管道符前面 传递过来的数据
284             // Vue.filter('过滤器的名称', function(data) {
285             //     return data + '123'
286             // })
287             
288         // 自动获取焦点, 但是Vue不推荐这么做    
289         // document.getElementById('search').focus()    
290             
291 </script>
292 
293 
294 <!-- 过滤器调用的格式   {{ name | nameope}}   再调用name 之前先调用nameope 进行处理 -->