Vue.js教程（七）-自定义指令

.自定义指令

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

1.1 自定义全局指令

使用全局方法Vue.directive(指令ID,定义对象)

一个指令定义对象可以提供如下几个钩子函数 (均为可选)：

bind：只调用一次，指令第一次绑定到元素时调用。在这里可以进行一次性的初始化设置。
inserted：被绑定元素插入父节点时调用 (仅保证父节点存在，但不一定已被插入文档中)。
update：所在组件的 VNode 更新时调用，但是可能发生在其子 VNode 更新之前。指令的值可能发生了改变，也可能没有。但是你可以通过比较更新前后的值来忽略不必要的模板更新
componentUpdated：指令所在组件的 VNode 及其子 VNode 全部更新后调用。
unbind：只调用一次，指令与元素解绑时调用。

示例：

<!doctype html>
<html>
 <head>
 	<meta charset="utf-8">
 	<title></title>
 	<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
 	<link href="../css/mui.min.css" rel="stylesheet" />
 </head>
 <body>
 	<header class="mui-bar mui-bar-nav">
 		<h1 class="mui-title">自定义指令</h1>
 	</header>
 	<div class="mui-content" id="content">
 		<div v-hello>{{msg}}</div>
 		<button @click="changeData()" type="button" class="mui-btn mui-btn-blue">更新数据</button>
 	</div>
 	<script src="../js/mui.min.js"></script>
 	<script src="../js/vue.js"></script>
 	<script type="text/javascript">
 		mui.init()
 		/**
 		 * 自定义全局指令
 		 * 注，使用自定义指令时必须在指令名称前加前缀v，即v-指令名称
 		 */
 		Vue.directive('hello', {
 			bind: function() {
 				alert("指令第一次绑定到元素上时调用，只调用一次，可执行初始化操作");
 			},
 			inserted: function() {
 				alert("被绑定元素插入DOM中时调用");
 			},
 			update: function() {
 				alert("被绑定元素所在的模板更新时调用");
 			},
 			componentUpdated: function() {
 				alert("被绑定的元素所在的模板完成一次更新周期时调用，也就是更新完成了");
 			},
 			unbind: function() {
 				alert("指令与元素解绑时调用，只调用一次");
 			}
 		})
 		var vm=new Vue({
 			el: "#content",
 			data: {
 				msg: "hello"
 			},
 			methods: {
 				changeData:function(){
 					this.msg="world"
 				}
 			}
 		})
 	</script>
 </body>
</html>

1.2 钩子函数的参数 (即 el、binding、vnode 和 oldVnode)

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

el：指令所绑定的元素，可以用来直接操作 DOM 。 binding：一个对象，包含以下属性：

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 编译生成的虚拟节点。 oldVnode：上一个虚拟节点，仅在 update 和 componentUpdated 钩子中可用。

示例：

<!doctype html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<link href="../css/mui.min.css" rel="stylesheet" />
	</head>
	<body>
		<header class="mui-bar mui-bar-nav">
			<h1 class="mui-title">自定义指令</h1>
		</header>
		<div class="mui-content" id="content">
<!-- 			<div v-hello>{{msg}}</div>
			<button @click="changeData()" type="button" class="mui-btn mui-btn-blue">更新数据</button> -->
			
			<div v-demo:我是参数=666>钩子函数参数</div>
			
			<div v-simple>hello world!</div>
		</div>
		<script src="../js/mui.min.js"></script>
		<script src="../js/vue.js"></script>
		<script type="text/javascript">
			mui.init()
			/**
			 * 自定义全局指令
			 * 注，使用自定义指令时必须在指令名称前加前缀v，即v-指令名称
			 */
			Vue.directive('hello', {
				bind: function() {
					alert("指令第一次绑定到元素上时调用，只调用一次，可执行初始化操作");
				},
				inserted: function() {
					alert("被绑定元素插入DOM中时调用");
				},
				update: function() {
					alert("被绑定元素所在的模板更新时调用");
				},
				componentUpdated: function() {
					alert("被绑定的元素所在的模板完成一次更新周期时调用，也就是更新完成了");
				},
				unbind: function() {
					alert("指令与元素解绑时调用，只调用一次");
				}
			})
			
			//钩子函数的参数
			Vue.directive('demo',{
				bind(el,binding){
					console.log(el);//指令所绑定的元素,DOM对象
					el.style.color="red";//可以对DOM对象进行操作
					
					console.log(binding);//一个对象,包含了name、value等属性
					console.log(binding.name)//demo
					console.log(binding.value)//666
					console.log(binding.arg)//传给指令的参数(我是参数)
				}
			})
			
			//传入一个简单的函数（也就是不写那么多钩子函数，直接写方法）,bind和update时调用
			Vue.directive('simple',function(){
				alert("bind和update时调用");
			})
			
			var vm=new Vue({
				el: "#content",
				data: {
					msg: "hello"
				},
				methods: {
					changeData:function(){
						this.msg="world"
					}
				}
			})
		</script>
	</body>
