第三章：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)))        }    }})