1 <!DOCTYPE html>
2 <html lang="en">
3 <head>
4 <meta charset="UTF-8">
5 <meta name="viewport" content="width=device-width, initial-scale=1.0">
6 <meta http-equiv="X-UA-Compatible" content="ie=edge">
7 <title>07-品牌列表案例6（自定义全局指令-让文本框【搜索关键字】获取焦点）</title>
8 <script src="./lib/vue-2.4.0.js"></script>
9 <link rel="stylesheet" href="./lib/bootstrap-3.3.7.css">
10 <!--自定义指令：
11 1、调用： v-focus 注意：Vue中所有的指令，在调用的时候，都是以v-开头
12 2、其中：Vue.directive('指令名称'，{bind:function (el){}}/inserted:function (el){}/updated:function (el){})
13 el:被绑定指令的元素
14 参数1: 指令的名称，【注意，在定义的时候，指令的名称前面 不需要 v- 前缀
15 但是，在调用的时候，必须在指令前面 加上 v- 前缀来进行调用】
16 参数2: 是一个对象，这个对象身上，有一些指令相关函数，这些函数可以在特定阶段，
17 执行相关操作
18 【
19 bind:function (){} 每当指令绑定到元素上的时候 会立刻执行这个bind函数（只执行1次）
20 inserted:function (){} 表示元素插入到BOM中的时候，会执行inserted函数
21 updated:function (){} 当VNode更新的时候 会执行update 可能会触发多次
22 】
23 3、
24 -->
25 </head>
26 <body>
27 <div id="app">
28 <!-- 1、上半部分添加功能 -->
29 <div class="panel panel-primary">
30 <div class="panel-heading">
31 <h3 class="panel-title">添加人员</h3>
32 </div>
33 <div class="panel-body form-inline">
34 <label>
35 ID:
36 <input type="text" v-model="id">
37 </label>
38
39 <label>
40 Name:
41 <!-- v-on:keyup ==》@keyup.enter enter键抬起事件 enter键抬起触发add事件 -->
42 <!-- enter键的keycode=13 f2=113 -->
43 <input type="text" class="form-control" v-model="name" @keyup.f2="add">
44 <!--2、<input type="text" v-model="name" @keyup.13="add"> -->
45 <!--1、 <input type="text" v-model="name" @keyup.enter="add"> -->
46 </label>
47
48 <label>
49 <!-- 在Vue中 使用事件绑定机制 为元素指定处理函数的时候 如果加了小括号 就可以给函数传参了 -->
50 <input type="button" class="form-control" value="添加" class="btn btn-primary" @click="add()">
51 </label>
52
53 <label>
54 搜索名称关键字：
55 <input type="text" v-focus id="search" class="form-control" v-model="keywords">
56 </label>
57 </div>
58 </div>
59
60 <!-- 2、表格部分 -->
61 <table class="table table-bordered table-hover table-striped">
62 <thead>
63 <tr>
64 <th>ID</th>
65 <th>Name</th>
66 <th>Ctime</th>
67 <th>Operation</th>
68 </tr>
69 </thead>
70 <tbody>
71 <!-- 之前v-for 中的数据 都是直接从 data 上的 list 中直接渲染过来的 -->
72 <!-- 现在，我们定义了一个search方法 同时把所有的关键字 通过传参的形式 传给了search方法 -->
73 <!-- 在search方法内部 通过执行for循环 把所有符合搜索关键字的数据 保存到一个新数组中 返回 -->
74 <tr v-for="item in search(keywords)" :key="item.id">
75 <td>{{item.id}}</td>
76 <td v-text="item.name"></td>
77 <!-- 管道符| -->
78 <td>{{ item.ctime | dateFormat }}</td>
79 <!-- .prevent 组织链接默认行为 -->
80 <td><a href="" @click.prevent="del(item.id)">删除</a></td>
81 </tbody>
82 </table>
83 </div>
84
85 <div id="app2">
86 <!-- <h3>{{ dt | dateFormat}}</h3> -->
87 <h3>{{ dt | dateFormat}}</h3>
88 </div>
89
90 <script>
91 //使用Vue.directive()定义全局指令
92 Vue.directive('focus', {
93 // el:被绑定指令的元素
94 bind:function (el){// 每当指令绑定到元素上的时候 会立刻执行这个bind函数（只执行1次）
95 //注意：在每个函数中 第一个参数 永远是 el 表示被绑定了指令的那个元素 这个 el 参数 是一个原生的JS对象（DOM指令）
96 // 在元素刚绑定指令的时候 还没有插入到DOM中去 这个时候调用focus方法没有用 只有插入到DOM中的时候 才会获取焦点
97 // el.focus()
98 },
99 inserted:function (el){// 表示元素插入到DOM中的时候，会执行inserted函数
100 el.focus()
101 },
102 updated:function (){//当VNode更新的时候 会执行update 可能会触发多次
103
104 }
105 })
106 //自定义全局按键修饰符
107 Vue.config.keyCodes.f2 = 113
108
109 // 全局过滤器，进行实践的格式化 dateFormat是全局过滤器的名字
110 //所谓的全局管理器 就是所有的 VM 实例都共享的
111 Vue.filter('dateFormat', function(dateStr, pattern=""){
112 // 1、Vue.filter('dateFormat', function(dateStr){
113 //根据给定字符串 得到特定时间
114 var dt = new Date(dateStr)
115
116 //yyyy-mm-dd
117 var y = dt.getFullYear()
118 var m = dt.getMonth() + 1//month从0开始
119 var d = dt.getDate()
120
121 // 方法1、return y + '-' + m + '-'+ d
122 if(pattern.toLowerCase() === 'yyyy-mm-dd') { //toLowerCase() 转换成小写
123 // 方法2、模板字符串
124 return `${y}-${m}-${d}`
125 }else{
126 var hh = dt.getHours()
127 var mm = dt.getMinutes()
128 var ss = dt.getSeconds()
129 return `${y}-${m}-${d} ${hh}:${mm}:${ss}`
130 }
131
132 })
133
134 var vm = new Vue({
135 el:"#app",
136 data:{
137 id: '',
138 name: '',
139 keywords: '',
140 list:[
141 {id: 1901, name: '11', ctime:new Date()},
142 {id: 1902, name: '22', ctime:new Date()},
143 {id: 1903, name: '33', ctime:new Date()},
144 {id: 1904, name: '44', ctime:new Date()},
145 {id: 1905, name: '55', ctime:new Date()},
146 {id: 1906, name: '66', ctime:new Date()}
147 ]
148 },
149 methods:{
150 add(){ //添加方法
151 //分析：
152 // 1、获取到ID和name 直接从data上获取
153 // 2、组织出一个对象
154 // 3、把这个对象 调用数组的相关方法，添加到当前 data 上的 list中
155 // 4、在vue中已经实现了数据的双向绑定 每当我们修改了 data中的数据 vue会默认监听到数据的改动，自动把最新的数据 应用到页面上
156 // 5、当我们意识到上面的第四步的时候,就证明大家已经入门vue了，我们更多的是在进行 m中Model数据的操作,同时,在操作Mode1数据的时候，指定的业务逻辑操作，
157 var staff = {id: this.id, name: this.name, ctime: new Date()}
158 this.list.push(staff);
159 this.id = this.name = ''
160 },
161 del(id){//根据id删除数据
162 //分析：
163 // 1、根据ID 找到要删除这一项的索引
164 // 2、如果找到索引 直接调用 数组的splice方法
165 /*方法1：
166 this.list.some((item, i)=>{
167 if(item.id == id){
168 this.list.splice(i, 1);
169 //在数组的some方法中 如果return true 就会立即终止这个数组后续循环
170 return true;
171 }
172 })*/
173 //方法2：
174 var index = this.list.findIndex(item => {
175 if(item.id == id){
176 return true;
177 }
178 })
179 this.list.splice(index, 1)
180 },
181 search(keywords) { //根据关键字实现数组的过滤
182 //方法3：
183 return this.list.filter(item => {
184 // if(item.name.indexOf(keywords) != -1)
185 // 注意：ES6中 为字符串提供了一个新方法 叫做 String.prototype.includes('要包含的字符串')
186 //如果包含 返回true 否则返回 false
187 if(item.name.includes(keywords)){
188 return item
189 }
190 })
191 /*方法1：
192 var newList = []
193 this.list.forEach(item => {
194 if(item.name.indexOf(keywords) != -1){
195 newList.push(item)
196 }
197 })
198 return newList*/
199 //方法2：
200 /*var newList = this.list.filter(item => {
201 // if(item.name.indexOf(keywords) != -1)
202 // 注意：ES6中 为字符串提供了一个新方法 叫做 String.prototype.includes('要包含的字符串')
203 //如果包含 返回true 否则返回 false
204 if(item.name.includes(keywords)){
205 return item
206 }
207
208 })
209 return newList*/
210
211 }
212 }
213 });
214 //自定义一个私有过滤器（局部）
215 var vm2 = new Vue({
216 el: '#app2',
217 data: {
218 dt: new Date()
219 },
220 methods: {
221 },
222 //过滤器调用的时候采用的是 就近原则 如果私有过滤器和全局过滤器名称一致了 这个时候 优先调用私有过滤器
223 filters: { //自定义私有过滤器 过滤器有两个条件 【过滤器名称 和 处理函数】
224 dateFormat: function (dateStr, pattern = ''){
225 var dt = new Date(dateStr)
226 //yyyy-mm-dd
227 var y = dt.getFullYear()
228 var m = (dt.getMonth() + 1).toString().padStart(2, '0')
229 var d = dt.getDate().toString().padStart(2, '0')
230 if(pattern.toLowerCase() === 'yyyy-mm-dd') {
231 return `${y}-${m}-${d}`
232 }else{
233 var hh = dt.getHours().toString().padStart(2, '0')
234 var mm = dt.getMinutes().toString().padStart(2, '0')
235 var ss = dt.getSeconds().toString().padStart(2, '0')
236 return `${y}-${m}-${d} ${hh}:${mm}:${ss}~~~~~`
237 }
238 }
239 }
240 })
241
242 // document.getElementById('search').focus()
243 </script>
244 </body>
245 </html>
