第三章：vue2中关于数据的处理

一、关于vue借鉴angular的思想,由数据驱动,然后显示到视图层中,一般都是修改数据来改变视图,一般操作数据主要是操作数组或者对象

二、常见的数组的处理

• 1、array.filter((currentVal,index,array)=>(),[thisArg])

  解析:filer()中第一个参数是一个回调函数,第二个参数是可选的改变当时的this,其返回依然是一个数组

• 2、array.map((currentVal,index,array)=>(),[thisArg])

  解析map方法类似一个工厂,把当前数组元素进行进一步处理,返回加工后的数组

• 3、array.every((currentVal,index,array)=>(),[thisArg])

  解析:every是判断数组中每个元素是否通过指定函数的测试,结果是一个布尔值

• 4、array.some((currentVal,index,array)=>(),[thisArg])

  解析:some是数组中至少有一个元素满足就返回true

• 5、array.reducer((previousVal,currentVal,index,array)=>(),[initialValue])

  解析:reducer第一个参数是回调方法,第二个参数是可选的,作为第一次回调的第一个参数

• 6、ES6中展开运算符...

  • 1、 用于函数参数

    function test(...arg) {
        console.log(arg);
    }
    test([1, 2, 3, 4], [1, 2]);

  • 2、用于数组合并

    var ary = [1, 2, 3];
    console.log([...ary, 4, 5, 6, 7]);

  • 3、解析赋值

    const [c, d, ...rest] = [1, 2, 3, 4, 5];
    const {a,b,...rest} = {a:1,b:2,c:3,d:4};
    console.log(a, b, rest);

• 7、ES3中常见修改数组的方法

  • 1、push(尾部追加)
  • 2、pop(尾部删除)
  • 3、shift(头部删除)
  • 4、unshift(头部添加)
  • 5、splice(方法向/从数组中添加/删除项目，然后返回被删除的项目(2个参数是删除,3个参数是添加)),
  • 6、sort(排序)
  • 7、reverse(反转)

三、vue中对数组的操作

• 1、基本的添删排序

  <div id="app">
      <input type="button" value="push" @click="push" />
      <input type="button" value="pop" @click="pop" />
      <input type="button" value="shift" @click="shift" />
      <input type="button" value="unshift" @click="unshift" />
      <input type="button" value="addSplice" @click="addSplice" />
      <input type="button" value="reduceSplice" @click="reduceSplice" />
      <input type="button" value="sort" @click="sort" />
      <input type="button" value="reverse" @click="reverse" />
      <input type="button" value="filter" @click="filter" />
      <input type="button" value="map" @click="map" />
      <hr> {{ary}}
  </div>

  var app = new Vue({
      el: '#app',
      data: {
          ary: [1, 2]
      },
      methods: {
          push() {
              this.ary.push(3)
          },
          pop() {
              this.ary.pop();
          },
          shift() {
              this.ary.shift();
          },
          unshift() {
              this.ary.unshift(1);
          },
          addSplice() {
              this.ary.splice(1, 1);
          },
          reduceSplice() {
              this.ary.splice(1, 0, 5, 6);
          },
          sort() {
              this.ary.sort((a, b) => (a - b));
          },
          reverse() {
              this.ary.reverse();
          },
          filter() {
              this.ary = this.ary.filter(item => (item % 2 == 0));
          },
          map() {
              this.ary = this.ary.map(item => (item * 2));
          }
      }
  })

四、vue中提供的方法

vue实例化对象的原型上有$set可以给data中属性赋值

• 1、$set给data中数组设置值

  setArray() {
      // 传递三个参数,第一个目标对象,第二的key(数组中下标),第三个参数是val
      //app.$set(this.ary, 2, 10);
      this.$set(this.ary, 2, 10);
  }

• 2、$set给data中对象设置值

  setObject() {
      //app.$set(this.obj, 'name', '张三');
      this.$set(this.obj, 'name', '张三');
  }

五、利用上面的方法做一个搜索信息的案例

• 1、运行效果

  

• 2、html代码

  <div id="app">
      <input type="text" placeholder="请输入搜索内容" v-model="searchText" />
      <input type="button" value="搜索" @click="search" />
      <ul>
          <li v-for="book of bookes">{{book}}</li>
      </ul>
  </div>

• 3、js代码

  var app = new Vue({
      el: '#app',
      data: {
          bookes: ['三国演义', '红楼梦', '西游记', '水浒传'],
          searchText: ''
      },
      methods: {
          search() {
              this.bookes = this.bookes.filter(book => (book.includes(this.searchText)))
          }
      }
  })