Vue中的其它自定義項
自定義按鍵修飾符
- 用法：
在Vue的1.0.17+中預設的按鍵修飾符是儲存在Vue.directive('on').keyCodes中，我們可以通過該方法自定義自己的按鍵修飾符.
例如我當將a定義為按鍵修飾符，寫法如下：
Vue.directive('on').keyCodes.A=65
原始碼
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Vue</title> </head> <body> <div id="app"> 輸入的內容為：{{hello}}<br><br> <input type="text" v-model="kw" @keydown.A="show"> </div> </body> <script src="../../../js/vue/vue/1.0/vue.js"></script> <script type="application/javascript"> //設定自定義按鍵修飾符，此時設定的按鍵為A Vue.directive('on').keyCodes.A=65; //建立Vue物件 var vm = new Vue({ el:'#app' ,data:{ hello:'' ,kw:'' } ,methods:{ show(){ this.hello = this.kw; this.kw = ''; } } }); </script> </html>
執行結果：
分析
從上面的結果圖中我們可以看出，當我們在文字框中輸入Hello World !，再點選鍵盤上的A按鍵時，此時其會通過@keydown.A呼叫show方法，該方法完成的操作一共有兩個，其一是將文字框中的內容在文字框上面以字串形式輸出Hello World !；其二是將文字框內部的內容清空。由於Vue是先執行的事件響應，然後才執行的文字錄入操作，所以說當上面兩個操作執行完成後，輸入框中的內容為空，此時才完成a的文字錄入，所以說文字框中最後就只剩下了一個a。
自定義指令
- 關鍵字：
directive(String,Function) - 作用：
Vue中除了預設設定的核心指令（v-model
v-show），Vue也允許使用者註冊自己的自定義指令。
從上面我們得知，該自定義指令的關鍵字為directive，其一共有兩個引數，其一是自定義指令的名稱字串，其二是該自定義指令的回撥函式體。
原始碼
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Vue</title> </head> <body> <div id="app"> <input type="text" v-focus v-color="colorRed" v-model="search" > </div> </body> <script src="../../../js/vue/vue/1.0/vue.js"></script> <script type="application/javascript"> //自定義指令 //將游標自動定位到當前文字框中 Vue.directive('focus',function () { var inputObj = this.el; inputObj.focus(); }); //將文字框輸入的字型顏色變為紅色——帶引數的指令 Vue.directive('color',function () { this.el.style.color = this.vm[this.expression]; }); //建立Vue物件 var vm = new Vue({ el:'#app' ,data:{ search:'' ,colorRed:'red' } }); </script> </html>
結果
分析
上面的程式碼中一共實現了兩條自定義指令：
其一是focus，使用方法是在頁面的DOM元素上新增v-focus屬性，其作用是將頁面的游標自定的定位到該文字框中（當然，游標定位到文字框中的結果圖片就過於簡單，因而省略了）
其二就是color，其使用方法為v-color該指令允許給其傳值，如上面的示例中，我們給其傳入的值為colorRed，其在Vue的data作用域中所對應的顏色為colorRed:'red'（紅色），因而我們在文字框中輸入Hello World !時，我們就可以看到，該字型已經變成了紅色。
自定義頁面元素
- 關鍵字：
elementDirective(String,Object) - 作用：
利用該關鍵字建立自己的自定義頁面元素，以此來實現自己的特定頁面元素處理要求。
原始碼
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Vue</title>
</head>
<body>
<div id="app">
<p>格式化前：</p>
<div>{{time}}</div>
<p>格式化後：</p>
<time-fmt>{{time}}</time-fmt>
</div>
</body>
<script src="../../../js/vue/vue/1.0/vue.js"></script>
<script type="application/javascript">
//自定義頁面元素
//自定義時間格式化Dom元素
Vue.elementDirective('time-fmt',{
bind:function () {
var time;
//1、字串擷取操作，獲取time-fmt標籤中被{{}}所包含的元素
var innerText = this.el.innerText; //其中的內容為{{time}}
//2、用正則表示式替換{{}}
var key = innerText.replace(/(^\{{)|(\}})$/g,'');
//3、遍歷Vue物件的所有資料域this.vm.$data
for(item in this.vm.$data){
//4、如果兩者一樣，則獲取對應的資料域中的值
if(item == key){
time = this.vm.$data[item];
}
}
//5、格式化時間物件
var res = '';
var year = time.getFullYear();
var month = time.getMonth() + 1;
var day = time.getDate();
var hour = time.getHours();
var minite = time.getMinutes();
var second = time.getSeconds();
//將其拼接成格式化後的字串
res = year + '-' + month + '-' + day + ' ' + hour + ':' + minite + ':' + second;
//6、將time-fmt自定義元素中的文字替換成格式化後的字串
this.el.innerText = res;
//7、程式執行結束，返回一個空物件
return;
}
});
//建立Vue物件
var vm = new Vue({
el:'#app'
,data:{
time:new Date()
}
});
</script>
</html>
結果
分析
如上圖所示，我們用elementDirective建立了一個自定義的DOM元素<time-fmt>，其實現的功能就是對時間字串的格式化操作。
其具體思路如下：
1、我們獲取<time-fmt>中所包含的文字，其方法為：this.el.innerText，該方法獲取的內容為{{time}}。
2、我們將其{{}}將其替換成‘’，使用replace(/(^\{{)|(\}})$/g,'')，替換後的結果為time。
3、遍歷Vue物件的所有資料域this.vm.$data，此時程式會檢索$data其中所有物件的key值。
4、當我們發現其中有與步驟2中的key相同的字串時，此時我們獲取當前物件中的對應值，即this.vm.$data[item]。
5、按照前面幾篇文章中提及的時間物件格式化方式，在此進行相應的格式化操作。
6、將time-fmt自定義元素中的文字替換成格式化後的字串。
7、該程式執行結束，停止程式的繼續執行。