Vue.js旅程(二)

Vue中的指令

自定义指令

Vue的系统指令通常都是V-开头的这些指令

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
1、自定义属性指令Vue.directive(指令id(注意不能以v-开头,将来在使用的时候自动加上),function(){this.el})
属性指令举例:
<input type="text" v-focus> 中的 v-focus 这个指令我们称之为自定义属性指令
定义格式:
Vue.directive('focus',{
bind:function(){
//这个指令的逻辑
//可以利用this.el来获取到当前指令所在的元素对象
this.el.style.color = 'red';
}
});
2、自定义元素指令Vue.elementDirective(指令id,{bind:function(){}})
this.el
this.vm

例如实现一个自定义指令实现自动获取input框的焦点功能

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
<input type="text" v-focus>
完整写法:
Vue.directive('focus',{
bind:function(){
//这个指令的逻辑
//可以利用this.el来获取到当前指令所在的元素对象
this.el.focus();
}
});
简单写法:
Vue.directive('focus',function(){
this.el.focus();
});
//定义一个带有参数的自定义指令
Vue.directive('color',{
params:['colorname'],
bind:function(){
//1.0 获取到colorname的值
var cname = this.params.colorname;
//2.0 获取到el以后给其赋予一个样式
this.el.style.color = cname;
}
});
使用:
<input type="text" v-model="productid" v-color colorname="blue" >
特点:
1、指令的定义一定要放到 new Vue({}) 代码之前,否则报错并且无效
2、在利用Vue.directive()注册指令的时候,不需要加上v- 这个前缀
3、在dom元素上使用的时候,必须加上v- 前缀
4、如果想要给自定义属性指令传入参数,则注意:
1、在注册的时候要利用 params:[] 来接收参数
2、通过bind:function(){}中 利用 this.params点出和parms:[]中定义的那个字符串同名的属性
3、在dom元素上使用的时候
通过 v-color空格加上 parmas:[]中定义好的同名的参数名称

过滤器

  • 系统过滤器
    • Vue中本声就提供了一些过滤器供用户使用,但往往我们希望一些个性化的需求,这个时候就需要使用到自定义过滤器了
  • 自定义过滤器
    • 私有过滤器
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script src="../vue1028.js"></script>
</head>
<body>
<div id="app">
{{ time | datefmt}}
</div>
<div id="app1">
{{ time | datefmt}}
</div>
<script>
// 私有过滤器的弊端是:在多个VM中不能共享,会造成代码的冗余,将来维护成本高
// 像这种需求必须使用全局过滤器
new Vue({
el:'#app',
data:{
time:new Date()
},
filters:{
//定义在 VM中的filters对象中的所有过滤器都是私有过滤器
datefmt:function(input,str,s1){
var date = new Date(input);
var year = date.getFullYear();
var m = date.getMonth() + 1;
var d = date.getDate();
//输出: yyyy-mm-dd
var fmtStr = year+'-'+m +'-'+d;
return fmtStr; //输出结果
}
}
});
new Vue({
el:'#app1',
data:{
time:new Date()
},
filters:{
//定义在 VM中的filters对象中的所有过滤器都是私有过滤器
datefmt:function(input){
var date = new Date(input);
var year = date.getFullYear();
var m = date.getMonth() + 1;
var d = date.getDate();
//输出: yyyy-mm-dd
var fmtStr = year+'-'+m +'-'+d;
return fmtStr; //输出结果
}
}
})
</script>
</body>
</html>
  • 全局过滤器
    • 我们以同样的需求来说明全局过滤器
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script src="../vue1028.js"></script>
</head>
<body>
<div id="app">
{{ time | datefmt }}
</div>
<div id="app1">
{{ time | datefmt }}
</div>
<script>
// 私有过滤器的弊端是:在多个VM中不能共享,会造成代码的冗余,将来维护成本高
// 像这种需求必须使用全局过滤器
//1.0 定义全局过滤器
Vue.filter('datefmt',function(input){
var date = new Date(input);
var year = date.getFullYear();
var m = date.getMonth() + 1;
var d = date.getDate();
//输出: yyyy-mm-dd
var fmtStr = year+'-'+m +'-'+d;
return fmtStr; //输出结果
});
new Vue({
el:'#app',
data:{
time:new Date()
}
});
new Vue({
el:'#app1',
data:{
time:new Date()
}
})
</script>
</body>
</html>

v-on注册事件的按键修饰符

  • 利用enter修饰符实现品牌管理中的添加区域实现回车即新增
  • v-on绑定事件时的按键修饰符
1
2
3
4
5
6
7
8
9
10
11
12
通过 Vue.directive('on').keyCodes 就可以获取到所有的按键修饰符的单词就可以使用了
down:40
enter:13
esc:27
left:37
right:39
space:32
tab:9
up:38
//2.0 可以利用Vue.directive('on').keyCodes 动态添加一个属性来实现自定义的按键修饰符的扩展

vue-resource实现ajax请求

如果在Vue中想要使用ajax请求资源,需要额外添加vue-resource资源包。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
//有了解过Angular的同学对于下面的例子会感到十分亲切
new Vue({
el:'your app',
data:{list:[]},
methods:{
your methods,
getAjax:function(){
var url = 'your url';
this.$http.get(url).then(function(response){
//1.0 获取响应报文体对象
var body = response.body;
//2.0 判断响应报文的数据状态,通常我们会在数据库中设定一个数据来表示响应状态是否成功,有利于后续的维护和数据分析,这里我们使用'status = 0'表示数据成功获取
if(body.status !== 0){
//这里是我们处理数据出错的情况
//okay,这里就简单的输出下数据
console.log(body.message);
return;
}
//3.0 成功获取到数据
var getData = response.body.message;
this.list = getData;
});
至此就简单的完成了在Vue中进行ajax请求数据。
},
//既然说了ajax就一定会想到jsonp咯,jsonp的作用十分明确,跨域请求数据。
getJsonp:function(){
var url = 'your url';
this.$http.jsonp(url).then(function(response){
var body = response.body;
//通常我们跨域请求到的是一个json数据,因此还需要对数进行相应的转换才可以继续使用。
var obj = JSON.parse(body);
this.list = obj.message;
})
}
}
})

钩子函数生命周期

因为我对这方面的了解还不够透彻,就请大家参阅Vue官方文档啦

×

可以的话,我想喝杯咖啡续命

扫码支持
扫码打赏,你说多少就多少

打开支付宝扫一扫,即可进行扫码打赏哦

文章目录
  1. 1. Vue中的指令
    1. 1.1. 自定义指令
  2. 2. 过滤器
  3. 3. v-on注册事件的按键修饰符
  4. 4. vue-resource实现ajax请求
  5. 5. 钩子函数生命周期