Vue--过滤器、指令、插件

常用下载js的网址：

https://www.bootcdn.cn/

https://www.jsdelivr.com/

一、过滤器

　　vue 允许自定义过滤器，用于格式化一些常见文本（如日期等）。

1、如何创建

（1）直接使用 Vue.filter() 来创建一个过滤器（全局过滤器）。

Vue.filter('filterA ', function (value) {

  if (!value) return ''

  value = value.toString()

  return value.charAt(0).toUpperCase() + value.slice(1)

})

new Vue({

  // ...

})

（2）在 vue 内部使用 filters 来创建一个过滤器（局部过滤器）。

new Vue({

  // ...

  filters: {

      filterA : function (value) {

        if (!value) return ''

        value = value.toString()

         return value.charAt(0).toUpperCase() + value.slice(1)

      }

    }

})

2、如何使用

（1）使用双大括号。

{{ message | filterA }}

（2）使用 v-bind 表达式

<div v-bind:id="message | filterA "></div>

（3）过滤器可以串联。

{{ message | filterA | filterB }}

（4）过滤器是 JavaScript 函数，因此可以接收参数。

{{ message | filterA('arg1', 'arg2') }}

3、举例（过滤日期）

　　moment.js是一个JavaScript日期处理类库，官网地址： http://momentjs.cn/

【举例：】

<!doctype html>

<html lang="en">

    <head>

        <meta charset="UTF-8">

        <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">

        <meta http-equiv="X-UA-Compatible" content="ie=edge">

        <title>Document</title>

    </head>

    <body>

        <div id="demo">

            <p>{{newDate}}</p>

            <p>{{newDate | filterA}}</p>

            <p>{{newDate | filterB}}</p>

            <p>{{newDate | filterA | filterB}}</p>

            <p :id="message | filterA ">{{newDate | filterC(format)}}</p>

        </div>

        <script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script>

        <!--moment.js是一个JavaScript日期处理类库， 官网地址： http://momentjs.cn/-->

        <script src="https://cdn.bootcss.com/moment.js/2.24.0/moment.js"></script>

        <script type="text/javascript">

            Vue.filter('filterA', function(value){

                return moment(value).format("MM-DD-YYYY");

            })

            var vm = new Vue({

                el: '#demo',

                data: {

                    newDate: new Date(),

                    format: 'HH:mm Z'

                },

                filters: {

                    filterB: function(value){

                        return moment(value).format("YYYY-MM-DD HH:mm Z");

                    },

                    // 使用形参默认值，如arg无值，则使用默认值

                    filterC: function(value, arg='YYYY-MM-DD HH:mm Z'){

                        return moment(value).format(arg);

                    }

                }

            })

        </script>

    </body>

</html>

二、指令

1、内置指令

【分类：】

    1、v-text： 用于更新元素的文本内容（textContent）。

    2、v-html： 用于更新元素的html内容（innerHTML）。

    3、v-if：   为true时，显示在页面上。

    4、v-else： 与v-if相对应。

    5、v-show： 通过display来控制标签的显示与隐藏。

    6、v-for：  用于遍历数组或者对象。

    7、v-on：   用于绑定事件监听，简写为 @。

    8、v-bind： 用于绑定属性并解析表达式，简写为 :。

   9、v-model：用于数据的双向绑定，通常用于input标签。

   10、v-cloak： 用于防止闪现表达式，一般使用{{}}表达式时，会先显示{{}}，然后再被转换。使用v-cloak可以先不显示{{}}，直接被解析转换。

   v-cloak通常与css配合，即使用属性选择器选中v-cloak，然后将其隐藏（display:none）。

   11、ref：   用于唯一标识某个标签，通过vue对象的$refs来表示。

【举例：（v-cloak， ref， v-click）】

<!doctype html>

<html lang="en">

    <head>

        <meta charset="UTF-8">

        <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">

        <meta http-equiv="X-UA-Compatible" content="ie=edge">

        <title>Document</title>

        <style type="text/css">

            /* 使用属性选择器，定位到 v-cloak属性 ,并将其隐藏*/

            [v-cloak]{

                display: none;

            }

        </style>

    </head>

    <body>

        <div id="demo">

            <!-- 根据ref定位某个标签，并改变标签的内容 -->

            <p ref="change1">{{message}}</p>

            <!--由于先扫描文本再解析，即会先显示{{}}，然后再转换，造成闪现的情况，

                可以先将标签隐藏，当解析完成后，v-cloak 会失效，此时标签会显示出来，从而解决闪现问题-->

            <p ref="change2" v-cloak>{{message}}</p>

            <button @click="change1">Change1</button>

        </div>

        <script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script>

        <script type="text/javascript">

            var vm = new Vue({

                el: '#demo',

                data: {

                    message: 'hello'

                },

                methods: {

                    change1(){

                        this.$refs.change1.textContent += ' world'

                    }

                }

            })

        </script>

    </body>

</html>

2、自定义指令

（1）创建方式：
　　方式一：使用 Vue.directive() 去创建指令（全局指令）。

