七天学完Vue之第二天学习笔记（自定指令，过滤器，生命周期函数，动画效果）

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=’ ’ )来填充字符串;

谢谢观看~