1. vue,学习第二弹!
1.x 版本中的 filterBy 指令,在2.x中已经被废除:
filterBy - 指令
1
在 2.x 版本中手动实现筛选的方式:
筛选框绑定到 VM 实例中的
searchName
属性:
1
在使用
v-for
指令循环每一行数据的时候,不再直接item in list
,而是in
一个 过滤的 methods 方法,同时,把过滤条件searchName
传递进去:
1
search
过滤方法中,使用 数组的filter
方法进行过滤:
1search(name) {
1.1. 过滤器
概念:Vue.js 允许你自定义过滤器,可被用作一些常见的文本格式化。过滤器可以用在两个地方:mustache 插值和 v-bind 表达式。过滤器应该被添加在 JavaScript 表达式的尾部,由“管道”符指示;
1.1.1. 私有过滤器
HTML元素:
1
私有
filters
定义方式:
1filters: {
使用 ES6 中的字符串新方法
1
或用如下方式来填充:
1
1.1.2. 全局过滤器
1
注意:当有局部和全局两个名称相同的过滤器时候,会以就近原则进行调用,即:局部过滤器优先于全局过滤器被调用!
1.2. 键盘修饰符以及自定义键盘修饰符
1.2.1. 1.x中自定义键盘修饰符【了解即可】
1
1.2.2. 2.x中自定义键盘修饰符
通过
Vue.config.keyCodes.名称 = 按键值
来自定义案件修饰符的别名:
1Vue.
使用自定义的按键修饰符:
1<
1.3. 自定义指令
自定义全局和局部的 自定义指令:
1
自定义指令的使用方式:
1<
1.4. Vue 1.x 中 自定义元素指令【已废弃,了解即可】
1Vue.elementDirective(
使用方式:
1
1.5. vue实例的生命周期
什么是生命周期:从Vue实例创建、运行、到销毁期间,总是伴随着各种各样的事件,这些事件,统称为生命周期!
生命周期钩子:就是生命周期事件的别名而已;
生命周期钩子 = 生命周期函数 = 生命周期事件
主要的生命周期函数分类:
创建期间的生命周期函数:
beforeCreate:实例刚在内存中被创建出来,此时,还没有初始化好 data 和 methods 属性
created:实例已经在内存中创建OK,此时 data 和 methods 已经创建OK,此时还没有开始 编译模板
beforeMount:此时已经完成了模板的编译,但是还没有挂载到页面中
mounted:此时,已经将编译好的模板,挂载到了页面指定的容器中显示
运行期间的生命周期函数:
beforeUpdate:状态更新之前执行此函数, 此时 data 中的状态值是最新的,但是界面上显示的 数据还是旧的,因为此时还没有开始重新渲染DOM节点
updated:实例更新完毕之后调用此函数,此时 data 中的状态值 和 界面上显示的数据,都已经完成了更新,界面已经被重新渲染好了!
销毁期间的生命周期函数:
beforeDestroy:实例销毁之前调用。在这一步,实例仍然完全可用。
destroyed:Vue 实例销毁后调用。调用后,Vue 实例指示的所有东西都会解绑定,所有的事件监听器会被移除,所有的子实例也会被销毁。
1.6. Vue中的动画
为什么要有动画:动画能够提高用户的体验,帮助用户更好的理解页面中的功能;
1.6.1. 使用过渡类名
HTML结构:
1
VM 实例:
1
定义两组类样式:
1
1.6.2. 使用第三方 CSS 动画库
导入动画类库:
1
定义 transition 及属性:
1
1.6.3. 使用动画钩子函数
定义 transition 组件以及三个钩子函数:
1
定义三个 methods 钩子方法:
1methods: {
定义动画过渡时长和样式:
1
1.6.4. v-for 的列表过渡
定义过渡样式:
1
定义DOM结构,其中,需要使用 transition-group 组件把 v-for 循环的列表包裹起来:
1
定义 VM 中的结构:
1
1.6.5. 列表的排序过渡
组件还有一个特殊之处。不仅可以进入和离开动画,还可以改变定位。要使用这个新功能只需了解新增的
v-move
特性,它会在元素的改变定位的过程中应用。
v-move
和v-leave-active
结合使用,能够让列表的过渡更加平缓柔和:
1
不甘于「本该如此」,「多选参数 」值得关注