// 注册一个全局自定义指令 `v-focus`

Vue.directive('focus', function(el, binding){

    }

})

【注：】

el：指令所绑定的元素，可以用来直接操作 DOM 。

binding：一个对象，包含以下属性：

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

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

    oldValue：指令绑定的前一个值，仅在 update 和 componentUpdated 钩子中可用。无论值是否改变都可用。

    expression：字符串形式的指令表达式。例如 v-my-directive="1 + 1" 中，表达式为 "1 + 1"。

    arg：传给指令的参数，可选。例如 v-my-directive:foo 中，参数为 "foo"。

    modifiers：一个包含修饰符的对象。例如：v-my-directive.foo.bar 中，修饰符对象为 { foo: true, bar: true }。

　　方式二：在 vue 内部使用 directives 来创建一个指令（局部指令）。

directives: {

  focus:function(el, binding){

    }

}

（2）举例：

【举例：】

<!doctype html>

<html lang="en">

    <head>

        <meta charset="UTF-8">

        <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">

        <meta http-equiv="X-UA-Compatible" content="ie=edge">

        <title>Document</title>

        <style type="text/css">

            /* 使用属性选择器，定位到 v-cloak属性 ,并将其隐藏*/

            [v-cloak]{

                display: none;

            }

        </style>

    </head>

    <body>

        <div id="demo">

            <p v-to-upper-text="message" v-cloak="">Hello World</p>

            <p v-to-lower-text="message" v-cloak="">Hello World</p>

        </div>

        <script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script>

        <script type="text/javascript">

            Vue.directive('to-upper-text', function(el, binding){

                el.textContent = binding.value.toUpperCase();

            })

            var vm = new Vue({

                el: '#demo',

                data: {

                    message: 'hello'

                },

                directives:{

                    // 包含了特殊字符 - ，所以需要使用引号括起来

                    'to-lower-text':function(el, binding){

                        el.textContent = binding.value.toLowerCase()

                    }

                }

            })

        </script>

    </body>

</html>

三、插件

1、插件的功能

（1）添加全局方法或者属性。如: vue-custom-element
（2）添加全局资源：指令/过滤器/过渡等。如 vue-touch
（3）通过全局混入来添加一些组件选项。如 vue-router
（4）添加 Vue 实例方法，通过把它们添加到 Vue.prototype 上实现。
（5）一个库，提供自己的 API，同时提供上面提到的一个或多个功能。如 vue-router

2、开发插件

（1）首先得自定义一个js文件，通常命名为 vue-插件名.js
（2）在js文件内部，定义一个install方法，其第一个参数是 Vue 构造器，第二个参数是一个可选的选项对象。方法内部，可以自定义指令、全局方法、属性等。
（3）举例：

【举例：】

/*

 vue插件库

 * */

(function() {

    // 定义一个向外暴露的插件对象，用于被调用

    var MyPlugin = {}

    // 必须存在一个install方法

    MyPlugin.install = function(Vue, options) {

        // 1. 添加全局方法或属性

        Vue.myGlobalMethod = function() {

            // 逻辑...

            console.log("全局方法，即vue函数对象的方法")

        }

        // 2. 添加全局资源

        Vue.directive('my-directive',

            function(el, binding, vnode, oldVnode) {

                // 逻辑...

                console.log("全局资源，自定义指令")

                el.textContent = binding.value.toUpperCase()

            }

        )

        // 3. 注入组件选项

        Vue.mixin({

            created: function() {

                // 逻辑...

            }

        })

        // 4. 添加实例方法，绑定在Vue.prototype上

        Vue.prototype.$myMethod = function(methodOptions) {

            // 逻辑...

            console.log("vue的实例方法")

        }

    }

    // 向外暴露插件对象

    window.MyPlugin = MyPlugin

})()

3、使用插件

（1）导入自定义的插件js文件。
（2）通过全局方法 Vue.use() 使用插件。它需要在你调用 new Vue() 启动应用之前完成。Vue.use() 会自动阻止注册相同的插件，即使多次调用，也只执行一次。

// Vue.use(MyPlugin)其内部会 调用 MyPlugin.install(Vue)

Vue.use(MyPlugin)

或者 // 传入一个可选的选项对象

Vue.use(MyPlugin, { someOption: true })

new Vue({

  // ...组件选项

})

（2）举例：

【举例：】

<!doctype html>

<html lang="en">

    <head>

        <meta charset="UTF-8">

        <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">

        <meta http-equiv="X-UA-Compatible" content="ie=edge">

        <title>Document</title>

    </head>

    <body>

        <div id="demo">

            <p v-my-directive="message">Hello</p>

        </div>

        <script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script>

        <script src="./js/vue-myPlugin.js"></script>

        <script type="text/javascript">

            // 声明使用的插件对象

            Vue.use(MyPlugin)

            // 调用自定义的全局方法

            Vue.myGlobalMethod()

            var vm = new Vue({

                el: '#demo',

                data: {

                    message: 'hello'

                }

            })

            // 调用实例方法

            vm.$myMethod()

        </script>

    </body>

</html>