Vue--過濾器、指令、插件

本文轉載自查看原文 2019-07-22 20:22 382 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>

免責聲明！

本站轉載的文章為個人學習借鑒使用，本站對版權不負任何法律責任。如果侵犯了您的隱私權益，請聯系本站郵箱yoyou2525@163.com刪除。

猜您在找 vue過濾器 Vue 過濾器的使用 vue 過濾器 filters() vue之過濾器 Vue自帶的過濾器 vue 過濾器基本使用 vue 全局過濾器（單個和多個過濾器） vue——進階(slot插槽，自定義指令，過濾器) Vuejs——Vue生命周期，數據，手動掛載，指令，過濾器 vue_全局注冊過濾器