vue, 学习笔记第二弹!
vue
- 1.x 版本中的filterBy指令,在2.x中已经被废除:
filterBy - 指令
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16
| <tr v-for="item in list | filterBy searchName in 'name'">
<td>{{item.id}}</td>
<td>{{item.name}}</td>
<td>{{item.ctime}}</td>
<td>
<a href="#" @click.prevent="del(item.id)">删除</a>
</td>
</tr>
|
- 在2.x版本中手动实现筛选的方式:
- 筛选框绑定到 VM 实例中的
searchName
属性:
1 2 3 4
| <hr> 输入筛选名称:
<input type="text" v-model="searchName">
|
- 在使用
v-for
指令循环每一行数据的时候,不再直接 item in list
,而是 in
一个 过滤的methods 方法,同时,把过滤条件searchName
传递进去:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20
| <tbody>
<tr v-for="item in search(searchName)">
<td>{{item.id}}</td>
<td>{{item.name}}</td>
<td>{{item.ctime}}</td>
<td>
<a href="#" @click.prevent="del(item.id)">删除</a>
</td>
</tr>
</tbody>
|
search
过滤方法中,使用 数组的 filter
方法进行过滤:
1 2 3 4 5 6 7 8 9 10
| search(name) {
return this.list.filter(x => {
return x.name.indexOf(name) != -1;
});
}
|
过滤器
概念:Vue.js 允许你自定义过滤器,可被用作一些常见的文本格式化。过滤器可以用在两个地方:mustache 插值和 v-bind 表达式。过滤器应该被添加在 JavaScript 表达式的尾部,由“管道”符指示;
私有过滤器
- HTML元素:
1 2
| <td>{{item.ctime | dataFormat('yyyy-mm-dd')}}</td>
|
- 私有
filters
定义方式:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44
| filters: { // 私有局部过滤器,只能在 当前 VM 对象所控制的 View 区域进行使用
dataFormat(input, pattern = "") {
var dt = new Date(input);
var y = dt.getFullYear();
var m = (dt.getMonth() + 1).toString().padStart(2, '0');
var d = dt.getDate().toString().padStart(2, '0');
if (pattern.toLowerCase() === 'yyyy-mm-dd') {
return `${y}-${m}-${d}`;
} else {
var hh = dt.getHours().toString().padStart(2, '0');
var mm = dt.getMinutes().toString().padStart(2, '0');
var ss = dt.getSeconds().toString().padStart(2, '0');
return `${y}-${m}-${d} ${hh}:${mm}:${ss}`;
}
}
}
|
使用ES6中的字符串新方法 String.prototype.padStart(maxLength, fillString=’’) 或 String.prototype.padEnd(maxLength, fillString=’’)来填充字符串;
全局过滤器
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42
|
Vue.filter('dataFormat', function (input, pattern = '') {
var dt = new Date(input);
var y = dt.getFullYear();
var m = (dt.getMonth() + 1).toString().padStart(2, '0');
var d = dt.getDate().toString().padStart(2, '0');
if (pattern.toLowerCase() === 'yyyy-mm-dd') {
return `${y}-${m}-${d}`;
} else {
var hh = dt.getHours().toString().padStart(2, '0');
var mm = dt.getMinutes().toString().padStart(2, '0');
var ss = dt.getSeconds().toString().padStart(2, '0');
return `${y}-${m}-${d} ${hh}:${mm}:${ss}`;
}
});
|
注意:当有局部和全局两个名称相同的过滤器时候,会以就近原则进行调用,即:局部过滤器优先于全局过滤器被调用!
键盘修饰符以及自定义键盘修饰符
1.x中自定义键盘修饰符【了解即可】
1 2
| Vue.directive('on').keyCodes.f2 = 113;
|
- 通过
Vue.config.keyCodes.名称 = 按键值
来自定义案件修饰符的别名:
1 2
| Vue.config.keyCodes.f2 = 113
|
- 使用自定义的按键修饰符:
1 2
| <input type="text" v-model="name" @keyup.f2="add">
|
- 自定义全局和局部的 自定义指令:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36
|
Vue.directive('focus', {
inserted: function (el) {
el.focus();
}
});
directives: {
color: {
bind(el, binding) {
el.style.color = binding.value;
}
},
'font-weight': function (el, binding2) {
el.style.fontWeight = binding2.value;
}
}
|
- 自定义指令的使用方式:
1 2
| <input type="text" v-model="searchName" v-focus v-color="'red'" v-font-weight="900">
|
Vue 1.x 中 自定义元素指令【已废弃,了解即可】
1 2 3 4 5
| Vue.elementDirective('red-color', { bind: function () { this.el.style.color = 'red'; } });
|
使用方式:
1
| <red-color>1232</red-color>
|
- 什么是生命周期:从Vue实例创建、运行、到销毁期间,总是伴随着各种各样的事件,这些事件,统称为生命周期!
- 生命周期钩子:就是生命周期事件的别名而已;
- 生命周期钩子 = 生命周期函数 = 生命周期事件
- 主要的生命周期函数分类:
- 创建期间的生命周期函数:
- beforeCreate:实例刚在内存中被创建出来,此时,还没有初始化好 data 和 methods 属性
- created:实例已经在内存中创建OK,此时 data 和 methods 已经创建OK,此时还没有开始 编译模板
- beforeMount:此时已经完成了模板的编译,但是还没有挂载到页面中
- mounted:此时,已经将编译好的模板,挂载到了页面指定的容器中显示
- 运行期间的生命周期函数:
- beforeUpdate:状态更新之前执行此函数, 此时 data 中的状态值是最新的,但是界面上显示的 数据还是旧的,因为此时还没有开始重新渲染DOM节点
- updated:实例更新完毕之后调用此函数,此时 data 中的状态值 和 界面上显示的数据,都已经完成了更新,界面已经被重新渲染好了!
- 销毁期间的生命周期函数:
- beforeDestroy:实例销毁之前调用。在这一步,实例仍然完全可用。
- destroyed:Vue 实例销毁后调用。调用后,Vue 实例指示的所有东西都会解绑定,所有的事件监听器会被移除,所有的子实例也会被销毁。
为什么要有动画:动画能够提高用户的体验,帮助用户更好的理解页面中的功能;
使用过渡类名
- HTML结构:
1 2 3 4 5 6 7
| <div id="app"> <input type="button" value="动起来" @click="myAnimate"> <transition name="fade"> <div v-show="isshow">动画哦</div> </transition> </div>
|
- VM 实例:
1 2 3 4 5 6 7 8 9 10 11 12
| var vm = new Vue({ el: '#app', data: { isshow: false }, methods: { myAnimate() { this.isshow = !this.isshow; } } });
|
- 定义两组类样式:
1 2 3 4 5 6 7 8 9 10 11 12 13
| .fade-enter-active, .fade-leave-active { transition: all 0.2s ease; position: absolute; }
.fade-enter, .fade-leave-to { opacity: 0; transform: translateX(100px); }
|
- 导入动画类库:
1
| <link rel="stylesheet" type="text/css" href="./lib/animate.css">
|
- 定义 transition 及属性:
1 2 3 4 5 6
| <transition enter-active-class="fadeInRight" leave-active-class="fadeOutRight" :duration="{ enter: 500, leave: 800 }"> <div class="animated" v-show="isshow">动画哦</div> </transition>
|
使用动画钩子函数
- 定义 transition 组件以及三个钩子函数:
1 2 3 4 5 6 7 8 9
| <div id="app"> <input type="button" value="切换动画" @click="isshow = !isshow"> <transition @before-enter="beforeEnter" @enter="enter" @after-enter="afterEnter"> <div v-if="isshow" class="show">OK</div> </transition> </div>
|
- 定义三个 methods 钩子方法:
1 2 3 4 5 6 7 8 9 10 11 12 13
| methods: { beforeEnter(el) { el.style.transform = 'translateX(500px)'; }, enter(el, done) { el.offsetWidth; el.style.transform = 'translateX(0px)'; done(); }, afterEnter(el) { this.isshow = !this.isshow; } }
|
- 定义动画过渡时长和样式:
1 2 3
| .show{ transition: all 0.4s ease; }
|
- 定义过渡样式:
1 2 3 4 5 6 7 8 9 10 11 12
| <style> .list-enter, .list-leave-to { opacity: 0; transform: translateY(10px); }
.list-enter-active, .list-leave-active { transition: all 0.3s ease; } </style>
|
- 定义DOM结构,其中,需要使用 transition-group 组件把v-for循环的列表包裹起来:
1 2 3 4 5 6 7
| <div id="app"> <input type="text" v-model="txt" @keyup.enter="add">
<transition-group tag="ul" name="list"> <li v-for="(item, i) in list" :key="i">{{item}}</li> </transition-group> </div>
|
- 定义 VM中的结构:
1 2 3 4 5 6 7 8 9 10 11 12 13 14
| var vm = new Vue({ el: '#app', data: { txt: '', list: [1, 2, 3, 4] }, methods: { add() { this.list.push(this.txt); this.txt = ''; } } });
|
列表的排序过渡
<transition-group>
组件还有一个特殊之处。不仅可以进入和离开动画,还可以改变定位。要使用这个新功能只需了解新增的 v-move
特性,它会在元素的改变定位的过程中应用。
v-move
和 v-leave-active
结合使用,能够让列表的过渡更加平缓柔和:
1 2 3 4 5 6
| .v-move{ transition: all 0.8s ease; } .v-leave-active{ position: absolute; }
|