实例中用到的只是;
1.自定义指令,计算属性,侦听器
2.生命周期
实现的效果如下图:
本实例最核心的业务逻辑是数据处理,列表的话会用到数组,vue对数组的处理有一些特殊的地方,现在来简单介绍一下。
数组相关API
- 变异方法(修改原有的数组)
- splice() 删除数组中指定的元素
- sort() 排序
- reverse() 数组元素的反转
数组变异方法
- 在 Vue 中,直接修改对象属性的值无法触发响应式。当你直接修改了对象属性的值,你会发现,只有数据改了,但是页面内容并没有改变
- 变异数组方法即保持数组方法原有功能不变的前提下对其进行功能拓展
push() |
往数组最后面添加一个元素,成功返回当前数组的长度 |
---|---|
pop() |
删除数组的最后一个元素,成功返回删除元素的值 |
shift() |
删除数组的第一个元素,成功返回删除元素的值 |
unshift() |
往数组最前面添加一个元素,成功返回当前数组的长度 |
splice() |
有三个参数,第一个是想要删除的元素的下标(必选),第二个是想要删除的个数(必选),第三个是删除 后想要在原位置替换的值 |
sort() |
sort() 使数组按照字符编码默认从小到大排序,成功返回排序后的数组 |
reverse() |
reverse() 将数组倒序,成功返回倒序后的数组 |
替换数组
- 不会改变原始数组,但总是返回一个新数组
filter | filter() 方法创建一个新的数组,新数组中的元素是通过检查指定数组中符合条件的所有元素。 |
---|---|
concat | concat() 方法用于连接两个或多个数组。该方法不会改变现有的数组 |
slice | slice() 方法可从已有的数组中返回选定的元素。该方法并不会修改数组,而是返回一个子数组 |
vue对于数据的处理都是响应式的,数组的情况默认情况下并不是默认的,所以vue要把数组对数据的处理变成响应式,这样的话,操作数组,页面中的数据就会一起变化。变异方法就体现在这个层面,将原生API 处理为响应式。
- 替换数组(生成新的数组)
- filter()
- concat()
- slice()
变更方法,会变更调用了这些方法的原始数组。相比之下,也有非变更方法,例如 filter()、concat() 和 slice()。它不会变更原始数组,而总是返回一个新数组。当使用非变更方法时,可以用新数组替换旧数组。需要重新赋值!
添加:
删除:
替换:
<!DOCTYPE html>
<html lang=