第4章：自定义指令与过渡

　　五，自定义指令

　　分类：全局指令，局部指令

　　1.自定义全局指令

　　用法

// 注册
Vue.directive('my-directive', {
  bind: function () {},
  inserted: function () {},
  update: function () {},
  componentUpdated: function () {},
  unbind: function () {}
})

// 注册 (指令函数)
Vue.directive('my-directive', function () {
  // 这里将会被 `bind` 和 `update` 调用
})

// getter，返回已注册的指令
var myDirective = Vue.directive('my-directive')

　　解析：自定义指令允许用户自定义指令，在指令内定义函数分别代表

　　bind:指令第一次绑定元素调用，只调用一次可执行初始化操作

　　inserted:元素插入DOM时调用

　　update:元素更新时调用

　　componentUpdated:被绑定元素完成一次更新周期调用

　　unbind:元素解绑时调用

　　示例day02/08.html




	
	自定义指令
	


	
        // 定义指令使用hello使用的时候需要加前缀v-
        {{msg}}

　　页面显示

　　钩子函数的参数

　　指令钩子函数会被传入以下参数

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 钩子中可用。

　　示例08.html




	
	自定义指令
	


	
        
        
        
        {{msg}}

　　页面显示

　　简化也可以注册一个函数，在bind和update

　　注册指令函数，bind和update会被调用

　　示例




	
	自定义指令
	


	
        
        
        
        {{msg}}

　　页面显示

　　在绑定和更新数据的时候调用函数

　　2，自定义局部指令

　　在vue实例内部定义

　　示例：页面刷新获得焦点




	
	自定义指令

　　3，练习

　　拖动页面中的元素，使其移动，松开鼠标不移动

　　onmouseover onmouseout　　

　　09.html




	
	练习：自定义指令
	
	


	
		itany
		网博

　　页面显示

　　六，动画（过渡）

　　1.简介

　　Vue在插入，更新或者移除DOM时，提供多种不同方式的应用过滤效果

　　本质上还是使用CSS3动画：transition，animation

　　2.基本用法

　　使用transition组件，将要执行动画的元素包含在该组件内

　　示例,演示淡入淡出效果，网页上的一个标签正常显示与不显示的效果是立即生效的，没有渐渐的过程下面演示动画效果

　　day02/10.html

　　3，钩子函数

　　解析：需要演示效果的

标签包含在标签内，这个标签自定义名称fade，然后在样式里定义过渡的类名状态来实现动画效果

　　在进入/离开的过渡中，会有 6 个 class 切换。

v-enter：定义进入过渡的开始状态。在元素被插入之前生效，在元素被插入之后的下一帧移除。
v-enter-active：定义进入过渡生效时的状态。在整个进入过渡的阶段中应用，在元素被插入之前生效，在过渡/动画完成之后移除。这个类可以被用来定义进入过渡的过程时间，延迟和曲线函数。
v-enter-to：2.1.8 版及以上定义进入过渡的结束状态。在元素被插入之后下一帧生效 (与此同时 v-enter 被移除)，在过渡/动画完成之后移除。
v-leave：定义离开过渡的开始状态。在离开过渡被触发时立刻生效，下一帧被移除。
v-leave-active：定义离开过渡生效时的状态。在整个离开过渡的阶段中应用，在离开过渡被触发时立刻生效，在过渡/动画完成之后移除。这个类可以被用来定义离开过渡的过程时间，延迟和曲线函数。
v-leave-to：2.1.8 版及以上定义离开过渡的结束状态。在离开过渡被触发之后下一帧生效 (与此同时 v-leave 被删除)，在过渡/动画完成之后移除。

　　代码解析

　　页面显示

　　注意：fade-enter要放在最后位置，否则动画效果不实现

　　可以在 attribute 中声明 JavaScript 钩子，在动画执行的各个过程绑定一些方法

　　示例 day02/10.html

　　页面显示

　　省略其他几张截图

　　本次使用alert只是演示执行的过程，有什么用呢，这几个钩子函数传递参数el可以对这个DOM执行一些样式等操作

　　例如想要进入之后显示为蓝色

afterEnter(el){
                    alert('动画进入之后');
                    el.style.background='blue';
},

　　4，结合第三方动画库animate..css一起使用

　　示例day02/11.html

　　页面显示

　　注意：需要引入animate.css样式，需要加入初始样式animated否则不生效

　　可以在https://www.dowebok.com/demo/2014/98/ 查看anmiated演示效果

　　5，多元素动画

　　多元素动画需要使用标签，还需要给内部的每一个元素使用关键字:key指定唯一的key

　　示例day02/12.html




	
	多元素动画
	
	
	


	
		
		
		
			itany
			网博

　　页面显示

　　6，练习

　　要求在输入框输入字符，然后根据字符显示元素

　　day02/13.html




	
	练习：多元素动画
	
	
	


	
		
		
		
			
				{{v}}

　　解析：　　

　　定义一个计算属性arr2，输入框绑定的元素是name，如果输入框的字符出现在arr列表中，则把这个字符投入temp列表中，最后返回temp列表就是包含输入框字符的所有arr里面的元素的一个列表，arr2是计算属性，依赖于返回的temp，然后显示包含输入框字符的所有arr列表里面的元素。

　　页面显示

Vue.js学习

第4章：自定义指令与过渡

五，自定义指令

1.自定义全局指令

{{msg}}

{{msg}}

{{msg}}

2，自定义局部指令

3，练习

六，动画（过渡）

1.简介

2.基本用法

3，钩子函数

4，结合第三方动画库animate..css一起使用

5，多元素动画

6，练习

相关

标签

　　五，自定义指令

　　1.自定义全局指令

　　2，自定义局部指令

　　3，练习

　　六，动画（过渡）

　　1.简介

　　2.基本用法

　　3，钩子函数

　　4，结合第三方动画库animate..css一起使用

　　5，多元素动画

　　6，练习