Skip to content

Commit 51131d3

Browse files
huang303513huang303513
committed
vue.js学习
1 parent d165ee9 commit 51131d3

File tree

9 files changed

+222
-0
lines changed

9 files changed

+222
-0
lines changed

‎vuejs练习/列表渲染/index.html

Lines changed: 19 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,19 @@
1+
<!DOCTYPE html>
2+
<html>
3+
<head>
4+
<meta charset="UTF-8">
5+
<title>vuejs练习</title>
6+
</head>
7+
<body>
8+
<div id="repeat-object">
9+
<li v-for="value in object">
10+
{{$key}}:{{value}}
11+
</li>
12+
<li v-for="item in items">
13+
{{item.title}}
14+
</li>
15+
</div>
16+
<script src='http://cdn.jsdelivr.net/vue/1.0.26/vue.min.js'></script>
17+
<script src="index.js"></script>
18+
</body>
19+
</html>

‎vuejs练习/列表渲染/index.js

Lines changed: 17 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,17 @@
1+
new Vue({
2+
el:"#repeat-object",
3+
data:{
4+
object:{
5+
FirstName:"jone",
6+
LastName:"Done",
7+
Age:30
8+
},
9+
items:[{
10+
title:"aaa"
11+
},{
12+
title:"bbb"
13+
},{
14+
title:"ccc"
15+
}]
16+
}
17+
})

‎vuejs练习/方法与事件处理器/index.html

Lines changed: 15 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,15 @@
1+
<!DOCTYPE html>
2+
<html>
3+
<head>
4+
<meta charset="UTF-8">
5+
<title>vuejs练习</title>
6+
</head>
7+
<body>
8+
<div id="example">
9+
<button v-on:click="greet">Greet</button>
10+
<button v-on:click="say('what')">say what</button>
11+
</div>
12+
<script src='http://cdn.jsdelivr.net/vue/1.0.26/vue.min.js'></script>
13+
<script src="index.js"></script>
14+
</body>
15+
</html>

‎vuejs练习/方法与事件处理器/index.js

Lines changed: 15 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,15 @@
1+
new Vue({
2+
el:"#example",
3+
data:{
4+
name:"Vue.js"
5+
},
6+
methods:{
7+
greet:function (event) {
8+
alert("Hello" + this.name + "!");
9+
alert(event.target.tagName);
10+
},
11+
say:function (msg) {
12+
alert(msg);
13+
}
14+
}
15+
})

‎vuejs练习/表单控件绑定/index.html

Lines changed: 66 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,66 @@
1+
<!DOCTYPE html>
2+
<html>
3+
<head>
4+
<meta charset="UTF-8">
5+
<title>vuejs练习</title>
6+
</head>
7+
<body>
8+
<div id="example">
9+
<span>Message is: {{ message }}</span>
10+
</br>
11+
<input type="text" v-model="message" placeholder="edit me" >
12+
</br>
13+
14+
<input type="checkbox" id="checkbox1" v-model="checked">
15+
<label for="checkbox1">{{ checked }}</label>
16+
</br>
17+
18+
<input type="checkbox" id="jack" value="Jack" v-model="checkedNames">
19+
<label for="jack">Jack</label>
20+
<input type="checkbox" id="john" value="John" v-model="checkedNames">
21+
<label for="john">John</label>
22+
<input type="checkbox" id="mike" value="Mike" v-model="checkedNames">
23+
<label for="mike">Mike</label>
24+
</br>
25+
<span>Checked names:{{checkedNames | json}}</span>
26+
</br>
27+
28+
<input type="radio" id="one" value="One" v-model="picked">
29+
<label for="one">One</label>
30+
<input type="radio" id="two" value="Two" v-model="picked">
31+
<label for="two">Two</label>
32+
</br>
33+
<span>Picked:{{picked}}</span>
34+
</br>
35+
36+
<select v-model="selected">
37+
<option selected>A</option>
38+
<option>B</option>
39+
<option>C</option>
40+
</select>
41+
</br>
42+
<span>Selected:{{selected}}</span>
43+
</br>
44+
45+
<select v-model="selectedmultiple" multiple>
46+
<option selected>A</option>
47+
<option>B</option>
48+
<option>C</option>
49+
</select>
50+
<br>
51+
<span>Selected: {{ selectedmultiple | json }}</span>
52+
</br>
53+
54+
<select v-model="selectedoptions">
55+
<option v-for="option in options" v-bind:value="option.value">
56+
{{option.text}}
57+
</option>
58+
</select>
59+
<br>
60+
<span>Selected:{{selectedoptions}}</span>
61+
<br>
62+
</div>
63+
<script src='http://cdn.jsdelivr.net/vue/1.0.26/vue.min.js'></script>
64+
<script src="index.js"></script>
65+
</body>
66+
</html>

