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