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小時內與您取得聯系。

整合營銷服務商