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 v-color="'blue'"> 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 //和JS行为有关的操作，最后在inserted 中去执行，防止JS行为不生效 124 }, 125 updated:function(){//当VNode更新的时候，会执行updated，可能会触发多次 126 127 } 128 }) 129 130 //自定义一个设置字体颜色的指令 131 Vue.directive('color',{ 132 //样式，只要通过指令绑定给了元素，不管这个元素有没有被插入到页面中去，这个元素肯定有了一个内联的样式 133 //将来元素肯定会显示到页面中，这时候，浏览器的渲染引擎必然会解析样式，应用给这个元素 134 bind:function(el,binding){ 135 // el.style.color='red' 136 //和样式相关的操作，一般都可以在bind执行 137 138 el.style.color=binding.value 139 } 140 }) 141 142 //创建 Vue 实例，得到 ViewModel 143 var vm = new Vue({ 144 el:'#app', 145 data:{ 146 id:'', 147 name:'', 148 keywords:'',//搜索的关键字 149 list:[ 150 {id:1,name:'奔驰',ctime:new Date()}, 151 {id:2,name:'宝马',ctime:new Date()} 152 ] 153 }, 154 methods:{ 155 add(){//添加的方法 156 // console.log('ok') 157 //分析： 158 //1.获取到id 和name ，直接从data上面获取 159 //2.组织出一个对象 160 //3.把这个对下，调用数组的相关方法，添加到当前data上的list中 161 //4.注意：在Vue中，已经实现了数据的双向绑定，每当我们修改了data中的数据，Vue会默认监听到数据的改动，自动把最新的数据，应用到页面上； 162 //5.当我们意识到上面的第四部的时候，就证明大家已经入门Vue了，我们更多的是在进行VM中Model数据操作，同时，在操作Model数据的时候，指定的业务逻辑操作； 163 164 var car={id:this.id,name:this.name,ctime:new Date()} 165 this.list.push(car) 166 this.id=this.name='' 167 }, 168 del(id){//根据Id删除数据 169 //分析： 170 //1.如何根据Id，找到要删除这一项的索引 171 //2.如果找到索引了，直接调用数组的splice方法 172 173 /* this.list.some((item,i)=>{ 174 if(item.id==id){ 175 this.list.splice(i,1) 176 //在数组的some方法中，如果return true,就会立即终止这个数组的后续循环 177 return true; 178 } 179 })*/ 180 181 var index = this.list.findIndex(item=>{ 182 if(item.id==id){ 183 return true; 184 } 185 }) 186 // console.log(index) 187 this.list.splice(index,1) 188 }, 189 190 search(keywords){//根据关键字，进行数据的搜索 191 /* var newList=[] 192 this.list.forEach(item=>{ 193 if(item.name.indexOf(keywords)!=-1){ 194 newList.push(item) 195 } 196 }) 197 return newList*/ 198 //注意：forEach some filter findIndex 这些都属于数组的新方法， 199 //都会对数组中的每一项，进行遍历，执行相关操作； 200 return this.list.filter(item=>{ 201 // if(item.name.indexOf(keywords)!=-1) 202 //注意：在ES6中，为字符串提供了一个新方法，叫做String.prototype.includes('要包含的字符串') 203 //如果包含，则返回true，否则返回false 204 //contains 205 if(item.name.includes(keywords)){ 206 return item 207 } 208 }) 209 } 210 } 211 }); 212 213 //如何自定义一个私有的过滤器（） 214 var vm2=new Vue({ 215 el:'#app2', 216 data:{ 217 dt:new Date() 218 }, 219 methods:{}, 220 filters:{//定义私有过滤器 过滤器有两个条件【过滤器名称和处理函数】 221 //过滤器调用的时候，采用的是就近原则，如果有过滤器和全局过滤器名称一致了，这时候 有线调用私有过滤器 222 dateFormat:function(dateStr,pattern=''){ 223 //根据给定的时间字符串，得到特定的时间 224 var dt = new Date(dateStr) 225 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 231 232 if(pattern.toLowerCase() ==='yyyy-mm-dd'){ 233 return `${y}-${m}-${d}` 234 }else{ 235 var hh=dt.getHours().toString().padStart(2,'0') 236 var mm=dt.getMinutes().toString().padStart(2,'0') 237 var ss=dt.getSeconds().toString().padStart(2,'0') 238 239 return `${y}-${m}-${d} ${hh}:${mm}:${ss} ~~~~~~~` 240 } 241 } 242 } 243 244 }) 245 246 // document.getElementById('search').focus() 247 248 249 </script> 250 </body> 251 </html>