本章知识点 归纳:
1.定义全局过滤器 以及 私有过滤器
2.定义全局指令 以及 定义私有指令
3.定义键盘修饰符
4.v-for 的函数引入
5.字符串的incluede 方法,.toString().padStart(2,'0') 的字符串补全方法
6.通过过滤器定义日期格式
需要vue.js 以及 bootstrap
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <link rel="stylesheet" href="css/bootstrap.min.css"> <script src="js/vue.js"></script> </head> <body> <!-- 过滤器 vue允许你自定义过滤器,可被用作一些常见文本格式化,过滤可以用在两个地方, mustachc差值 , v-bind表达式,过滤器应该添加在javascript 表达式的尾部,由管道符指示 过滤器分为 全局过滤器以及私有过滤器 全局过滤拉起是定义在script中 而私有过滤器是定义在vue实例当中的 filters 方法中的 定义过滤器 有两个条件[过滤器名称和处理函数] 过滤器调用的时候,采用的就近原则,如果私有过滤器和全局过滤器名称一致了, 这时候优先调用私有过滤器 --> <div id="app"> <div class="panel panel-primary"> <div class="panel-heading"> <h3 class="pannel-title">添加品牌</h3> </div> <div class="panel-body form-inline"> <label> ID: <input type="text" class="form-control" v-model="id"> </label> <label> Name: <!-- <input type="text" class="form-control" v-model="name" @keyup.enter="add"> --> <!-- keyup.113 113对应F2 的键盘码 --> <!-- <input type="text" class="form-control" v-model="name" @keyup.113="add"> --> <input type="text" class="form-control" v-model="name" @keyup.f2="add"> </label> <input type="button" value="添加" class="btn btn-primary" @click="add"> <label> Search: <input type="text" class="form-control" v-model="searchname" v-focus v-color='"blue"'> </label> </div> </div> <br> <table class="table table-bordered table-hover table-striped"> <tr> <th><input type="checkbox"></th> <th>ID</th> <th>Name</th> <th>Ctime</th> <th>action</th> </tr> <tr v-for='i in search(searchname)' :key='i.id'> <td><input type="checkbox"></td> <td >{{i.id}}</td> <td v-color='"blue"'>{{i.name}}</td> <td >{{i.ctime | dateformat }}</td> <td ><a href="#" @click.prevent="del(i.id)">删除</a></td> </tr> </table> <br> </div> <div id='app2'> {{msg|infodata}} </div> <script> // 全局过滤器 定义以及使用 Vue.filter('dateformat',function(datestr,pattern=''){ var dt = new Date(datestr) var y = dt.getFullYear() var m = dt.getMonth()+1 var d = dt.getDate().toString().padStart(2,'0') // return y+'-'+ m +'-'+ d if(pattern.toLowerCase() === 'yyyy-mm-dd'){ return `${y}-${m}-${d}` }else{ var hh = dt.getHours().toString().padStart(2,'0') var mm = dt.getMinutes().toString().padStart(2,'0') var ss = dt.getSeconds().toString().padStart(2,'0') return `${y}-${m}-${d} ${hh}:${mm}:${ss}` } }); // 1.X 版本的 自定义全局键盘码(键盘修饰符) Vue.config.keyCodes.f2 = 113; // 使用Vue.directive()定义全局的指令 v-focus Vue.directive('focus',{ // 和行为有关的操作交给inserted操作 inserted(el){ el.focus() }, }) Vue.directive('color',{ //跟样式有关的可以交给bind操作 bind(el,binding){ el.style.color = binding.value } }) // 使用directive() 定义全局的指令 // 其中参数: // 1.指令名称,注意在定义的时候,指令的名称前面,都不要加v-前缀,但是调用的时候必须在指令名称前面加上v- 前缀进行调用 // 2.对象,这个对象身上,有一些指令的函数,这些函数可以在特定的阶段,执行相关的操作 // 对象中,5个钩子函数: // bind,inserted,updated,componentUpdated,unbind // 钩子函数参数: // el,binding( name,value,oldvalue,expression,arg modifiers ),vnode,oldvnode // 实例一 var vm = new Vue({ el:'#app', data:{ id:'', name:'', searchname:'', list:[ {id:1,name:'alex',ctime:new Date()}, {id:2,name:'anex',ctime:new Date()}, {id:3,name:'aexk',ctime:new Date()}, ], msg:'abc', }, methods:{ add(){ this.list.push({id:this.id,name:this.name,ctime:new Date}) this.name = this.id = '' }, del(id){ // 方式一(循环list比对值) // this.list.some((item,i)=>{ // if(item.id == id){ // this.list.splice(i,1) // return true; // // // .splice(a,b,c) // // 参数a为下标值,参数b为步长,参数c为替换的值 // } // }) // 方式二(查找对应的值得方法) var index = this.list.findIndex(i =>{ if(i.id == id){ return true } }) this.list.splice(index,1) }, search(searchname){ // // 方式一 // var newlist = [] // this.list.forEach(k => { // if(k.name.indexOf(searchname) != -1){ // newlist.push(k) // } // }) // return newlist // 方式二 return this.list.filter(k => { if(k.name.includes(searchname)){ return k } }) // 注意:forEach some filter findIndex 这些都属于数组的新方法, // 都会对数组中的每一项 进行遍历 执行相关的操作 // // ES6 中 为了字符串提供了一个新方法,叫做 String.prototype.includes(包含字符串) // 包含 则返回 true // 不包含 则返回 false }, }, directives:{ 'color0':{ bind(el,bd){ el.style.color = db.value } }, }, }) // 实例二 var vu = new Vue({ el:'#app2', data:{ msg:'ahello !', }, methods:{ }, // 私有过滤器(局部过滤器) filters:{ infodata(msg){ return msg.replace('a','b') }, } }) </script> </body> </html>