vue的过滤器、修饰符和自定义属性

• 1、过滤器

  •         

            概念

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

    •         作用

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

      •         

                注意事项

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

        •         

                  使用语法

          •         {{变量 | 过滤器名}}

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

              •         定义语法

                •                 全局定义：

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

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

                      •                 私有定义：

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

                        • 2、键盘修饰符

                        • 监听所有按键：v-on:keyup
                        • 监听指定按键：v-on:keyup.按键码
                      • vue提供的按键别名
                        •         .enter
                          •         .tab
                            •         .delete (捕获“删除”和“退格”键)
                              •         .esc
                                •         .space
                                  •         .up
                                    •         .down
                                      •         .left
                                        •         .right
                                        • 列：监听enter按键；v-on:keyup.enter

                                        • 自定义按键别名

                                        • Vue.config.keyCodes.f1 = 112

                                        • 3、自定义指令

                                        • 全局定义

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

                                        • 参数：

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

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

                                        • bind 只调用一次，指令第一次绑定到元素时调用。在这里可以进行一次性的初始化设置
                                        • inserted 这个元素已经渲染到界面上之后执行
                                        • update 当元素有更新的时候执行
                                        • el：指令所绑定的元素，可以用来直接操作 DOM 。
                                        • binding：一个对象，包含以下属性：
                                        • name：指令名，不包括 v- 前缀。
                                        • value：指令的绑定值，例如：v-my-directive="1 + 1" 中，绑定值为 2。

                                        • oldValue：指令绑定的前一个值，仅在 update 和 componentUpdated钩子中可用。

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

                                        • el：指令所绑定的元素，可以用来直接操作 DOM 。
                                        • binding：一个对象，包含以下属性：

                                          • oldValue：指令绑定的前一个值，仅在 update 和 componentUpdated钩子中可用

                                          • name：指令名，不包括 v- 前缀。

                                          • value：指令的绑定值，例如：v-my-directive="1 + 1" 中，绑定值为 2。

                                        • 私有定义

                                        • 实例里有个directives属性，这个属性是个对象

                                        • 里面放的就是我们指令，这个对象键就是指令的名字，后面的对象就是指令的内容，和全局定义是一样的

                                        • 简写直接写一个函数，函数名就是指令的名字，其他和全局定义是一样的