Skip to content

Commit a8a55f4

Browse files
bhnddowinfbhnddowinf
committed
13-5
1 parent 90936a8 commit a8a55f4

22 files changed

+802
-0
lines changed

‎13/5-1 Dynamic Components.html

Lines changed: 69 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,69 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
4+
<head>
5+
<script type="text/javascript" src="vue.js"></script>
6+
<meta charset="UTF-8">
7+
<title>5-1</title>
8+
<style>
9+
.c1{
10+
color: #00f;
11+
}
12+
</style>
13+
</head>
14+
15+
<body>
16+
<component :is="currentView">
17+
<!-- component changes when vm.currentview changes! -->
18+
</component>
19+
<script>
20+
Vue.component('c1', {
21+
template: `
22+
<div class='c1'>
23+
<input v-model="a">{{a}}
24+
<button @click="m('home')">home</button>
25+
<button @click="m('posts')">posts</button>
26+
<button @click="m('archive')">archive</button>
27+
<button @click="m(str1)">{{str1}}</button>
28+
</div>
29+
`,
30+
props: ['str1'],
31+
methods: {
32+
m: function(str1) {
33+
this.$dispatch('parent-events1', str1)
34+
}
35+
},
36+
data: function() {
37+
return {
38+
a: 1
39+
}
40+
}
41+
42+
});
43+
44+
new Vue({
45+
el: 'body',
46+
data: {
47+
currentView: 'home'
48+
},
49+
components: {
50+
home: {
51+
template: 'component is home <c1 str1="home"></c1>'
52+
},
53+
posts: {
54+
template: 'component is posts <c1 str1="posts"></c1>'
55+
},
56+
archive: {
57+
template: 'component is archive <c1 str1="archive"></c1>'
58+
}
59+
},
60+
events: {
61+
'parent-events1': function(str1) {
62+
this.currentView = str1;
63+
}
64+
}
65+
})
66+
</script>
67+
</body>
68+
69+
</html>

‎13/5-2 Dynamic Components Keep alive.html

Lines changed: 64 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,64 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
4+
<head>
5+
<script type="text/javascript" src="vue.js"></script>
6+
<meta charset="UTF-8">
7+
<title>5-2</title>
8+
</head>
9+
10+
<body>
11+
<br>
12+
<h3>组件的data 会被缓存</h3>
13+
<component :is="currentView" keep-alive>
14+
<!-- component changes when vm.currentview changes! -->
15+
</component>
16+
<script>
17+
Vue.component('c1', {
18+
template: `
19+
<input v-model="a">{{a}}
20+
<button @click="m('home')">home</button>
21+
<button @click="m('posts')">posts</button>
22+
<button @click="m('archive')">archive</button>
23+
<button @click="m(str1)">{{str1}}</button>
24+
`,
25+
props: ['str1'],
26+
methods: {
27+
m: function(str1) {
28+
this.$dispatch('parent-events1', str1)
29+
}
30+
},
31+
data: function() {
32+
return {
33+
a: 1
34+
}
35+
}
36+
37+
});
38+
39+
new Vue({
40+
el: 'body',
41+
data: {
42+
currentView: 'home'
43+
},
44+
components: {
45+
home: {
46+
template: 'component is home <c1 str1="home"></c1>'
47+
},
48+
posts: {
49+
template: 'component is posts <c1 str1="posts"></c1>'
50+
},
51+
archive: {
52+
template: 'component is archive <c1 str1="archive"></c1>'
53+
}
54+
},
55+
events: {
56+
'parent-events1': function(str1) {
57+
this.currentView = str1;
58+
}
59+
}
60+
})
61+
</script>
62+
</body>
63+
64+
</html>

‎13/5-3 activate Hook.html

