Vue 自定义按键修饰符，自定义指令，自定义过滤器

  1 <!DOCTYPE html>
  2 <html>
  3     <head>
  4         <meta charset="utf-8">
  5         <title></title>
  6         <link rel="stylesheet" type="text/css" href="./css/bootstrap.css" />
  7         <script src="../vue.js" type="text/javascript" charset="utf-8"></script>
  8     </head>
  9     <body>
 10         <div id="app">
 11 
 12             <div class="panel panel-primary">
 13                 <div class="panel-heading">
 14                     <h3 class="panel-title">demo</h3>
 15                 </div>
 16                 <div class="panel-body form-inline">
 17                     <label>Id:
 18                         <input type="text" calss="from-control" v-model="id">
 19                     </label>
 20 
 21                     <label>Name:
 22                         <input type="text" calss="from-control" v-model="name" @keyup.f2="add()">
 23                     </label>
 24 
 25                     <input type="button" value="添加" class="btn btn-primary" @click="add">
 26 
 27                     <label>搜索名称关键字:
 28                         <input type="text" calss="from-control" v-model="keyword" v-focus v-color="'blue'">
 29                     </label>
 30 
 31                 </div>
 32             </div>
 33 
 34             <table class="table table-bordered table-hover table-striped" border="" cellspacing="" cellpadding="">
 35                 <thead>
 36                     <tr>
 37                         <th>Id</th>
 38                         <th>Name</th>
 39                         <th>Ctime</th>
 40                         <th>操作</th>
 41                     </tr>
 42                 </thead>
 43                 <tbody>
 44                     <tr v-for="item in search(keyword)" :key="item.id">
 45                         <td v-cloak>{{item.id}}</td>
 46                         <td v-text="item.name"></td>
 47                         <td>{{ item.ctime | dataFormat("") }}</td>
 48                         <td>
 49                             <a @click.prevent="del(item.id)">删除</a>
 50                         </td>
 51                     </tr>
 52                 </tbody>
 53 
 54             </table>
 55         </div>
 56 
 57         <div id="app2">
 58             <h3 v-color="'pink'" v-fontweight="'900'" v-fontsize ="'70'" >{{ msg | dataFormat2 }}</h3>
 59         </div>
 60 
 61         <script type="text/javascript">
 62             
 63             // 自定义键盘按键 按键修饰符
 64             Vue.config.keyCodes.f2 = 113;
 65 
 66 
 67             // 自定义全局指令
 68             Vue.directive('focus', {
 69                 bind: function(el) { //每当指令绑定到元素上的时候,会立即执行这个bind函数,只执行一次
 70                     //在每个函数中,第一个参数永远是el,表示被绑定了指令的那个元素,这个el参数,是一个原生的js对象
 71                     //在元素刚绑定指令的时候,还没有插入到DOM中去,这时候,调用foucs方法没有作用
 72                     el.focus();
 73                 },
 74                 inserted: function(el) { //表示元素插入到dom中的时候,会执行inserted函数,值触发一次
 75                     el.focus();
 76                 },
 77                 updated: function() { //当VNode更新的时候,会执行updated函数,可能会触发多次
 78 
 79                 }
 80             });
 81 
 82             Vue.directive('color', {
 83                 // bind(el, binding, vnode) {
 84                 //     el.style.arg = binding.value.arg;
 85                 // },
 86                 bind(el, binding) {
 87                     el.style.color = binding.value;
 88                 }
 89             });
 90 
 91 
 92             //定义给一个全局的时间格式化 过滤器
 93             Vue.filter("dataFormat", function(dataStr, pattern) {
 94                 var dt = new Date(dataStr);
 95                 var y = dt.getFullYear();
 96                 var m = dt.getMonth() + 1;
 97                 var d = dt.getDate();
 98 
 99                 if (pattern && pattern.toLowerCase() == "yyyy-mm-dd") {
100                     return `${y}-${m}-${d}`;
101                 } else {
102                     var hh = dt.getHours();
103                     var mm = dt.getMinutes();
104                     var ss = dt.getSeconds();
105                     return `${y}-${m}-${d} ${hh}:${mm}:${ss}`;
106                 }
107 
108 
109             })
110 
111             var vm = new Vue({
112                 el: "#app",
113                 data: {
114                     id: "",
115                     name: "",
116                     key: "",
117                     keyword: "",
118                     list: [{
119                             id: 1,
120                             name: "奔驰",
121                             ctime: new Date()
122                         },
123                         {
124                             id: 2,
125                             name: "宝马",
126                             ctime: new Date()
127                         }
128                     ]
129                 },
130                 methods: {
131                     add: function() {
132                         var str = {
133                             id: this.id,
134                             name: this.name,
135                             ctime: new Date()
136                         };
137                         this.list.push(str);
138                         this.id = "";
139                         this.name = "";
140                     },
141                     del: function(id) {
142 
143                         this.list.some(((item, i) => {
144                             if (item.id == id) {
145                                 this.list.splice(i, 1);
146                                 return true;
147                             }
148 
149                         }))
150 
151                         // var index = this.list.findIndex( (item) => {
152                         //     if(item.id == id){
153                         //         return true;
154                         //     }
155                         // })
156                         // console.log(index);
157                         // 
158                         // this.list.splice(index, 1);
159                     },
160                     search(keyword) {
161                         //var newlist = [];
162 
163 
164                         // this.list.forEach(item=>{
165                         //     if(item.name.indexOf(keyword) != -1){
166                         //         newlist.push(item);
167                         //     }
168                         // });
169 
170                         return this.list.filter(item => {
171                             // if (item.name.indexOf(keyword) != -1) {
172                             //     newlist.push(item);
173                             // }
174                             if (item.name.includes(keyword)) {
175                                 return item;
176                             }
177                         })
178 
179 
180                         //return newlist;
181                     }
182                 }
183             })
184             
185             
186 
187             var vm2 = new Vue({
188                 el: "#app2",
189                 data: {
190                     msg: new Date()
191                 },
192                 //自定义私有过滤器
193                 filters: {
194                     dataFormat2: function(dataStr, pattern) {
195                         var dt = new Date(dataStr);
196                         var y = dt.getFullYear();
197                         var m = dt.getMonth() + 1;
198                         var d = dt.getDate();
199 
200                         if (pattern && pattern.toLowerCase() == "yyyy-mm-dd") {
201                             return `${y}-${m}-${d}`;
202                         } else {
203                             var hh = dt.getHours();
204                             var mm = dt.getMinutes().toString().padStart(2, "0");
205                             var ss = dt.getSeconds().toString().padStart(2, "0");
206                             return `${y}-${m}-${d} ${hh}:${mm}:${ss}`;
207                         }
208                     }
209                 },
210                 // 自定义私有指令
211                 directives: {
212                     fontweight: {
213                         bind: function (el,binding){
214                             el.style.fontWeight = binding.value;
215                             console.log(binding.value)
216                         }
217                     },
218                     fontsize: function(el, binding) {
219                         el.style.fontSize = binding.value + "px";
220                     }
221                 }
222             })
223         </script>
224     </body>
225 </html>
原文地址：https://www.cnblogs.com/yanghaoyu0624/p/11519057.html