Vue全家桶--07 Vue過濾器和外掛
阿新 • • 發佈：2021-11-03
Vue全家桶--07 Vue過濾器和外掛
7.1 過濾器
7.1.1 什麼是過濾器
過濾器對將要顯示的文字，先進行特定格式化處理，然後再進行顯示.
注意：過濾器並沒有改變原本的資料，只是產生新的對應的資料
7.1.2 使用方式
**定義過濾器：
全域性過濾器
Vue.filter(過濾器名稱, function (value1[,value2,...] ) { // 資料處理邏輯 })
區域性過濾器
new Vue({
filter:{ 過濾器名稱:function(value1,[,value2,...]){ } } })
**過濾器可以用在兩個地方：{{}}和v-bind表示式
<!-- 在雙花括號中 --> <div>{{資料屬性名稱 | 過濾器名稱}}</div> <div>{{資料屬性名稱 | 過濾器名稱(引數值)}}</div> <!-- 在 `v-bind` 中 --> <div v-bind:id="資料屬性名稱 | 過濾器名稱"></div> <div v-bind:id="資料屬性名稱 | 過濾器名稱(引數值)"></div>
Demo
<!DOCTYPE html><html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head> <body> <div id="app"> <h3>過濾器單個引數</h3> <p>{{content | contentFilter}}</p> <input type="text" :value="content | contentFilter"> <h3>過濾器多個引數</h3> <p>{{ Net | add(Java,Vue) }}</p> </div> <script src="./node_modules/vue/dist/vue.js"></script> <script> Vue.filter('contentFilter', function (value) { if (!value) { return } return value.toString().toUpperCase().replace('TMD', 'XXX').replace('SB', 'XX'); }) new Vue({ el: '#app', data: { content: 'tmd是個sb', Net:90, Java:89, Vue:85 }, filters: { add (num1, num2, num3) {//add 過濾名，num1就是 | 左表的第一個引數 return num1 + num2 + num3; } } }); </script> </body> </html>
7.2 自定義外掛
外掛：1.外掛通常會為Vue新增全域性功能，一般是新增全域性方法/全域性指令/過濾器等
2.Vue外掛有一個公開方法 install，通過 install方法給Vue新增全域性功能
3.通過全域性方法 Vue.use() 使用外掛，它需要在你呼叫 new Vue() 啟動應用之前完成。
plugins.js
(function(){ // 宣告 MyPlugin 外掛物件 const MyPlugin = {} MyPlugin.install = function (Vue, options) { // 1. 新增全域性方法 Vue.myGlobalMethod = function () { alert('MyPlugin外掛: 全域性方法生效') } // 2. 新增全域性指令 Vue.directive('my-directive', { inserted: function (el, binding) { el.innerHTML = "MyPlugin外掛 my-directive:" + binding.value } }) // 3. 新增例項方法 Vue.prototype.$myMethod = function (methodOption) { alert('Vue 例項方法生效：' + methodOption) } } // 將外掛新增到 window 物件中 window.MyPlugin = MyPlugin })() // 不要少了括號()，讓它立即執行
html頁面
<body> <div id="app"> <span v-my-directive="content"></span> </div> <script src="./node_modules/vue/dist/vue.js"></script> <script src="./js/plugins.js"></script> <script> // 1.引入自定義外掛 MyPlugin // 如果報錯:Uncaught ReferenceError: MyPlugin is not defined // 解決方法: 檢視 plugins.js 是否引入，如果引入還是報錯，檢查 js 語法，特別是最後一行不要少了括號 () Vue.use(MyPlugin); // 2. 建立 Vue 例項, 模板中使用引用全域性指令 v-my-directive="content" var vm = new Vue({ el: '#app', data: { content:'hello' } }); //3.呼叫自定義全域性方法 Vue呼叫 Vue.myGlobalMethod(); //4.呼叫Vue例項方法 vm呼叫 vm.$myMethod('123'); </script> </body>You are never too old to set another goal or to dream a new dream!!!