【相关文章】
过滤器
Vue允许你自定义过滤器，可被用作一些常见的文本格式化。过滤器可以用在2个地方：mustache插值和v-bind表达式。过滤器应该被添加在Javascript表达式的尾部，有管道符 "|"指示。
- 过滤器定义语法
- 过滤器的function的第一个参数，已被规定了，永远是过滤器管道符前面传递过来的数据
Vue.filter('过滤器的名称',function(data){ });
示例
<!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> <link href="https://cdn.bootcss.com/twitter-bootstrap/3.3.7/css/bootstrap.css" rel="stylesheet"> <script src="../lib/vue.js"></script> </head> <body> <div id="app"> <!-- 可为过滤器传递多个参数，以及使用多个过滤器 --> <p>{{ msg | msgFormat('我') | test }}</p> </div> <script> // 定义一个Vue全局的过滤器，名字叫做 msgFormat Vue.filter('msgFormat',function(msg,arg){ return msg.replace(/你/g,arg); }); Vue.filter('test',function(msg){ return msg + '===' }) var vm = new Vue({ el: '#app', data: { msg: '曾经的你' }, methods: {} }); </script> </body> </html>
- 全局过滤器：所有的VM实例都能共享
<!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> <link href="https://cdn.bootcss.com/twitter-bootstrap/3.3.7/css/bootstrap.css" rel="stylesheet"> <script src="../lib/vue.js"></script> </head> <body> <div id="app"> <div class="panel panel-primary"> <div class="panel-heading"> <h3 class="panel-title">添加品牌</h3> </div> <div class="panel-body form-inline"> <label for=""> id: <input type="text" class="form-control" v-model="id"> </label> <label for=""> name: <input type="text" class="form-control" v-model="name"> </label> <!-- 在Vue中，时使用事件绑定机制，为元素指定处理函数的时候，如果加了小括号，就可以给函数传参了 --> <input type="button" value="添加" class="btn btn-primary" @click="add"> <label for=""> 搜索关键字: <input type="text" value="搜索" v-model="keywords"> </label> </div> </div> <table class="table table-bordered table-hover table-striped"> <thead> <tr> <th>id</th><th>Name</th><th>Ctime</th><th>Operation</th> </tr> </thead> <tbody> <!-- 之前，v-for中的数据都是直接从data上的list中直接渲染过来的 --> <!-- 现在，我们自定义了一个search方法，同时，把所有的关键字通过传参的形式，传递给了search方法 --> <!-- 在search方法内部，通过执行for循环，把所有符合搜索关键字的数据，保存到一个新数组中，返回 --> <tr v-for="item in search(keywords)" :key="item.id"> <td v-text="item.id"></td> <td v-text="item.name"></td> <td>{{ item.ctime | dateFormat('')}}</td> <td> <input type="button" value="删除" @click.prevent="del(item.id)"> </td> </tr> </tbody> </table> </div> <script> //全局过滤器：所有的VM实例都能共享 Vue.filter('dateFormat',function(dateStr,pattern=''){ //根据给定的时间字符串，得到特定的时间 let dt = new Date(dateStr); // yyyy-mm-dd let y = dt.getFullYear(); let m = dt.getMonth() + 1; let d = dt.getDate(); if(pattern && pattern.toLowerCase() === 'yyyy-mm-dd') { return `${y}-${m}-${d}`; }else { let h = dt.getHours(); let m = dt.getMinutes(); let s = dt.getSeconds(); return `${y}-${m}-${d} ${h}:${m}:${s}`; } }) var vm = new Vue({ el: '#app', data: { id: '', name: '', keywords: '', list: [ {id:1,name:'科比',ctime: new Date()}, {id:2,name:'詹姆斯',ctime: new Date()} ] }, methods: { add() { //分析: //1.获取到id和name,直接从data上获取 //2.组织处一个对象 //3.把这个对象，调用数组的相关方法，添加到当前data上的list中 //4.注意：在Vue中，已经实现数据的双向绑定，每当我们修改了data中的数据，Vue会默认监听到数据的改动，自动把最新的数据，应用到页面上 let data = {id:this.id,name:this.name,ctime:new Date}; this.list.push(data) this.id = this.name = '';//清空 }, del(id) { // this.list.some((item,i)=>{ // if(item.id === id) { // this.list.splice(i,1); // return true; // } // }) let index = this.list.findIndex(item => { if(item.id === id) { return true; } }); this.list.splice(index,1); }, search(keywords) {//根据关键字进行数据的搜索 // let newList = []; // this.list.forEach(item=>{ // if(item.name.indexOf(keywords) !== -1) { // newList.push(item); // } // }) // if(keywords.trim() === '') { // return this.list; // }else { // return newList; // } return this.list.filter(item => { return item.name.includes(keywords) === true ? item : false; }) } } }) </script> </body> </html>
自定义私有过滤器(局部): filters对象属性
- 过滤器调用的时候，采用的是就近原则，如果私有过滤器和全局过滤器名称一致，这时优先调用私有过滤器
var vm = new Vue({ el: '#app', data: { dt : new Date() }, methods: {}, filters: { //自定义私有过滤器，过滤器有两个条件 ：【过滤器名称 、处理函数】 dateFormat: function(dateStr, pattern = '') { // todos } } })
字符串padStart、padEnd方法
ES6 中字符串新方法： String.prototype.padStart(maxLength, fillString= ’ ’ )或
String.prototype.padEnd(maxLength,fillString=’ ')来填充字符串
// YYYY-MM-DD var dt = new Date(dateStr); var y = dt.getFullYear() var m = (dt.getMonth()+1).toString().padStart(2,'0');//补0 var d = (dt.getDate().toString().padStart(2,'0'));
自定义按键修饰符
<input type="text" v-model="name" @keyup.enter="add" />
Vue内置按键修饰符：
- enter
- tab
- delete (删除、退格 键 )
- esc
- space
- up
- down
- left
- right
除此之外，可以通过全局config.keyCodes对象自定义键值修饰符别名：
Vue.config.keyCodes.f1 = 112; //112是f1的键盘码，可以在网上查询 //使用 v-on:keyup.f1="" 或 v-on:key.112=""
指令
自定义全局指令: 使用Vue.directive() 定义全局的指令
- 参数1：指令的名称，注意：在定义的时候，指令的名称前面，不需要加 v- 前缀；但是，在调用的时候，必须在指令名称前加上 v- 前缀来进行调用。
- 参数2：是一个对象，这个对象身上，有一些指令相关的函数，这些函数可以在特定的阶段，执行相关的操作
- 注意：在每个函数中，第一个参数，永远是el，表示被绑定了指令的那个元素，这个el参数，是一个元素的js对象
<input v-focus /> Vue.directive('focus',{ // 每当指令绑定到元素上的时候，会立即执行这个bind函数 【只执行一次】。和样式有关的行为，可以放在这个函数。 bind: function(el,binding,vnode,oldVnode) { //在元素刚绑定了指令的时候，还没有插入到DOM中区，这时候调用focus方法不起作用 //因为一个元素，只有插入DoM后，才能获取焦点 //样式，只要通过指令绑定给了元素，不管这个元素有没有被插入到页面中去，这个元素肯定有了一个内联样式 el.style.color = 'red' }, //当元素插入到Dom中时执行inserted 【触发1次】。和js行为有关的行为，最好放在这个函数执行，防止不生效 inserted: function(el,binding,vnode,oldVnode) { el.focues(); }, // 当VNode更新的时候，会执行updated 【可能会触发多次】 updated: function(el,binding,vnode,oldVnode) { } }) //除此之外，还可以给指令传值 <input v-color="'blue'" />
自定义私有指令:使用 directives属性
<h3 v-fontweight="200"> var vm = new Vue({ el: '#app', directives: { 'fontweight': { bind: function(el,binding,vnode,oldVnode){ el.style.fontWeight = binding,value; } } } })
指令简写：等同于 把代码写到 bind 和 update 中去
var vm = new Vue({ el: '#app', directives: { //这个function 等同于 把代码写到 bind 和 update 中去 'fontsize': function(el,binding,vnode,oldVnode){ el.style.fontSize = parseInt(binding,value) + 'px'; } } })