</html>

1.3 自定义局部指令

示例：

<!doctype html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<link href="../css/mui.min.css" rel="stylesheet" />
	</head>
	<body>
		<header class="mui-bar mui-bar-nav">
			<h1 class="mui-title">自定义指令</h1>
		</header>
		<div class="mui-content" id="content">
<!-- 			<div v-hello>{{msg}}</div>
			<button @click="changeData()" type="button" class="mui-btn mui-btn-blue">更新数据</button>
			<div v-demo:我是参数=666>钩子函数参数</div>
			<div v-simple>hello world!</div> -->
			<!-- 局部指令 -->
			<input v-focus type="text" v-model="msg">
		</div>
		<script src="../js/mui.min.js"></script>
		<script src="../js/vue.js"></script>
		<script type="text/javascript">
			mui.init()
			/**
			 * 自定义全局指令
			 * 注，使用自定义指令时必须在指令名称前加前缀v，即v-指令名称
			 */
			Vue.directive('hello', {
				bind: function() {
					alert("指令第一次绑定到元素上时调用，只调用一次，可执行初始化操作");
				},
				inserted: function() {
					alert("被绑定元素插入DOM中时调用");
				},
				update: function() {
					alert("被绑定元素所在的模板更新时调用");
				},
				componentUpdated: function() {
					alert("被绑定的元素所在的模板完成一次更新周期时调用，也就是更新完成了");
				},
				unbind: function() {
					alert("指令与元素解绑时调用，只调用一次");
				}
			})
			//钩子函数的参数
			Vue.directive('demo', {
				bind(el, binding) {
					console.log(el); //指令所绑定的元素,DOM对象
					el.style.color="red"; //可以对DOM对象进行操作
					console.log(binding); //一个对象,包含了name、value等属性
					console.log(binding.name) //demo
					console.log(binding.value) //666
					console.log(binding.arg) //传给指令的参数(我是参数)
				}
			})
			//传入一个简单的函数（也就是不写那么多钩子函数，直接写方法）,bind和update时调用
			Vue.directive('simple', function() {
				alert("bind和update时调用");
			})
			var vm=new Vue({
				el: "#content",
				data: {
					msg: "hello"
				},
				methods: {
					changeData: function() {
						this.msg="world"
					}
				},
				directives: { //自定义局部指令
					focus: {
						//当被绑定元素插入到DOM中时,获取焦点
						inserted(el) {
							el.focus();
						}
					}
				}
			})
		</script>
	</body>
</html>

1.4 练习

拖动页面中的元素

鼠标事件（onmouseover,onmouseout,onmousedown,onmousemove,onmouseup）

多数时候，我们的APP应用程序中需要有好的提示信息，比如用户登录成功，使用消失3秒钟的登录成功；或者当用户登录失败时，提示失败原因；或者网络连接失败时，提示网络错误等等。在MUI中，我们可以使用MUI框架提供的消息框，同时我们也可以使用H5+ API提供的nativeUI（管理系统原生界面，可用于弹出系统原生提示对话框窗口、时间日期选择对话框、等待对话框等）。nativeUI相对于MUI框架提供的消息框功能点要全面一些，其包含弹出系统选择按钮框、弹出系统提示对话框、弹出系统确认对话框、显示/关闭系统等待对话框、显示/关闭自动消失的提示消息、预览图片、弹出系统时间选择对话框、弹出系统输入对话框功能，接下来我们将一一做详细介绍。

