Vue入门(三)----知识点简记
简介：
第三四节vue，涉及的内容比较杂，简单写了写 下面的代码涉及 自定义属性 自定义指令 监听数据变化 手动挂载对象 计算属性 生命周期 防止闪烁 过滤器（vue2.0中没有内置过滤器，都需要自己手动写）
自定义属性：定义方法，传参，修饰符
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
63
64
65
66
67
68
69
70
71
72
73
74
75
76<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
[v-cloak] {
display: none;
}
.card {
width: 200px;
background: #ccc;
padding: 10px;
margin: 5px;
}
</style>
<script>
window.onload = function() {
Vue.directive('pin', (el, binding) => {
// el 表示对象
// binding 表示一些传进来的基本信息
var pinned = binding.value;
var position = binding.modifiers;
var warning = binding.arg;
console.log(binding);
console.log(position);
if (pinned) {
el.style.position = 'fixed'
for (var key in position) {
if (position[key]) {
el.style[key] = '10px'
}
}
if (warning === 'true') {
el.style.background = 'yellow'
}
} else {
el.style.position = 'static'
}
} else {
el.style.position = 'static'
}
})
new Vue({
el: '#app',
data: {
card1: {
pinned: false,
},
card2: {
pinned: false,
}
},
})
}
</script>
</head>
<body style="height:2000px;">
<div id="app" v-cloak>
<div>
<div v-pin:true.bottom.right="card1.pinned" class="card">
<button @click="card1.pinned = !card1.pinned">定住/取消</button>
vue init webpack-simple 文件名 cd 文件名
</div>
<div v-pin="card2.pinned" class="card">
vue init webpack-simple 文件名 cd 文件名
</div>
</div>
</div>
<script src="./lib/vue.js"></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
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<script src="lib\vue.js"></script>
<style>
[v-cloak]{display: none;}
</style>
<script>
// Vue.directive(指令名称，function(){})
Vue.directive('red', {
// bind
bind: function(el, color) {
console.log(color.value)
}
})
Vue.directive('drag', {
bind: function(el) {
el.onmousedown = function(ev) {
var disX = ev.clientX - el.offsetLeft;
var disY = ev.clientY - el.offsetTop;
document.onmousemove = function(ev) {
var l = ev.clientX - disX;
var t = ev.clientY - disY;
el.style.left = l + "px";
el.style.top = t + "px";
};
document.onmouseup = function() {
document.onmousemove = null;
document.onmouseup = null;
}
}
}
})
window.onload = function() {
var vm = new Vue ({
el: '#box',
data: {
msg: '<strong>welcome</strong>',
a: {"name": "afasfas", age: 14},
},
methods: {
show: function() {
console.log(1);
}
},
// 自定义属性
x: "x",
// 计算属性，取决于return,可实现代码逻辑，带缓存，可重用性比较强
computed: {
b: {
get: function() {
return this.a+2;
},
set: function(val) {
this.a = val;
}
}
},
// 生命周期--钩子函数
// beforeCreate(){} 实例刚刚被创建
// created(){} 实例创建完成
// deforeMount(){} 模板编译之前
// mounted(){} *模板编译完成*
// beforeUpdate(){} 组件更新之前
// updated(){} *组件更新完毕*
// beforeDestroy(){} 组件销毁之前
// destroyed(){} 组件销毁之后
});
// 手动挂载$mount vm.$mount('#box');
document.onclick = function() {
vm.b = 101;
}
// 监听数据变化
vm.$watch('a', function() {
alert("数据发生变化");
})
// $vm.$options获取自定义属性
// $vm.destory 销毁对象
}
</script>
</head>
<body>
<div id="box">
<span v-red="'yellow'" v-cloak>{{a}}</span>
<br>
<span>{{b}}</span>
<br>
<div v-drag :style="{width:'100px', height:'100px', background:'red', position:'absolute', right:0, top:0}"></div>
<input type="text" @keydown.ctrl="show()">
</div>
</body>
</html>
slot槽口
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
63
64
65
66
67
68
69
70
71
72<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
[v-cloak] {
display: none;
}
.panel {
max-width: 300px;
border: 1px solid #999;
margin-bottom: 15px;
}
.panel > * {
padding: 15px;
}
.panel .title {
border-bottom: 1px solid #999;
}
.panel .footer {
border-top: 1px solid #999;
}
</style>
<script>
window.onload = function() {
Vue.component('panel', {
template: `
<div class="panel">
<div class="title">
<slot name="title"></slot>
</div>
<div class="content">
<slot name="content"></slot>
</div>
<div class="footer">
<slot name="footer">更多信息</slot>
</div>
</div>
`,
})
new Vue({
el: '#app',
data: {
card1: {
pinned: false,
},
card2: {
pinned: false,
}
},
})
}
</script>
</head>
<body style="height:2000px;">
<div id="app" v-cloak>
<panel>
<div slot="title">Yo.</div>
<div slot="content">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Vel beatae, magnam esse quisquam officia culpa quae ab necessitatibus maiores voluptas voluptatibus quas corrupti nam, atque ipsum voluptatem explicabo modi molestiae.
</div>
<div slot="footer">更多信息</div>
</panel>
<panel></panel>
<panel></panel>
</div>
<script src="./lib/vue.js"></script>
</body>
</html>
过滤器：只适合比较简单的进行数据处理，复杂的情况适合用计算属性computed
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">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
[v-cloak] {
display: none;
}
</style>
<script>
window.onload = function() {
Vue.filter('currency', (val, unit) => {
val = val || 0
unit = unit || '元'
return val + unit
}),
Vue.filter('meter', (val, unit) => {
val = val || 0
unit = unit || 'm'
return (val/1000).toFixed(2) + unit
})
new Vue({
el: '#app',
data: {
price: 20,
length: 10,
},
})
}
</script>
</head>
<body>
<div id="app" v-cloak>
<div>
<input type="text" v-model="price">
{{price | currency('USD')}}
</div>
<div>
<input v-model="length">mm<br>
{{length | meter}}
</div>
</div>
<script src="./lib/vue.js"></script>
</body>
</html>