Lines changed: 103 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,103 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
4+
<head>
5+
<script type="text/javascript" src="vue.js"></script>
6+
<meta charset="UTF-8">
7+
<title>5-3</title>
8+
<style>
9+
.fade-transition {
10+
transition: opacity .3s ease;
11+
}
12+
13+
.fade-enter,
14+
.fade-leave {
15+
opacity: 0;
16+
}
17+
</style>
18+
</head>
19+
20+
<body>
21+
<br>
22+
<h3>注意 activate 钩子只作用于动态组件
23+
切换或静态组件初始化渲染的过程中
24+
不作用于使用实例方法手工插入的过程中。</h3>
25+
<div id="app">
26+
<component :is="currentView" keep-alive></component>
27+
</div>
28+
<script>
29+
Vue.component('c1', {
30+
template: `<div>
31+
<input v-model="a">{{a}}
32+
<button @click="m('home')">home</button>
33+
<button @click="m('posts')">posts</button>
34+
<button @click="m('archive')">archive</button>
35+
<button @click="m(str1)">{{str1}}</button>
36+
</div>
37+
`,
38+
props: ['str1'],
39+
methods: {
40+
m: function(str1) {
41+
this.$dispatch('parent-events1', str1)
42+
}
43+
},
44+
data: function() {
45+
return {
46+
a: 1
47+
}
48+
}
49+
50+
});
51+
52+
53+
54+
new Vue({
55+
el: '#app',
56+
data: {
57+
currentView: 'home'
58+
},
59+
components: {
60+
home: {
61+
template: '<div>component is home <c1 str1="home"></c1></div>',
62+
// activate it works
63+
activate: function(done) {
64+
console.log('home activate called');
65+
setTimeout(function() {
66+
console.log('home activate done');
67+
done();
68+
}, 2000);
69+
},
70+
},
71+
posts: {
72+
template: '<div>component is posts <c1 str1="posts"></c1></div>',
73+
// activate it works
74+
activate: function(done) {
75+
console.log('posts activate called');
76+
setTimeout(function() {
77+
console.log('posts activate done');
78+
done();
79+
}, 3000);
80+
},
81+
},
82+
archive: {
83+
template: '<div>component is archive <c1 str1="archive"></c1></div>',
84+
// activate it works
85+
activate: function(done) {
86+
console.log('archive activate called');
87+
setTimeout(function() {
88+
console.log('archive activate done');
89+
done();
90+
}, 1000);
91+
},
92+
}
93+
},
94+
events: {
95+
'parent-events1': function(str1) {
96+
this.currentView = str1;
97+
}
98+
}
99+
})
100+
</script>
101+
</body>
102+
103+
</html>

‎13/5-4 transition-mode .html

Lines changed: 103 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,103 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
4+
<head>
5+
<script type="text/javascript" src="vue.js"></script>
6+
<meta charset="UTF-8">
7+
<title>5-4</title>
8+
<style>
9+
.fade-transition {
10+
transition: opacity .3s ease;
11+
}
12+
.fade-enter, .fade-leave {
13+
opacity: 0;
14+
}
15+
</style>
16+
17+
</head>
18+
19+
<body>
20+
<br>
21+
<h3>组件动态切换的过渡 </h3>
22+
<component
23+
:is="currentView"
24+
keep-alive
25+
transition="fade"
26+
transition-mode="out-in">
27+
</component>
28+
<script>
29+
Vue.component('c1', {
30+
template: `
31+
<input v-model="a">{{a}}
32+
<button @click="m('home')">home</button>
33+
<button @click="m('posts')">posts</button>
34+
<button @click="m('archive')">archive</button>
35+
<button @click="m(str1)">{{str1}}</button>
36+
37+
`,
38+
props: ['str1'],
39+
methods: {
40+
m: function(str1) {
41+
this.$dispatch('parent-events1', str1)
42+
}
43+
},
44+
data: function() {
45+
return {
46+
a: 1
47+
}
48+
}
49+
50+
});
51+
52+
53+
54+
new Vue({
55+
el: 'body',
56+
data: {
57+
currentView: 'home'
58+
},
59+
components: {
60+
home: {
61+
template: '<div>component is home <c1 str1="home"></c1></div>',
62+
// activate it works
63+
activate: function(done) {
64+
console.log('home activate called');
65+
setTimeout(function() {
66+
console.log('home activate done');
67+
done();
68+
}, 100);
69+
},
70+
},
71+
posts: {
72+
template: '<div>component is posts <c1 str1="posts"></c1></div>',
73+
// activate it works
74+
activate: function(done) {
75+
console.log('posts activate called');
76+
setTimeout(function() {
77+
console.log('posts activate done');
78+
done();
79+
}, 100);
80+
},
81+
},
82+
archive: {
83+
template: '<div>component is archive <c1 str1="archive"></c1></div>',
84+
// activate it works
85+
activate: function(done) {
86+
console.log('archive activate called');
87+
setTimeout(function() {
88+
console.log('archive activate done');
89+
done();
90+
}, 100);
91+
},
92+
}
93+
},
94+
events: {
95+
'parent-events1': function(str1) {
96+
this.currentView = str1;
97+
}
98+
}
99+
})
100+
</script>
101+
</body>
102+
103+
</html>

0 commit comments

Comments
 (0)