Skip to content

Commit 316422f

Browse files
dk-landk-lan
committed
modify by dk
1 parent 72ee989 commit 316422f

File tree

19 files changed

+2239
-12
lines changed

19 files changed

+2239
-12
lines changed

‎README.md‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -20,9 +20,9 @@
2020
- [组件](https://github.com/dk-lan/vue-erp/tree/master/VueBasic/Component)
2121
- [指令](https://github.com/dk-lan/vue-erp/tree/master/VueBasic/TemplateSyntax#指令)
2222
- [自定义指令](https://github.com/dk-lan/vue-erp/tree/master/VueBasic/Directive)
23-
- 动画和过度效果
23+
- [动画和过度效果](https://github.com/dk-lan/vue-erp/tree/master/VueBasic/Transition)
2424
- [路由](https://github.com/dk-lan/vue-erp/tree/master/VueBasic/Router)
25-
- Vuex
25+
- [Vuex](https://github.com/dk-lan/vue-erp/tree/master/VueBasic/Vuex)
2626

2727
# 认识 Vue
2828
关于 Vue 的描述有不少，不外乎都会拿来与 Angular 和 React 对比，同样头顶 MVVM 双向数据驱动设计模式光环的 Angular 自然被对比的最多，但到目前为止，Angular 在热度上已明显不及 Vue，性能已成为最大的诟病。

‎VueBasic/Component/README.md‎

Lines changed: 31 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -132,6 +132,37 @@
132132
</div>
133133
```
134134

135+
## 动态组件 - :is
136+
```html
137+
<div id="app" style="display: none;">
138+
<input type="button" value="changeLight" @click="changeLight" />
139+
<br/>
140+
<p :is="show"></p>
141+
</div>
142+
143+
<script type="text/javascript">
144+
var vm = new Vue({
145+
el: '#app',
146+
data: {
147+
show: 'red',
148+
},
149+
methods:{
150+
changeLight: function(){
151+
this.show = this.show == 'red' ? 'green' : 'red';
152+
}
153+
},
154+
components: {
155+
red: {
156+
template: '<h1>Red</h1>'
157+
},
158+
green: {
159+
template: '<h1>Green</h1>'
160+
}
161+
}
162+
})
163+
</script>
164+
```
165+
135166
## 组件属性
136167
组件的属性要先声明后使用，props: ['属性名'...]
137168
```html

‎VueBasic/TemplateSyntax/README.md‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -252,4 +252,4 @@ var vm = new Vue({
252252

253253
[指令效果预览](https://dk-lan.github.io/vue-erp/VueBasic/TemplateSyntax/Directives.html)
254254

255-
[综合安全预览](https://dk-lan.github.io/vue-erp/VueBasic/TemplateSyntax/Example.html)
255+
[综合案例预览](https://dk-lan.github.io/vue-erp/VueBasic/TemplateSyntax/Example.html)

‎VueBasic/Transition/01-CSS过渡.html‎

Lines changed: 35 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,35 @@
1+
<!DOCTYPE html>
2+
<html>
3+
<head>
4+
<meta charset="utf-8">
5+
<meta http-equiv="X-UA-Compatible" content="IE=edge">
6+
<title></title>
7+
<script type="text/javascript" src="../js/vue.min.js"></script>
8+
<style type="text/css" media="screen">
9+
/*初始状态*/
10+
.fade-enter{opacity: 0;}
11+
/*已经准备就绪*/
12+
.fade-enter-active{transition: all .5s;}
13+
/*已经消失*/
14+
.fade-leave-active{opacity: 0; transition: all .5s;}
15+
</style>
16+
</head>
17+
<body>
18+
<div id="app">
19+
<input type="button" :value="show ? 'hide' : 'show'" @click="show = !show" />
20+
<br/>
21+
<transition name="fade">
22+
<img src="imgs/green.jpg" v-show="show" />
23+
</transition>
24+
</div>
25+
26+
<script type="text/javascript">
27+
var vm = new Vue({
28+
el: '#app',
29+
data: {
30+
show: true
31+
}
32+
})
33+
</script>
34+
</body>
35+
</html>

‎VueBasic/Transition/02-CSS动画.html‎

Lines changed: 46 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,46 @@
1+
<!DOCTYPE html>
2+
<html>
3+
<head>
4+
<meta charset="utf-8">
5+
<meta http-equiv="X-UA-Compatible" content="IE=edge">
6+
<title></title>
7+
<script type="text/javascript" src="../js/vue.min.js"></script>
8+
<style type="text/css" media="screen">
9+
.fade-enter-active{animation: fade-in .5s;}
10+
11+
.fade-leave-active{animation: fade-out .5s;}
12+
13+
@keyframes fade-in{
14+
from{
15+
opacity: 0;
16+
}
17+
to{
18+
opacity: 1;
19+
}
20+
}
21+
22+
@keyframes fade-out{
23+
from{opacity: 1;}
24+
to{opacity: 0;}
25+
}
26+
</style>
27+
</head>
28+
<body>
29+
<div id="app">
30+
<input type="button" :value="show ? 'hide' : 'show'" @click="show = !show" />
31+
<br/>
32+
<transition name="fade">
33+
<img src="imgs/green.jpg" v-if="show" />
34+
</transition>
35+
</div>
36+
37+
<script type="text/javascript">
38+
var vm = new Vue({
39+
el: '#app',
40+
data: {
41+
show: true
42+
}
43+
})
44+
</script>
45+
</body>
46+
</html>

‎VueBasic/Transition/03-初始渲染的过渡.html‎

Lines changed: 26 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,26 @@
1+
<!DOCTYPE html>
2+
<html>
3+
<head>
4+
<meta charset="utf-8">
5+
<meta http-equiv="X-UA-Compatible" content="IE=edge">
6+
<title></title>
7+
<script type="text/javascript" src="../js/vue.min.js"></script>
8+
<style type="text/css" media="screen">
9+
.fade-enter{opacity: 0;}
10+
.fade-enter-active{transition: all 3s;}
11+
</style>
12+
</head>
13+
<body>
14+
<div id="app">
15+
<transition appear appear-class="fade-enter" appear-active-class="fade-enter-active">
16+
<img src="imgs/green.jpg" />
17+
</transition>
18+
</div>
19+
20+
<script type="text/javascript">
21+
var vm = new Vue({
22+
el: '#app'
23+
})
24+
</script>
25+
</body>
26+
</html>

‎VueBasic/Transition/04-多个元素过渡.html‎

Lines changed: 53 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,53 @@
1+
<!DOCTYPE html>
2+
<html>
3+
<head>
4+
<meta charset="utf-8">
5+
<meta http-equiv="X-UA-Compatible" content="IE=edge">
6+
<title></title>
7+
<script type="text/javascript" src="../js/vue.min.js"></script>
8+
<style type="text/css" media="screen">
9+
.fade-enter{opacity: 0;}
10+
.fade-enter-active{transition: all .5s;}
11+
12+
.fade-leave-active{opacity: 0; transition: all .5s;}
13+
</style>
14+
</head>
15+
<body>
16+
<div id="app">
17+
<fieldset>
18+
<legend><h3>mode = in-out</h3></legend>
19+
<div>
20+
<input type="button" :value="red ? 'green' : 'red'" @click="red = !red" />
21+
<br/>
22+
<transition name="fade" mode="in-out">
23+
<img src="imgs/red.jpg" v-if="red" key="red"/>
24+
<img src="imgs/green.jpg" v-else key="green"/>
25+
</transition>
26+
</div>
27+
</fieldset>
28+
<fieldset>
29+
<legend><h3>mode = out-in</h3></legend>
30+
<div>
31+
<input type="button" :value="flag == 1 ? 'green' : flag == 2 ? 'yellw' : 'red'" @click="flag = flag == 1 ? 2 : flag == 2 ? 3 : 1" />
32+
<br/>
33+
<transition name="fade" mode="out-in">
34+
<img src="imgs/red.jpg" v-if="flag == 1" key="red"/>
35+
<img src="imgs/green.jpg" v-else-if="flag == 2" key="green"/>
36+
<img src="imgs/yellow.jpg" v-else key="yellow" />
37+
</transition>
38+
</div>
39+
</fieldset>
40+
</div>
41+
42+
</div>
43+
<script type="text/javascript">
44+
var vm = new Vue({
45+
el: '#app',
46+
data: {
47+
red: true,
48+
flag: 1
49+
}
50+
})
51+
</script>
52+
</body>
53+
</html>

‎VueBasic/Transition/05-多个组件的过渡.html‎

Lines changed: 80 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,80 @@
1+
<!DOCTYPE html>
2+
<html>
3+
<head>
4+
<meta charset="utf-8">
5+
<meta http-equiv="X-UA-Compatible" content="IE=edge">
6+
<title></title>
7+
<script type="text/javascript" src="../js/vue.min.js"></script>
8+
<style type="text/css" media="screen">
9+
.fade-enter{opacity: 0;}
10+
.fade-enter-active{transition: all .5s;}
11+
12+
.fade-leave-active{opacity: 0; transition: all .5s;}
13+
</style>
14+
</head>
15+
<body>
16+
<div id="app" style="display: none;">
17+
<input type="button" value="changeLight" @click="changeLight" />
18+
<br/>
19+
<transition name="fade" mode="out-in">
20+
<p :is="show" :title="show"></p>
21+
</transition>
22+
</div>
23+
24+
<script type="text/javascript">
25+
var vm = new Vue({
26+
el: '#app',
27+
data: {
28+
show: 'red',
29+
data_title: 'gz1705'
30+
},
31+
methods:{
32+
changeLight: function(){
33+
this.show = this.show == 'red' ? 'green' : 'red';
34+
}
35+
},
36+
components: {
37+
red: {
38+
template: '<img src="imgs/red.jpg"/>'
39+
},
40+
green: {
41+
template: '<img src="imgs/green.jpg"/>'
42+
}
43+
}
44+
})
45+
</script>
46+
47+
<div id="app2">
48+
<input type="button" name="" value="show" @click="changeLight">
49+
<br>
50+
<transition name="fade" mode="out-in">
51+
<p :is="show"></p>
52+
</transition>
53+
</div>
54+
55+
<script type="text/javascript">
56+
var vm2 = new Vue({
57+
el: '#app2',
58+
data: {
59+
show: 'red'
60+
},
61+
methods: {
62+
changeLight: function(){
63+
this.show = this.show == 'red' ? 'green' : this.show == 'green' ? 'yellow' : 'red';
64+
}
65+
},
66+
components: {
67+
red: {
68+
template: '<img src="imgs/red.jpg"/>'
69+
},
70+
green: {
71+
template: '<img src="imgs/green.jpg"/>'
72+
},
73+
yellow: {
74+
template: '<img src="imgs/yellow.jpg"/>'
75+
}
76+
}
77+
})
78+
</script>
79+
</body>
80+
</html>

‎VueBasic/Transition/06-列表的进入和离开过渡.html‎

Lines changed: 49 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,49 @@
1+
<!DOCTYPE html>
2+
<html>
3+
<head>
4+
<meta charset="utf-8">
5+
<meta http-equiv="X-UA-Compatible" content="IE=edge">
6+
<title></title>
7+
<script type="text/javascript" src="../js/vue.min.js"></script>
8+
<style type="text/css" media="screen">
9+
*{list-style: none;}
10+
li{width: 300px; margin-bottom: 5px; padding: 10px 20px; background-color: #ccc;}
11+
12+
.list-enter{opacity: 0; transform: translateX(300px);}
13+
.list-enter-active{transition: all .5s;}
14+
15+
.list-leave-active{transition: all .5s; opacity: 0; transform: translateX(-300px);}
16+
</style>
17+
</head>
18+
<body>
19+
<div id="app">
20+
<p>
21+
<input type="button" value="AddItem" @click="addItem">
22+
<input type="button" value="RemoveItem" @click="removeItem">
23+
</p>
24+
<transition-group tag="ul" name="list">
25+
<li v-for="(item, index) in items" :key="item">Item {{index}}</li>
26+
</transition-group>
27+
</div>
28+
29+
<script type="text/javascript">
30+
var vm = new Vue({
31+
el: '#app',
32+
data: {
33+
items: [1,2,3]
34+
},
35+
methods: {
36+
randomIndex: function(){
37+
return parseInt(this.items.length * Math.random());
38+
},
39+
addItem: function(){
40+
this.items.splice(this.randomIndex(), 0, this.items.length + 1);
41+
},
42+
removeItem: function(){
43+
this.items.splice(this.randomIndex(), 1);
44+
}
45+
}
46+
})
47+
</script>
48+
</body>
49+
</html>

‎VueBasic/Transition/07-自定义过渡的类名.html‎

Lines changed: 27 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,27 @@
1+
<!DOCTYPE html>
2+
<html>
3+
<head>
4+
<meta charset="utf-8">
5+
<meta http-equiv="X-UA-Compatible" content="IE=edge">
6+
<title></title>
7+
<link rel="stylesheet" type="text/css" href="animate.css">
8+
<script type="text/javascript" src="../js/vue.min.js"></script>
9+
</head>
10+
<body>
11+
<div id="app">
12+
<button @click="show = !show">Toggle render</button>
13+
<transition enter-active-class="animated jello" leave-active-class="animated bounceOutRight">
14+
<div v-if="show"><img src="./imgs/green.jpg" /></div>
15+
</transition>
16+
</div>
17+
18+
<script type="text/javascript">
19+
var vm = new Vue({
20+
el: '#app',
21+
data: {
22+
show: true
23+
}
24+
})
25+
</script>
26+
</body>
27+
</html>

0 commit comments

Comments
 (0)