‎vuejs练习/表单控件绑定/index.js

Lines changed: 15 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,15 @@
1+
new Vue({
2+
el:"#example",
3+
data:{
4+
checked:false,
5+
checkedNames:[],
6+
selectedoptions:"A",
7+
options:[{ text: 'One', value: 'A' },
8+
{ text: 'Two', value: 'B' },
9+
{ text: 'Three', value: 'C' }
10+
]
11+
},
12+
methods:{
13+
14+
}
15+
})

‎vuejs练习/过渡/index.css

Lines changed: 16 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,16 @@
1+
/* 必需 */
2+
.expand-transition {
3+
transition: all .3s ease;
4+
height: 30px;
5+
padding: 10px;
6+
background-color: #eee;
7+
overflow: hidden;
8+
}
9+
10+
/* .expand-enter 定义进入的开始状态 */
11+
/* .expand-leave 定义离开的结束状态 */
12+
.expand-enter, .expand-leave {
13+
height: 0;
14+
padding: 0 10px;
15+
opacity: 0;
16+
}

‎vuejs练习/过渡/index.html

Lines changed: 18 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,18 @@
1+
<!DOCTYPE html>
2+
<html xmlns="http://www.w3.org/1999/html">
3+
<head>
4+
<meta charset="UTF-8">
5+
<title>vuejs练习</title>
6+
7+
</head>
8+
<body>
9+
<div id="repeat-object">
10+
<div v-if="show" transition="expand">hello</div>
11+
<button v-on:click="testShow">testShow</button>
12+
</br>
13+
</div>
14+
<script src='http://cdn.jsdelivr.net/vue/1.0.26/vue.min.js'></script>
15+
<script src="index.js"></script>
16+
<!--<link type="text/css" href="index.css">-->
17+
</body>
18+
</html>

‎vuejs练习/过渡/index.js

Lines changed: 41 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,41 @@
1+
new Vue({
2+
el:"#repeat-object",
3+
data:{
4+
show: true,
5+
transitionName: 'fade'
6+
},
7+
methods:{
8+
testShow:function (event) {
9+
this.show = !this.show;
10+
}
11+
}
12+
})
13+
14+
Vue.transition('expand', {
15+
16+
beforeEnter: function (el) {
17+
el.textContent = 'beforeEnter'
18+
},
19+
enter: function (el) {
20+
el.textContent = 'enter'
21+
},
22+
afterEnter: function (el) {
23+
el.textContent = 'afterEnter'
24+
},
25+
enterCancelled: function (el) {
26+
// handle cancellation
27+
},
28+
29+
beforeLeave: function (el) {
30+
el.textContent = 'beforeLeave'
31+
},
32+
leave: function (el) {
33+
el.textContent = 'leave'
34+
},
35+
afterLeave: function (el) {
36+
el.textContent = 'afterLeave'
37+
},
38+
leaveCancelled: function (el) {
39+
// handle cancellation
40+
}
41+
})

0 commit comments

Comments
 (0)