7.01 Vue 学习总结

最新推荐文章于 2024-06-05 14:26:44 发布

不正经的前端程序员

最新推荐文章于 2024-06-05 14:26:44 发布

阅读量138

点赞数

分类专栏：前端学习

本文链接：https://blog.csdn.net/qq_27300101/article/details/80871311

版权

前端学习专栏收录该内容

42 篇文章 0 订阅

订阅专栏

 
  <!doctype html 
  > 
 
  < 
  html 
  lang= 
  "en" 
  > 
 
  < 
  head 
  > 
 
  < 
  meta 
  charset= 
  "UTF-8" 
  > 
 
  < 
  meta 
  name= 
  "Generator" 
  content= 
  "EditPlus®" 
  > 
 
  < 
  meta 
  name= 
  "Author" 
  content= 
  "" 
  > 
 
  < 
  meta 
  name= 
  "Keywords" 
  content= 
  "" 
  > 
 
  < 
  meta 
  name= 
  "Description" 
  content= 
  "" 
  > 
 
  < 
  title 
  >品牌列表案例 
  </ 
  title 
  > 
 
  < 
  script 
  src= 
  "../lib/vue.min.js" 
  >     
  < 
  / 
  script 
  > 
 
  < 
  link 
  href= 
  "../lib/bootstrap.min.css" 
  rel= 
  "stylesheet" 
  > 
 
  </ 
  head 
  > 
 
  < 
  body 
  > 
 
  <!-- 
 
          相关操作有，添加，删除，搜索，全局过滤器和局部过滤器，全局指令和局部指令 
 
       --> 
 
  < 
  div 
  id= 
  "app" 
  > 
 
  < 
  div 
  class= 
  "panel panel-primary" 
  > 
 
  < 
  div 
  class= 
  "panel-heading" 
  > 
 
  < 
  h3 
  class= 
  "panel-title" 
  >添加品牌 
  </ 
  h3 
  > 
 
  </ 
  div 
  > 
 
  < 
  div 
  class= 
  "panel-body form-inline" 
  > 
 
  < 
  label 
  > 
 
                       ID: 
 
  < 
  input 
  type= 
  "text" 
  class= 
  "form-control" 
  v-model= 
  "id" 
  > 
 
  </ 
  label 
  > 
 
  < 
  label 
  > 
 
                       name: 
 
  < 
  input 
  type= 
  "text" 
  class= 
  "form-control" 
  v-model= 
  "name" 
  > 
 
  </ 
  label 
  > 
 
  < 
  input 
  type= 
  "button" 
  value= 
  "添加" 
  class= 
  "btn btn-primary" @ 
  click= 
  "add" 
  /> 
 
  < 
  label 
  > 
 
                           输入搜索关键字: 
 
  < 
  input 
  type= 
  "text" 
  class= 
  "form-control" 
  v-model= 
  "keywords" 
  v-color 
  > 
 
  <!--Vue 中所有的指令都以v 开头，--> 
 
  </ 
  label 
  > 
 
  </ 
  div 
  > 
 
  </ 
  div 
  > 
 
  < 
  table 
  class= 
  "table table-bordered table-hover table-striped" 
  > 
 
  < 
  thread 
  > 
 
  < 
  tr 
  > 
 
  < 
  th 
  > ID 
  </ 
  th 
  > 
 
  < 
  th 
  > Name 
  </ 
  th 
  > 
 
  < 
  th 
  > Ctime 
  </ 
  th 
  > 
 
  < 
  th 
  > Operation 
  </ 
  th 
  > 
 
  </ 
  tr 
  > 
 
  </ 
  thread 
  > 
 
  < 
  tbody 
  > 
 
  <!--之前数据都是从daTa 中渲染过来的，现在使用search方法，根据关键字以传参的形式进行传递， 
 
                          在search 中将数据以数组的形式返回 
 
                      --> 
 
  < 
  tr 
  v-for= 
  "item in search(keywords)" : 
  key= 
  "item.id" 
  > 
  <!--把list 删掉，用一个方法代替--> 
 
  < 
  td 
  >{{item.id}} 
  </ 
  td 
  > 
 
  < 
  td 
  >{{item.name | msgFormat(item.name)}} 
  </ 
  td 
  > 
 
  < 
  td 
  >{{item.ctime}} 
  </ 
  td 
  > 
 
  < 
  td 
  >< 
  a 
  href= 
  "" @ 
  click. 
  prevent= 
  "del(item.id)" 
  >删除 
  </ 
  a 
  ></ 
  td 
  > 
 
  </ 
  tr 
  > 
 
  </ 
  tbody 
  > 
 
  </ 
  table 
  > 
 
  </ 
  div 
  > 
 
  < 
  script 
  > 
 
  //全局指令和局部指令， 
 
  Vue. 
  directive( 
  'color',{ 
 
  bind 
   : 
  function( 
  el){ 
 
  el. 
  style. 
  color = 
  'red'; 
 
               } 
 
           }); 
 
  //全局过滤器和局部过滤器 
 
  Vue. 
  filter( 
  'msgFormat', 
  function( 
  item){ 
 
  return 
  item. 
  replace( 
  '大', 
  'Da'); 
 
           }); 
 
  //创建vue 实例 
 
  var 
  vm = 
  new 
  Vue({ 
 
  el : 
  '#app', 
 
  data : { 
 
  id : 
  '', 
 
  name : 
  '', 
 
  ctime : 
  '', 
 
  keywords : 
  '', 
 
  list :[ 
 
                           { 
  id : 
  1, 
  name : 
  '奥迪', 
  ctime : 
  new 
  Date()}, 
 
                           { 
  id : 
  2, 
  name : 
  '别克', 
  ctime : 
  new 
  Date()}, 
 
                           { 
  id : 
  3, 
  name : 
  '大众', 
  ctime : 
  new 
  Date()} 
 
                       ] 
 
                   }, 
 
  methods : { 
 
  add(){ 
 
  var 
  car = { 
  id : 
  this. 
  id, 
  name : 
  this. 
  name , 
  ctime : 
  new 
  Date()}; 
 
  this. 
  list. 
  push( 
  car); 
 
  this. 
  id = 
  this. 
  name = 
  ''; 
 
                       }, 
 
  del( 
  id){ 
 
  // this.list.some((item,i)=>{ 
 
  //  if(item.id === id){ 
 
  //      this.list.splice(i,1); 
 
  //      return true; 
 
  //  } 
 
  // }); 
 
  //第二个方法 
 
  // this.list.findIndex( 
 
  //  (item,i)=>{ 
 
  //  if(item.id === id){ 
 
  //      this.list.splice(i,1); 
 
  //      return true; 
 
  //  } 
 
  //  }); 
 
  var 
  index =  
  this. 
  list. 
  findIndex( 
  item 
  => { 
 
  if( 
  item. 
  id == 
  id) 
 
  return 
  true; 
 
                               }); 
 
  this. 
  list. 
  splice( 
  index, 
  1); 
 
                       }, 
 
  search( 
  keywords){ 
 
  var 
  newList = []; 
 
  this. 
  list. 
  forEach( 
  item 
  => { 
 
  if( 
  item. 
  name. 
  indexOf( 
  keywords) !=- 
  1){ 
 
  console. 
  log( 
  item. 
  name. 
  indexOf( 
  keywords)); 
 
  newList. 
  push( 
  item); 
 
                               } 
 
                           }); 
 
  return 
  newList; 
 
                       } 
 
                   } 
 
               }); 
 
  //过滤器语法，Vue.filter('过滤器的名称',function(data){}); 
 
  /*  Vue.filter('过滤器的名称',function(data){ 
 
                  return data + '123'; 
 
              });*/ 
 
  //定义一个私有的过滤器，， 
 
  < 
  / 
  script 
  > 
 
  </ 
  body 
  > 
 
  </ 
  html 
  >