自定义按键修饰符
- 用法：
在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、该程序执行结束，停止程序的继续运行。