Vue 常用API整理

简介: 关于API这东西,前端各个框架都是不同的,且都经常更新,不用死记,所以本篇博客记录一下Vue中业务上常用的API(稍复杂些的API,简单的略)

关于API这东西,前端各个框架都是不同的,且都经常更新,不用死记,所以本篇博客记录一下Vue中业务上常用的API(稍复杂些的API,简单的略)


Vue中的数组操作


循环

<ul>
  // FAQ: key值一般不取index(数组下标值) 取唯一的id值
  //(若一个页面有多个数组,index会有多个,key值则失去了唯一性)
  <li v-for="(item, index) in list" :key="item.id">{{item.name}}</li>
<ul>

改变数组值

list:['a','b','c'];  // 此为data中的数组
list[0] = 'aa';   // 此种修改是无效的,UI界面不会重新渲染 这是应该注意的
// 正确的姿势 通过调用 $set(array, index, value) 
// 传参:1. 要操作的数组  2. 下标值  3. 修改的值
this.$set(this.list, 0, 'aa');  //  或 Vue.$set(this.list, 0, 'aa');
  • 对象数组元素交换位置(适用于业务上的,列表交换和上下移动)
list:[
  { 
    id:1,
    name: '小明',
  },
  { 
    id:2,
    name: '小红',
  },
  { 
    id:3,
    name: '小绿',
  },
]
// 上下移动
function changeSort(type, index){
  let tempArray;
  // 上移
  if(type  == 'up'){
      // 搞个临时数组接收一下
      tempArray =  this.list[index-1];
      // 交换
          this.$set(this.list, index-1,this.list[index]);
      this.$set(this.list, index, tempArray);
  }else{
     tempArray =  this.list[index + 1];
     this.$set(this.list, index + 1,this.list[index]);
     this.$set(this.list, index, tempArray);
  }
}
//  随机调换也是一样的,传index就可以了
// ...代码略
  • 删除数组元素
this.$delete(this.list, index); // index 下标值

Vue中的对象操作


obj: {
  name: '猪小明',
  age: 18,
  class: '三年二班'
}


  • 修改
this.$set(this.obj, 'name',  '王八蛋');  // obj 中的 name 从 “朱小明” 变成了 “王八蛋”
  • 删除
this.$delete(this.obj, "age");  // obj中的age没得了


目录
相关文章
vue中api统一管理
【10月更文挑战第4天】
入门Vue+.NET 8 Web Api记录(一)
入门Vue+.NET 8 Web Api记录(一)
176 4
Vue.js 3:探索组合式API带来的新变革
Vue.js 3:探索组合式API带来的新变革
Vue.js 3中的Composition API:提升你的组件开发体验
Vue.js 3中的Composition API:提升你的组件开发体验
探索Vue.js 3的组合式API:一种更灵活的组件状态管理方式
【10月更文挑战第5天】探索Vue.js 3的组合式API:一种更灵活的组件状态管理方式
Vue框架中Ajax请求的实现方式:使用axios库或fetch API
选择 `axios`还是 `fetch`取决于项目需求和个人偏好。`axios`提供了更丰富的API和更灵活的错误处理方式,适用于需要复杂请求配置的场景。而 `fetch`作为现代浏览器的原生API,使用起来更为简洁,但在旧浏览器兼容性和某些高级特性上可能略显不足。无论选择哪种方式,它们都能有效地在Vue应用中实现Ajax请求的功能。
52 4
Vue.js 3.x新纪元:Composition API引领潮流,Options API何去何从?前端开发者必看的抉择指南!
【8月更文挑战第30天】Vue.js 3.x 引入了 Composition API,为开发者提供了更多灵活性和控制力。本文通过示例代码对比 Composition API 与传统 Options API 的差异,帮助理解两者在逻辑复用、代码组织、类型推断及性能优化方面的不同,并指导在不同场景下的选择。Composition API 改善了代码可读性和维护性,尤其在大型项目中优势明显,同时结合 TypeScript 提供更好的类型推断和代码提示,减少错误并提升开发效率。尽管如此,在选择 API 时仍需考虑项目复杂性、团队熟悉度等因素。
59 0