弹出系统选择按钮框（actionSheet）

这类选择框，可以用于如HTML 中select标签所代表的含义，比如选择数据的状态，我们可以设置为启用或者禁用。

/**
 * @description 弹出系统选择按钮框
 * @example NativeUIObj plus.nativeUI.actionSheet(actionsheetStyle, actionsheetCallback);
 * @param {actionsheetStyle} 选择按钮框显示的样式
 * @param {actionsheetCallback} 选择按钮框关闭后的回调函数
 */
plus.nativeUI.actionSheet({
	title: "弹出系统选择按钮框", //选择按钮框的标题
	cancel: "取消", //取消按钮上显示的文字内容
	buttons: [ //选择框上的按钮
		{
			title: '提交', //按钮上显示的文字内容
			color: '#FF0000' //按钮上显示文字颜色
		},
		{
			title: '取消',
			color: '00FF00'
		}
	]
}, function(e) {
	//按钮框关闭后的操作
});

弹出系统提示对话框

这类控件我们一般用于需要确认后才能进行下一步处理的业务逻辑，或者登录失败，用户需要确认后再次进行登录数据验证。

/**
 * @description 弹出系统提示对话框
 * @example void plus.nativeUI.alert(message, alertCB, title, buttonCapture);
 * @param {message} 提示对话框上显示的内容
 * @param {alertCB} 提示对话框上关闭后的回调函数
 * @param {title} 提示对话框上显示的标题
 * @param {buttonCapture} 提示对话框上按钮显示的内容
 */
plus.nativeUI.alert('用户名不能为空！', function(e) {
	//关闭对话框后刷新验证码
}, '警告', '确定');

弹出系统确认对话框

这类控件用于业务数据操作提示，防止用户在不需要的时候误点导致的数据提交，相当于用户在提交之前需要对所提交的数据进行再次确认是否需要提交。

/**
 * @description 弹出系统确认对话框
 * @example void plus.nativeUI.confirm(message, confirmCB, styles);
 * @param {message} 确认对话框上显示的内容
 * @param {confirmCB} 确认对话框关闭后的回调函数
 * @param {styles} 确认对话框的参数
 */
plus.nativeUI.confirm('您确定要启用该菜单项？', function(e) {
	//点击确定后需要继续的操作
}, {
	title: '再次确认',//确认对话框显示的标题
	buttons: [//确认对话框上显示的按钮
		"确定", "取消"
	],
	verticalAlign: 'center',//对话框在屏幕中的垂直分享对齐方式,top|center|bottom
});

弹出系统日期选择对话框

我们一般用于需要根据日期来查询数据的时候，使用该控件可以简单的进行日期选择查询。

/**
 * @description 弹出系统日期选择对话框
 * @example void plus.nativeUI.pickDate(successCB, errorCB, style)
 * @param {successCB} 日期选择操作成功的回调函数
 * @param {errorCB} 日期选择操作取消或失败的回调函数
 * @param {style} 日期选择操作的参数
 */
plus.nativeUI.pickDate(function(e) {
	var d=e.date;
	//选择日期进行查询
}, function(e) {
	//取消或失败的提示信息
});

弹出系统时间选择对话框

时间对话框和日期选择对话框用途基本相似，只不过，时间选择对话框更加具体。

/**
 * @description 弹出系统时间选择对话框
 * @example void plus.nativeUI.pickTime(successCB, errorCB, styles)
 * @param {successCB} 时间选择操作成功的回调函数
 * @param {errorCB} 时间选择操作取消或失败的回调函数
 * @param {styles} 时间选择操作的参数
 */
