1.5. 第二天 （自定指令，过滤器，生命周期函数，动画效果）
1.5.1. 删除的两种方式
1.使用some找到下标
this.lists.some((item,i) => {
if (item.id == id) {
this.lists.splice(i, 1)
console.log(i)
return true
}
})
2.使用findIndex
var index = this.lists.findIndex(item=>{
if(item.id == id) {
return true;
}
})
this.lists.splice(index,1);
1.5.2. 判断字符串存在的两种方式
1.使用forEach
var array = [];
this.lists.forEach(item=> {
if(item.name.indexOf(keywords) != -1) {
array.push(item);
}
})
return array;
2.使用filter
var newlist = this.lists.filter(item => {
if (item.name.includes(keywords)){
return true;
}
})
return newlist;
1.5.3. 过滤器
概念: Vue.js允许你自定义过滤器,可被用作-些常见的文本格式化。
过滤器可以用在两个地方: mustache插值和v-bind表达式。
过滤器应该被添加
在JavaScript表达式的尾部,由“管道"符指示;
• 全局
Vue.filter('dataFormat', function(datsStr) {
内容
});
• 私有
1.私有[ filters定义方式:
filters: {
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');
}
1.5.4. 自定义按键修饰符
你还可以通过全局 config.keyCodes 对象自定义按键修饰符别名
1.5.5. 自定义指令
简写的形式是，把第二个参数的对象改成一个函数，此函数代替了bind与update
在很多时候，你可能想在 bind 和 update 时触发相同行为，而不关心其它的钩子。比如这样写：
Vue.directive('color-swatch', function (el, binding) {
el.style.backgroundColor = binding.value
})
• 全局
// 注册一个全局自定义指令 v-focus
Vue.directive('focus', {
// 当被绑定的元素插入到 DOM 中时……
inserted: function (el) {
// 聚焦元素
el.focus()
}
})
//其中:参数1:指令的名称,注意,在定义的时候，指令的名称前面,不需要加v-前缀，
//但是:在调用的时候，必须在指令名称前加上v-前缀来进行调用
//参数2:是一个对象，这个对象身上，有一些指令相关的函数，这些函数可以在特定的阶段，执行相关的操作
• 局部
directives: {
focus: {
// 指令的定义
inserted: function (el) {
el.focus()
}
}
}
• 钩子函数
bind：只调用一次，指令第一次绑定到元素时调用。在这里可以进行一次性的初始化设置。
inserted：被绑定元素插入父节点时调用
(仅保证父节点存在，但不一定已被插入文档中)。
update：所在组件的 VNode 更新时调用，但是可能发生在其子 VNode
更新之前。指令的值可能发生了改变，也可能没有。但是你可以通过比较更新前后的值来忽略不必要的模板更新 (详细的钩子函数参数见下)。
• 钩子函数的参数
指令钩子函数会被传入以下参数：
el：指令所绑定的元素，可以用来直接操作 DOM。
binding：一个对象，包含以下 property： name：指令名，不包括 v-
前缀。
value：指令的绑定值，例如：v-my-directive=“1 + 1” 中，绑定值为 2。
oldValue：指令绑定的前一个值，仅在 update 和 componentUpdated 钩子中可用。无论值是否改变都可用。
expression：字符串形式的指令表达式。例如 v-my-directive=“1 + 1” 中，表达式为 “1 + 1”。
arg：传给指令的参数，可选。例如 v-my-directive:foo 中，参数为 “foo”。
modifiers：一个包含修饰符的对象。例如：v-my-directive.foo.bar 中，修饰符对象为 { foo: true,
bar: true }。 vnode：Vue 编译生成的虚拟节点。移步 VNode API 来了解更多详情。
oldVnode：上一个虚拟节点，仅在 update 和 componentUpdated 钩子中可用。
1.5.6. vue实例的生命周期
什么是生命周期:从Vue实例创建、运行、到销毁期间,总是伴随著各种各样的重件, 这些事件,统称为生命周期!
生命周期钩子:就是生命周期事件的别名而已;
• 创建期间的生命周期函数
beforeCreate :实例刚在内存中被创建出来,此时,还没有初始化好data和methods属性
created :实例已经在内存中创建OK ,此时data和methods已经创建OK ,此时还没有开始编译模板
beforeMount :此时已经完成了模板的编译,但是还没有挂载到页面中
mounted :此时,已经将编译好的模板,挂载到了页面指定的容器中显示
• 运行期间的生命周期函数
beforeUpdate :状态更新之前执行此函数，此时data中的状态值是最新的,但是界面上 显示的数据还是旧的,因为此时还没有开始重新渲染DOM节点
updated :实例更新完毕之后调用此函数,此时data中的状态值和界面上显示的数据, 都已经完成了更新,界面已经被重新渲染好了!
• 销毁期间的生命周期函数
beforeDestroy :实例销毁之前调用。在这一步,实例仍然完全可用。
destroyed :Vue实例销毁后调用。调用后，Vue实例指示的所有东西都会解绑定,所有 的事件监听器会被移除,所有的子实例也会被销毁。
1.5.7. 动画效果
• 使用标签实现
Vue 提供了 transition 的封装组件，在下列情形中，可以给任何元素和组件添加进入/离开过渡
条件渲染 (使用 v-if)
条件展示 (使用 v-show)
动态组件
组件根节点
这里是一个典型的例子：
<div id="demo">
<button v-on:click="show = !show">
Toggle
</button>
<transition name="fade">
<p v-if="show">hello</p>
</transition>
</div>
new Vue({
el: '#demo',
data: {
show: true
}
})
.fade-enter-active, .fade-leave-active {
transition: opacity .5s;
}
.fade-enter, .fade-leave-to /* .fade-leave-active below version 2.1.8 */ {
opacity: 0;
}
• 自定义前缀
<transition name="自定义的前缀名字">
</transition>
• 使用animate.css类库实现
• 实现小球滑动实例
<body>
<div id="app">
<input type="button" value="快到碗里来" @click="flag= !flag" />
<transition
@before-enter="beforeEnter"
@enter="enter"
@after-enter="afterEnter">
<div id="cir" v-show="flag"></div>
</transition>
</div>
<script type="text/javascript">
var vm = new Vue({
el: '#app',
data: {
flag: false
},
methods: {
//动画初始位置
beforeEnter(el) {
el.style.transform = "translate(0, 0)"
},
//动画的结束位置
enter(el, done) {
el.offsetWidth //出现过度动画的效果
el.style.transition = 'all 2s ease'
el.style.transform = "translate(150px, 450px)"
done()
},
afterEnter(el) {
this.flag = !this.flag
}
}
});
</script>
</body>
• 使用实现列表动画
<!--在实现列表过渡的时候，如果需要过渡的元素,是通过v-for循环渲染出来的,不能使用
transition包裹,需要使用<transition-group>
<!--如果要为v-for循环创建的元素设置动画,必须为每一个元素设置:key -->
实例
<head>
<meta charset="utf-8">
<title>列表添加动画</title>
<script src="../js/vue.js" type="text/javascript" charset="utf-8"></script>
<style>
li {
margin-top: 10px;
border: 1px #1B6D85 solid;
}
li:hover {
background-color: #1B6D85;
}
.v-enter,
.v-leave-to{
opacity: 0;
transform: translateY(80px);
}
.v-enter-active,
.v-leave-active{
transition: all 1s ease;
}
</style>
</head>
<body>
<div id="app">
<label>
id:
<input type="text" v-model="id"/>
</label>
<label>
name:
<input type="text" v-model="name"/>
</label>
<input type="button" value="add" v-on:click="add()"/>
<ul>
<transition-group>
<li v-for="item in list" :key='item.id'>{{item.id}}---{{item.name}}</li>
</transition-group>
</ul>
</div>
<script type="text/javascript">
var vm = new Vue({
el:'#app',
data:{
id: '',
name: '',
list: [
{id:1, name: '贾真琦'},
{id:2, name: '科比'}
]
},
methods:{
add() {
this.list.push({id: this.id, name: this.name})
this.id = this.name = ''
}
}
});
</script>
</body>
• 指令
/* 动画开始指令 */
.v-enter,
.v-leave-to{
opacity: 0;
transform: translateY(80px);
}
/* 动画运动指令 */
.v-enter-active,
.v-leave-active{
transition: all 1s ease;
}
/* 下面的. v-move 和v-leave-active配合使用，能够实现列表后续的元素，渐渐地漂上来的效果★ */
.v-move{
transition: all 1s ease;
}
.v-leave-active{
position: absolute;
}
transition-group的appear属性与tag属性
<!-- 通过为<transition-group>添加 appear属性时，实现页面刚出现，入场有效果，但是此时会给li标签外渲染一个span标签，有损规范 -->
<!-- 因此可以为<transition-group>指定 tag="ul"，会将为<transition-group>渲染成ul标签，删除外层的ul -->
<transition-group appear tag="ul">
<li v-for="(item,i) in list" :key='item.id' @click="del(i)">{{item.id}}---{{item.name}}</li>
</transition-group>
1.5.8. 方法
• padStart与padEnd
理解1：
padStart()：用于头部补全。
padEnd()用于尾部补全。
一共接受两个参数，
第一个参数是用来指定字符串的长度，如果该值低于当前字符串的长度，则将按原样返回当前字符串
第二个参数是用来补全的字符串，如果此字符串太长而无法保持在目标长度内，则会截断该字符串并应用最左侧的部分，如果省略，将会用空格补全。
第一个参数用来指定字符串的最小长度，
第二个参数是用来补全的字符串。
理解2：
使用ES6中的字符串新方法String,prototype.padStart(maxLength, fllString=’ ’ )或
String.prototype.padEnd(maxLength, fllString=’ ’ )来填充字符串;
谢谢观看~
144
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
