【Vue】（2）基础知识 | 过滤器 | 指令

2023-10-07 18:55:10 浏览数 (1)
过滤器

Vue允许你自定义过滤器，可被用作一些常见的文本格式化。过滤器可以用在2个地方：mustache插值和v-bind表达式。过滤器应该被添加在Javascript表达式的尾部，有管道符 "|"指示。

  • 过滤器定义语法
  • 过滤器的function的第一个参数，已被规定了，永远是过滤器管道符前面传递过来的数据
代码语言：javascript复制
Vue.filter('过滤器的名称',function(data){
});
示例
代码语言：javascript复制
<!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实例都能共享
代码语言：javascript复制
<!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对象属性
  • 过滤器调用的时候，采用的是就近原则，如果私有过滤器和全局过滤器名称一致，这时优先调用私有过滤器
代码语言：javascript复制
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=’ ')来填充字符串

代码语言：javascript复制
// 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'));
自定义按键修饰符
代码语言：javascript复制
<input type="text" v-model="name" @keyup.enter="add" />

Vue内置按键修饰符：

  • enter
  • tab
  • delete (删除、退格 键 )
  • esc
  • space
  • up
  • down
  • left
  • right

除此之外，可以通过全局config.keyCodes对象自定义键值修饰符别名：

代码语言：javascript复制
Vue.config.keyCodes.f1 = 112; //112是f1的键盘码，可以在网上查询
//使用
v-on:keyup.f1="" 或 v-on:key.112=""
指令
自定义全局指令: 使用Vue.directive() 定义全局的指令
  • 参数1：指令的名称，注意：在定义的时候，指令的名称前面，不需要加 v- 前缀；但是，在调用的时候，必须在指令名称前加上 v- 前缀来进行调用。
  • 参数2：是一个对象，这个对象身上，有一些指令相关的函数，这些函数可以在特定的阶段，执行相关的操作
  • 注意：在每个函数中，第一个参数，永远是el，表示被绑定了指令的那个元素，这个el参数，是一个元素的js对象
代码语言：javascript复制
<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属性
代码语言：javascript复制
<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 中去
代码语言：javascript复制
var vm = new Vue({
	el: '#app',
  directives: {
    //这个function 等同于 把代码写到 bind 和 update 中去
    'fontsize': function(el,binding,vnode,oldVnode){
        el.style.fontSize = parseInt(binding,value)   'px';
      }
  }
})
对象 函数 数据 搜索 字符串

0 人点赞