plus.nativeUI.pickTime(function(e) {
	var d=e.date;
	//选择时间进行查询
}, function(e) {
	//取消或失败的提示信息
}, {
	title: "选择查询时间",//时间选择对话框显示的标题
	is24Hour: true,//是否24小时制模式
	//time 默认显示时间, popover弹出指定区域{top:10;left:10;width:200;height:200;}
})

弹出系统输入对话框

这类控件一般用于需要输入参数后再执行业务处理操作的区域，比如我们需要修改密码，我们可以弹出输入对话框，填写修改后的密码，进行修改密码操作。

/**
 * @description 弹出系统输入对话框
 * @example void plus.nativeUI.prompt(message, promptCB, title, tip, buttons);
 * @param {message} 输入对话框上显示的内容
 * @param {promptCB} 关闭输入对话框的回调函数
 * @param {title} 输入对话框上显示的标题
 * @param {tip} 输入对话框上编辑框显示的提示文字
 * @param {buttons} 输入对话框上显示的按钮数组
 */
plus.nativeUI.prompt('请输入您要修改的密码：', function(e) {
	//点击按钮后的操作
}, '修改密码', '您的新密码', ['确定', '取消']);

显示/关闭等待对话框

一般用于打开页面，渲染数据时。数据未渲染完成前，显示等待对话框，数据渲染完成后，关闭等待对话框。

plus.nativeUI.showWaiting("正在加载..."); //显示系统等待对话框
setTimeout(function() {
	plus.nativeUI.closeWaiting(); //关闭系统等待对话框
}, 2000);

显示/关闭自动提示消息对话框

该控件是一个简单的控件，其经常用于不干扰用户操作情况下的信息提示。

plus.nativeUI.toast("我是自动小时提示框", {
	duration: 3000
}); //显示自动消失的提示信息
setTimeout(function() {
	plus.nativeUI.closeToast(); //关闭已经显示的所有自动消失的提示框
}, 1500)

预览图片

这是我们在APP中经常会用到的一个控件，比如头像上传时我们需要预览一下是否是我们指定的头像。

自己做个网站，不会前端，不会CSS，怎么办？就算会PHP和Java等世界最好的语言，如果不会前端和css，也很难做出漂亮的网站来。

今天，冉雷为大家搜集了几款基于Material Design设计的UI组件库或框架，可以很好的解决上述问题。

Google I/O 2014 发布的 Material Design 渐渐成为统一 Android Mobile、Android Table、Desktop Chrome 等全平台设计语言规范，对从业人员意义重大。

materializecss http://materializecss.com/

一款基于 Material Design 的现代响应式前端框架。

MUI https://www.muicss.com/

MUI是一个轻量级的CSS框架，遵循Google的Material Design设计方针。

MDUI https://www.mdui.org/

MDUI 是一套用于开发 Material Design 网页的前端框架。特点如下：

多主题
轻量级
响应式
无依赖
高性能
模块化
本地化
组件丰富
低学习成本

Material-UI http://www.material-ui.com/

一个基于Google’s Material Design的react组建框架。喜欢Material design，又喜欢用react的，适合折腾这个框架了。

Material Design Lite https://getmdl.io/

Material Design Lite 不依赖任何js框架，让你轻松将网站样式切换到md设计。

Material Foundation https://eucalyptuss.github.io/material-foundation/

同时基于Foundation UI和material design设计理念的框架。

Angular Material https://material.angular.io/

基于angular框架的material design框架，特点如下：

轻松从0到完成app开发
性能优异
单独为angular优化

Material https://daemonite.github.io/material/

基于Bootstrap 4的material design设计框架。

LumX http://ui.lumapps.com/

该框架使用了AngularJS和sass开发。

Keen UI https://josephuspaye.github.io/Keen-UI/

是Material Design的Vue.js 版本。

Material Design for Bootstrap http://fezvrasta.github.io/bootstrap-material-design/

顾名思义，又一个Material Design的bootstrap版本。

Leaf CSS Framework http://getleaf.com/

在线咨询

上一篇：广西崇左家乡旅游网页设计，崇左美食美景网页成品模板
下一篇：asp.net文件断点上传

您的项目需求

*请认真填写需求信息，我们会在24小时内与您取得联系。

整合营销服务商