vue过滤器和修饰符

目录

搭建项目的基本界面的结构

实现表格的渲染

实现新增的功能

实现删除的功能

实现过滤的功能

Vue调试工具安装

过滤器

键盘修饰符

注册一个监听按键事件

使用按键别名

自定义按键别名

自定义指令

---

搭建项目的基本界面的结构

引入bootstrap

引入vue

实现表格的渲染

使用v-for进行表单的渲染

注意设置key属性

<tr v-for='item in list' :key="item.id">
    <td>{{item.id}}</td>
    <td v-text="item.name"></td>
    <!-- 用法就是在变量后面加上竖线 加上过滤器的名称 -->
    <td>{{item.ctime | dateFormat('')}}</td>
    <td>
        <!-- 阻止一下a标签的默认事件 -->
        <a href="#" @click.prevent='del(item.id)'>删除</a>
    </td>
</tr>

实现新增的功能

数据绑定，为了能在后面拿到这数据。

定义一个方法，给按钮添加一个事件。

        1.点击这个按钮之后为什么会进行页面的刷新，因为这个按钮是定义在表单里的，所以点击这个按钮会触发表单的提交，这个时候可以组织按钮的默认事件。

        2.绑定事件的方法可以加括号也可以不加，加上括号之后可以给这个方法传递参数。

add() {
    console.log(this.id, this.name);
    // 表单校验
    // 1、通过遍历的方式实现
    // let flag = true;
    // for (let item of this.list) {
    //     if (item.id == this.id) {
    //         flag = false;
    //     }
    // }
    // if (!flag) {
    //     alert('您输入的id已经存在了')
    //     return;
    // }
    // 1、使用es6的新语法
    let flag = this.list.some(item => {
        if (item.id == this.id) {
            return true;
        } else {
            return false;
        }
    })

    if (flag) {
        alert('您输入的id已经存在了')
        return;
    }

    // 1.拿到输入的数据
    // 2.用这个数据构造一个对象
    // 3.可以调用数组的方法把这个对象，插入到数组里
    // 4.因为vue已经帮我们实现了双向绑定。Vue会监听数据的改变，数据改变之后，vue会帮我们渲染到指定地方。
    // 如果能理解第四步，我们的vue就算入门了，我们只关心数据是怎么变的，我们业务逻辑是什么就行了
    let obj = {
        id: this.id,
        name: this.name,
        ctime: new Date()
    }
    this.list.push(obj);
    // this.id = '';
    // this.name = '';
    this.id = this.name = '';
}

实现删除的功能

1. 获取删除元素的索引
   1. 要想获取索引，需要先获取id，这个id可以传在调用方法的时候传进
   2. 根据id获取索引
      1. 遍历的方式
      2. 通过es6提供的some方法
      3. 调用数组的方法进行删除
      4. 使用数组的splice方法

