整合營銷服務(wù)商
電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理
免費(fèi)咨詢熱線：
電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理
免費(fèi)咨詢熱線：
.自定義指令
分類：全局指令、局部指令
1.1 自定義全局指令
使用全局方法Vue.directive(指令I(lǐng)D,定義對象)
一個指令定義對象可以提供如下幾個鉤子函數(shù) (均為可選)：
示例：
<!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">更新數(shù)據(jù)</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("指令第一次綁定到元素上時調(diào)用，只調(diào)用一次，可執(zhí)行初始化操作");
},
inserted: function() {
alert("被綁定元素插入DOM中時調(diào)用");
},
update: function() {
alert("被綁定元素所在的模板更新時調(diào)用");
},
componentUpdated: function() {
alert("被綁定的元素所在的模板完成一次更新周期時調(diào)用，也就是更新完成了");
},
unbind: function() {
alert("指令與元素解綁時調(diào)用，只調(diào)用一次");
}
})
var vm=new Vue({
el: "#content",
data: {
msg: "hello"
},
methods: {
changeData:function(){
this.msg="world"
}
}
})
</script>
</body>
</html>
1.2 鉤子函數(shù)的參數(shù) (即 el、binding、vnode 和 oldVnode)
指令鉤子函數(shù)會被傳入以下參數(shù)：
el：指令所綁定的元素，可以用來直接操作 DOM 。 binding：一個對象，包含以下屬性：
vnode：Vue 編譯生成的虛擬節(jié)點(diǎn)。 oldVnode：上一個虛擬節(jié)點(diǎn)，僅在 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">更新數(shù)據(jù)</button> -->
<div v-demo:我是參數(shù)=666>鉤子函數(shù)參數(shù)</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("指令第一次綁定到元素上時調(diào)用，只調(diào)用一次，可執(zhí)行初始化操作");
},
inserted: function() {
alert("被綁定元素插入DOM中時調(diào)用");
},
update: function() {
alert("被綁定元素所在的模板更新時調(diào)用");
},
componentUpdated: function() {
alert("被綁定的元素所在的模板完成一次更新周期時調(diào)用，也就是更新完成了");
},
unbind: function() {
alert("指令與元素解綁時調(diào)用，只調(diào)用一次");
}
})
//鉤子函數(shù)的參數(shù)
Vue.directive('demo',{
bind(el,binding){
console.log(el);//指令所綁定的元素,DOM對象
el.style.color="red";//可以對DOM對象進(jìn)行操作
console.log(binding);//一個對象,包含了name、value等屬性
console.log(binding.name)//demo
console.log(binding.value)//666
console.log(binding.arg)//傳給指令的參數(shù)(我是參數(shù))
}
})
//傳入一個簡單的函數(shù)（也就是不寫那么多鉤子函數(shù)，直接寫方法）,bind和update時調(diào)用
Vue.directive('simple',function(){
alert("bind和update時調(diào)用");
})
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">更新數(shù)據(jù)</button>
<div v-demo:我是參數(shù)=666>鉤子函數(shù)參數(shù)</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("指令第一次綁定到元素上時調(diào)用，只調(diào)用一次，可執(zhí)行初始化操作");
},
inserted: function() {
alert("被綁定元素插入DOM中時調(diào)用");
},
update: function() {
alert("被綁定元素所在的模板更新時調(diào)用");
},
componentUpdated: function() {
alert("被綁定的元素所在的模板完成一次更新周期時調(diào)用，也就是更新完成了");
},
unbind: function() {
alert("指令與元素解綁時調(diào)用，只調(diào)用一次");
}
})
//鉤子函數(shù)的參數(shù)
Vue.directive('demo', {
bind(el, binding) {
console.log(el); //指令所綁定的元素,DOM對象
el.style.color="red"; //可以對DOM對象進(jìn)行操作
console.log(binding); //一個對象,包含了name、value等屬性
console.log(binding.name) //demo
console.log(binding.value) //666
console.log(binding.arg) //傳給指令的參數(shù)(我是參數(shù))
}
})
//傳入一個簡單的函數(shù)（也就是不寫那么多鉤子函數(shù)，直接寫方法）,bind和update時調(diào)用
Vue.directive('simple', function() {
alert("bind和update時調(diào)用");
})
var vm=new Vue({
el: "#content",
data: {
msg: "hello"
},
methods: {
changeData: function() {
this.msg="world"
}
},
directives: { //自定義局部指令
focus: {
//當(dāng)被綁定元素插入到DOM中時,獲取焦點(diǎn)
inserted(el) {
el.focus();
}
}
}
})
</script>
</body>
</html>
1.4 練習(xí)
拖動頁面中的元素
鼠標(biāo)事件（onmouseover,onmouseout,onmousedown,onmousemove,onmouseup）
多數(shù)時候，我們的APP應(yīng)用程序中需要有好的提示信息，比如用戶登錄成功，使用消失3秒鐘的登錄成功；或者當(dāng)用戶登錄失敗時，提示失敗原因；或者網(wǎng)絡(luò)連接失敗時，提示網(wǎng)絡(luò)錯誤等等。在MUI中，我們可以使用MUI框架提供的消息框，同時我們也可以使用H5+ API提供的nativeUI（管理系統(tǒng)原生界面，可用于彈出系統(tǒng)原生提示對話框窗口、時間日期選擇對話框、等待對話框等）。nativeUI相對于MUI框架提供的消息框功能點(diǎn)要全面一些，其包含彈出系統(tǒng)選擇按鈕框、彈出系統(tǒng)提示對話框、彈出系統(tǒng)確認(rèn)對話框、顯示/關(guān)閉系統(tǒng)等待對話框、顯示/關(guān)閉自動消失的提示消息、預(yù)覽圖片、彈出系統(tǒng)時間選擇對話框、彈出系統(tǒng)輸入對話框功能，接下來我們將一一做詳細(xì)介紹。
這類選擇框，可以用于如HTML 中select標(biāo)簽所代表的含義，比如選擇數(shù)據(jù)的狀態(tài)，我們可以設(shè)置為啟用或者禁用。
/**
* @description 彈出系統(tǒng)選擇按鈕框
* @example NativeUIObj plus.nativeUI.actionSheet(actionsheetStyle, actionsheetCallback);
* @param {actionsheetStyle} 選擇按鈕框顯示的樣式
* @param {actionsheetCallback} 選擇按鈕框關(guān)閉后的回調(diào)函數(shù)
*/
plus.nativeUI.actionSheet({
title: "彈出系統(tǒng)選擇按鈕框", //選擇按鈕框的標(biāo)題
cancel: "取消", //取消按鈕上顯示的文字內(nèi)容
buttons: [ //選擇框上的按鈕
{
title: '提交', //按鈕上顯示的文字內(nèi)容
color: '#FF0000' //按鈕上顯示文字顏色
},
{
title: '取消',
color: '00FF00'
}
]
}, function(e) {
//按鈕框關(guān)閉后的操作
});
這類控件我們一般用于需要確認(rèn)后才能進(jìn)行下一步處理的業(yè)務(wù)邏輯，或者登錄失敗，用戶需要確認(rèn)后再次進(jìn)行登錄數(shù)據(jù)驗(yàn)證。
/**
* @description 彈出系統(tǒng)提示對話框
* @example void plus.nativeUI.alert(message, alertCB, title, buttonCapture);
* @param {message} 提示對話框上顯示的內(nèi)容
* @param {alertCB} 提示對話框上關(guān)閉后的回調(diào)函數(shù)
* @param {title} 提示對話框上顯示的標(biāo)題
* @param {buttonCapture} 提示對話框上按鈕顯示的內(nèi)容
*/
plus.nativeUI.alert('用戶名不能為空！', function(e) {
//關(guān)閉對話框后刷新驗(yàn)證碼
}, '警告', '確定');
這類控件用于業(yè)務(wù)數(shù)據(jù)操作提示，防止用戶在不需要的時候誤點(diǎn)導(dǎo)致的數(shù)據(jù)提交，相當(dāng)于用戶在提交之前需要對所提交的數(shù)據(jù)進(jìn)行再次確認(rèn)是否需要提交。
/**
* @description 彈出系統(tǒng)確認(rèn)對話框
* @example void plus.nativeUI.confirm(message, confirmCB, styles);
* @param {message} 確認(rèn)對話框上顯示的內(nèi)容
* @param {confirmCB} 確認(rèn)對話框關(guān)閉后的回調(diào)函數(shù)
* @param {styles} 確認(rèn)對話框的參數(shù)
*/
plus.nativeUI.confirm('您確定要啟用該菜單項(xiàng)？', function(e) {
//點(diǎn)擊確定后需要繼續(xù)的操作
}, {
title: '再次確認(rèn)',//確認(rèn)對話框顯示的標(biāo)題
buttons: [//確認(rèn)對話框上顯示的按鈕
"確定", "取消"
],
verticalAlign: 'center',//對話框在屏幕中的垂直分享對齊方式,top|center|bottom
});
我們一般用于需要根據(jù)日期來查詢數(shù)據(jù)的時候，使用該控件可以簡單的進(jìn)行日期選擇查詢。
/**
* @description 彈出系統(tǒng)日期選擇對話框
* @example void plus.nativeUI.pickDate(successCB, errorCB, style)
* @param {successCB} 日期選擇操作成功的回調(diào)函數(shù)
* @param {errorCB} 日期選擇操作取消或失敗的回調(diào)函數(shù)
* @param {style} 日期選擇操作的參數(shù)
*/
plus.nativeUI.pickDate(function(e) {
var d=e.date;
//選擇日期進(jìn)行查詢
}, function(e) {
//取消或失敗的提示信息
});
時間對話框和日期選擇對話框用途基本相似，只不過，時間選擇對話框更加具體。
/**
* @description 彈出系統(tǒng)時間選擇對話框
* @example void plus.nativeUI.pickTime(successCB, errorCB, styles)
* @param {successCB} 時間選擇操作成功的回調(diào)函數(shù)
* @param {errorCB} 時間選擇操作取消或失敗的回調(diào)函數(shù)
* @param {styles} 時間選擇操作的參數(shù)
*/
plus.nativeUI.pickTime(function(e) {
var d=e.date;
//選擇時間進(jìn)行查詢
}, function(e) {
//取消或失敗的提示信息
}, {
title: "選擇查詢時間",//時間選擇對話框顯示的標(biāo)題
is24Hour: true,//是否24小時制模式
//time 默認(rèn)顯示時間, popover彈出指定區(qū)域{top:10;left:10;width:200;height:200;}
})
這類控件一般用于需要輸入?yún)?shù)后再執(zhí)行業(yè)務(wù)處理操作的區(qū)域，比如我們需要修改密碼，我們可以彈出輸入對話框，填寫修改后的密碼，進(jìn)行修改密碼操作。
/**
* @description 彈出系統(tǒng)輸入對話框
* @example void plus.nativeUI.prompt(message, promptCB, title, tip, buttons);
* @param {message} 輸入對話框上顯示的內(nèi)容
* @param {promptCB} 關(guān)閉輸入對話框的回調(diào)函數(shù)
* @param {title} 輸入對話框上顯示的標(biāo)題
* @param {tip} 輸入對話框上編輯框顯示的提示文字
* @param {buttons} 輸入對話框上顯示的按鈕數(shù)組
*/
plus.nativeUI.prompt('請輸入您要修改的密碼：', function(e) {
//點(diǎn)擊按鈕后的操作
}, '修改密碼', '您的新密碼', ['確定', '取消']);
一般用于打開頁面，渲染數(shù)據(jù)時。數(shù)據(jù)未渲染完成前，顯示等待對話框，數(shù)據(jù)渲染完成后，關(guān)閉等待對話框。
plus.nativeUI.showWaiting("正在加載..."); //顯示系統(tǒng)等待對話框
setTimeout(function() {
plus.nativeUI.closeWaiting(); //關(guān)閉系統(tǒng)等待對話框
}, 2000);
該控件是一個簡單的控件，其經(jīng)常用于不干擾用戶操作情況下的信息提示。
plus.nativeUI.toast("我是自動小時提示框", {
duration: 3000
}); //顯示自動消失的提示信息
setTimeout(function() {
plus.nativeUI.closeToast(); //關(guān)閉已經(jīng)顯示的所有自動消失的提示框
}, 1500)
這是我們在APP中經(jīng)常會用到的一個控件，比如頭像上傳時我們需要預(yù)覽一下是否是我們指定的頭像。
自己做個網(wǎng)站，不會前端，不會CSS，怎么辦？就算會PHP和Java等世界最好的語言，如果不會前端和css，也很難做出漂亮的網(wǎng)站來。
今天，冉雷為大家搜集了幾款基于Material Design設(shè)計(jì)的UI組件庫或框架，可以很好的解決上述問題。
Google I/O 2014 發(fā)布的 Material Design 漸漸成為統(tǒng)一 Android Mobile、Android Table、Desktop Chrome 等全平臺設(shè)計(jì)語言規(guī)范，對從業(yè)人員意義重大。
一款基于 Material Design 的現(xiàn)代響應(yīng)式前端框架。
MUI是一個輕量級的CSS框架，遵循Google的Material Design設(shè)計(jì)方針。
MDUI 是一套用于開發(fā) Material Design 網(wǎng)頁的前端框架。特點(diǎn)如下：
多主題
輕量級
響應(yīng)式
無依賴
高性能
模塊化
本地化
組件豐富
低學(xué)習(xí)成本
一個基于Google’s Material Design的react組建框架。喜歡Material design，又喜歡用react的，適合折騰這個框架了。
Material Design Lite 不依賴任何js框架，讓你輕松將網(wǎng)站樣式切換到md設(shè)計(jì)。
同時基于Foundation UI和material design設(shè)計(jì)理念的框架。
基于angular框架的material design框架，特點(diǎn)如下：
輕松從0到完成app開發(fā)
性能優(yōu)異
單獨(dú)為angular優(yōu)化
基于Bootstrap 4的material design設(shè)計(jì)框架。
該框架使用了AngularJS和sass開發(fā)。
是Material Design的Vue.js 版本。
顧名思義，又一個Material Design的bootstrap版本。
*請認(rèn)真填寫需求信息，我們會在24小時內(nèi)與您取得聯(lián)系。
