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