del(id) {
    // 删除元素的id
    // console.log(id);
    // 数组中删除，先知道这个元素的索引
    // 通过这个splice()方法我们就可以把元素从数组中删除
    // 1.获取索引
    // 最简单的方法
    // for(let item of this.list){
    //     if(item.id == id){
    //         // indexOf会找到数组的下标，如果不存在就返回-1
    //         console.log(this.list.indexOf(item))
    //         break;
    //     }
    // }
    // 还可以使用foreach遍历
    //2.使用some方法
    // this.list.some((item, index) => {
    //     if (item.id == id) {
    //         console.log(index)
    //         return true;
    //     }
    // })
    // 3. es6获取数组索引的方法findIndex()
    let index = this.list.findIndex(item => {
        if (item.id == id) return true;
    })
    // 里面的两个参数，第一个是下标，第二个是删除的个数
    this.list.splice(index, 1);

实现过滤的功能

1.先去获取输入的内容

2. 我们应该给列表加一层过滤，返回满足条件的列表

注意：使用v-for遍历的时候可以用一个方法代替数组，这个方法需要返回一个新数组

// html
<tr v-for='item in searchList()' :key="item.id">
    <td>{{item.id}}</td>
    <td v-text="item.name"></td>
    <!-- 用法就是在变量后面加上竖线 加上过滤器的名称 -->
    <td>{{item.ctime}}</td>
    <td>
        <!-- 阻止一下a标签的默认事件 -->
        <a href="#" @click.prevent='del(item.id)'>删除</a>
    </td>
</tr>

// js...
searchList() {
    // 根据我们输入的关键字去构建一个新的列表
    // 1.遍历这个数组，拿到一个新的数组
    // let newList = [];
    // this.list.forEach(item => {
    //     if (item.name.includes(this.keyword)) {
    //         newList.push(item);
    //     }
    // })
    // return newList;
    // 2.ES6里的filter方法
    // filter方法直接会返回一个新的数组
    let newList = this.list.filter(item => {
        // filter的回调方法中返回的是bool值，如果这个bool值是true的话就会被加入到新的数组中
        if (item.name.includes(this.keyword)) {
            return true;
        }
    })
    return newList;
}

Vue调试工具安装

• 扩展程序
• 打开开发者模式
• 点解压已经加载过的扩展程序
• 选择发给你们的扩展文件夹

过滤器

概念

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

作用

在我们页面显示值之前加一层过滤，展示我们过滤后的值

注意事项

过滤器可以用在两个地方：双花括号插值和 v-bind 表达式

使用语法

{{变量 | 过滤器名}}

{{变量 | 过滤器 | 另一个过滤器}} 可以同时使用多个过滤器，后面过滤器的data就是前面表达式传过来的值

定义语法

全局定义

通过Vue提供的filter方法定义：Vue.filter()

参数：过滤器的名字或过滤器执行函数

Vue.filter('dateFormat', function (data, format) {
    // 日期格式化
    console.log(format);
    // 转成date对象
    let time = new Date(data);
    // 字符串有个方法padStart,通过这个方法我们就可以把位数补到两位
    let y = time.getFullYear();
    // 这里需要注意的地方，月份是从0开始排序的
    let m = (time.getMonth() + 1).toString().padStart(2, '0');
    // getDay应该是获取了星期几
    // getDate获取日期
    let d = time.getDate().toString().padStart(2, '0');
    // console.log(y);
    // console.log(m);
    // console.log(d);
    if (format == 'yyyy-mm-dd') {
        return `${y}-${m}-${d}`;
    } else {
        // 获取时分秒
        let h = time.getHours().toString().padStart(2, '0');;
        let min = time.getMinutes().toString().padStart(2, '0');;
        let secondes = time.getSeconds().toString().padStart(2, '0');;

        return `${y}-${m}-${d} ${h}:${min}:${secondes}`;
    }
})

私有定义

filters这个是实例化Vue的一个参数，和data,methods平级的，里面放的就是我们这个实例的私有过滤器。

new Vue({
    el: '#app',
    filters: {
        dateFormat(data, format) {
            ...
        }
    }
});

注意事项

函数的第一个参数都是data，也就是我们要过滤的值。

过滤器可以自定义一些参数。

过滤器函数的返回值就是最终显示的值

键盘修饰符

事件处理 — Vue.js (vuejs.org)

注册一个监听按键事件

监听所有按键：v-on:keyup

监听指定按键：v-on:keyup.按键码

注意：每个键盘按键都会对应一个键盘码，可以参照这个网站按键码对应网址

使用按键别名

vue提供的按键别名

• .enter
• .tab
• .delete (捕获“删除”和“退格”键)
• .esc
• .space
• .up
• .down
• .left
• .right

举例：如何使用v-on:keyup.按键别名？

答：监听enter按键；v-on:keyup.enter

自定义按键别名

Vue.config.keyCodes.f1 = 112

自定义指令

全局定义

使用这个方法进行全局定义：Vue.directive()

参数：

1. 指令的名字（定义的时候不加v-,使用vue指令的时候加上v-）

2. 对象，里面包含三个钩子方法

1. bind 只调用一次，指令第一次绑定到元素时调用。在这里可以进行一次性的初始化设置
2. inserted 这个元素已经渲染到界面上之后执行
3. update 当元素有更新的时候执行

3. 这三个方法的参数有哪些

1. el：指令所绑定的元素，可以用来直接操作 DOM 。
2. binding：一个对象，包含以下属性：
3. name：指令名，不包括 v- 前缀。
4. value：指令的绑定值，例如：v-my-directive="1 + 1" 中，绑定值为 2。
5. oldValue：指令绑定的前一个值，仅在 update 和 componentUpdated钩子中可用。无论值是否改变都可用。

// html内容
<div v-color="'#000'+'333'">你好</div>

// js内容
Vue.directive('color', {
    // 这个三个方法第一个参数都是el，原生的dom对象
    // vue检测到指令绑定到界面元素的时候会执行这个方法
    bind(el, bind) {
        // 这些样式就相当于我们这个元素属性
        el.style.color = bind.value;
    },
    // 当我们这个元素插入到dom树的时候，会调用这个方法
    // 在执行这个方法的时候界面上的元素已经显示出来
    inserted(el) {

    },
    // 当组件进行更新的时候会调用这个方法
    update(el) {

    }
})

私有定义

1. 实例里有个directives属性，这个属性是个对象
2. 里面放的就是我们指令，这个对象键就是指令的名字，后面的对象就是指令的内容，和全局定义是一样的
3. 简写直接写一个函数，函数名就是指令的名字，其他和全局定义是一样的。

var vm = new Vue({
    el: '#app',
    directives: {
        color(el, bind) {
            el.style.color = 'blue';
        },
        focus: {
            inserted(el) {
                el.focus();
            },
            bind(el) {

            },
            updated() {

            }
        }
    }
})