Skip to content

Commit de081a8

Browse files
bhnddowinfbhnddowinf
committed
11，12
1 parent 4a0c0db commit de081a8

30 files changed

+24433
-0
lines changed

Diff for: ‎11/01 text.html

+30
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,30 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
4+
<head>
5+
<meta charset="UTF-8">
6+
<title>Document</title>
7+
<script src="vue.js"></script>
8+
</head>
9+
10+
<body>
11+
<div id="example">
12+
<span>Message is: {{ message }}</span>
13+
<br>
14+
input text 双向绑定 demo<br>
15+
<input type="text" v-model="message" placeholder="edit me">
16+
</div>
17+
<script>
18+
var vm = new Vue({
19+
el: '#example',
20+
data: {
21+
message: 'Vue.js 很好用!'
22+
},
23+
24+
})
25+
26+
27+
</script>
28+
</body>
29+
30+
</html>

Diff for: ‎11/02 checked.html

+28
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,28 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
4+
<head>
5+
<meta charset="UTF-8">
6+
<title>Document</title>
7+
<script src="vue.js"></script>
8+
</head>
9+
10+
<body>
11+
<div id="example">
12+
input checkbox 双向绑定 demo<br>
13+
<input type="checkbox" id="checkbox" v-model="checked">
14+
<label for="checkbox">{{ checked }}</label>
15+
16+
</div>
17+
<script>
18+
var vm = new Vue({
19+
el: '#example',
20+
data: {
21+
checked: true
22+
},
23+
24+
})
25+
</script>
26+
</body>
27+
28+
</html>

Diff for: ‎11/03 checked array.html

+33
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,33 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
4+
<head>
5+
<meta charset="UTF-8">
6+
<title>Document</title>
7+
<script src="vue.js"></script>
8+
</head>
9+
10+
<body>
11+
<div id="example">
12+
input checkbox 数组, 双向绑定 demo<br>
13+
<input type="checkbox" id="jack" value="Jack" v-model="checkedNames">
14+
<label for="jack">Jack</label>
15+
<input type="checkbox" id="john" value="John" v-model="checkedNames">
16+
<label for="john">John</label>
17+
<input type="checkbox" id="mike" value="Mike" v-model="checkedNames">
18+
<label for="mike">Mike</label>
19+
<br>
20+
<span>Checked names: {{ checkedNames | json }}</span>
21+
</div>
22+
<script>
23+
var vm = new Vue({
24+
el: '#example',
25+
data: {
26+
checkedNames: []
27+
},
28+
29+
})
30+
</script>
31+
</body>
32+
33+
</html>

Diff for: ‎11/04 radio.html

+33
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,33 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
4+
<head>
5+
<meta charset="UTF-8">
6+
<title>Document</title>
7+
<script src="vue.js"></script>
8+
</head>
9+
10+
<body>
11+
<div id="example">
12+
radio, 双向绑定 demo
13+
<br>
14+
<input type="radio" id="one" value="One" v-model="picked">
15+
<label for="one">One</label>
16+
<br>
17+
<input type="radio" id="two" value="Two" v-model="picked">
18+
<label for="two">Two</label>
19+
<br>
20+
<span>Picked: {{ picked }}</span>
21+
</div>
22+
<script>
23+
var vm = new Vue({
24+
el: '#example',
25+
data: {
26+
picked: 'Two'
27+
},
28+
29+
})
30+
</script>
31+
</body>
32+
33+
</html>

Diff for: ‎11/05 select.html

+33
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,33 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
4+
<head>
5+
<meta charset="UTF-8">
6+
<title>Document</title>
7+
<script src="vue.js"></script>
8+
</head>
9+
10+
<body>
11+
<div id="example">
12+
select, 双向绑定 demo, 注：这个范例，依照小凡平时业务的写法，来写 示例
13+
<br>
14+
<select v-model="selected">
15+
<option value="a">Apple</option>
16+
<option value="b">Bule</option>
17+
<option value="c">Chunk</option>
18+
</select>
19+
<br>
20+
<span>Selected: {{ selected }}</span>
21+
</div>
22+
<script>
23+
var vm = new Vue({
24+
el: '#example',
25+
data: {
26+
selected: 'c'
27+
},
28+
29+
})
30+
</script>
31+
</body>
32+
33+
</html>

Diff for: ‎11/06 select1.html

+35
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,35 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
4+
<head>
5+
<meta charset="UTF-8">
6+
<title>Document</title>
7+
<script src="vue.js"></script>
8+
</head>
9+
10+
<body>
11+
<div id="example">
12+
多选（绑定到一个数组） demo
13+
<br>
14+
<select v-model="selected" multiple>
15+
<option selected>A</option>
16+
<option>B</option>
17+
<option>C</option>
18+
</select>
19+
<br>
20+
<span>Selected: {{ selected | json }}</span>
21+
<br>
22+
<span>注：mac book pro , 按住 command, 来多选</span>
23+
</div>
24+
<script>
25+
var vm = new Vue({
26+
el: '#example',
27+
data: {
28+
selected: 'c'
29+
},
30+
31+
})
32+
</script>
33+
</body>
34+
35+
</html>

Diff for: ‎11/07 select2.html

+42
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,42 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
4+
<head>
5+
<meta charset="UTF-8">
6+
<title>Document</title>
7+
<script src="vue.js"></script>
8+
</head>
9+
10+
<body>
11+
<div id="example">
12+
select and v-for demo
13+
<br>
14+
<select v-model="selected">
15+
<option v-for="option in options" v-bind:value="option.value">
16+
{{ option.text }}
17+
</option>
18+
</select>
19+
<span>Selected: {{ selected }}</span>
20+
<br>
21+
</div>
22+
<script>
23+
var vm = new Vue({
24+
el: '#example',
25+
data: {
26+
selected: 'A',
27+
options: [{
28+
text: 'One',
29+
value: 'A'
30+
}, {
31+
text: 'Two',
32+
value: 'B'
33+
}, {
34+
text: 'Three',
35+
value: 'C'
36+
}]
37+
}
38+
})
39+
</script>
40+
</body>
41+
42+
</html>

Diff for: ‎11/08 valuebindings.html

+39
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,39 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
4+
<head>
5+
<meta charset="UTF-8">
6+
<title>Document</title>
7+
<script src="vue.js"></script>
8+
</head>
9+
10+
<body>
11+
<div id="example">
12+
value bindings demo
13+
<br>
14+
<!-- 当选中时，`picked` 为字符串 "a" -->
15+
<input type="radio" v-model="picked" value="a">
16+
<!-- `toggle` 为 true 或 false -->
17+
<input type="checkbox" v-model="toggle">
18+
<!-- 当选中时，`selected` 为字符串 "abc" -->
19+
<select v-model="selected">
20+
<option value="abc">ABC</option>
21+
<option value="1">1</option>
22+
<option value="2">2</option>
23+
</select>
24+
<br>
25+
<pre>{{$data | json}}</pre>
26+
</div>
27+
<script>
28+
var vm = new Vue({
29+
el: '#example',
30+
data: {
31+
selected: '',
32+
picked:'',
33+
toggle:''
34+
}
35+
})
36+
</script>
37+
</body>
38+
39+
</html>

Diff for: ‎11/09 checkbox.html

+30
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,30 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
4+
<head>
5+
<meta charset="UTF-8">
6+
<title>Document</title>
7+
<script src="vue.js"></script>
8+
</head>
9+
10+
<body>
11+
<div id="example">
12+
checkbox value bindings demo, 注： v-bind 后面的双引号，是 js 表达式，不是字串。
13+
<br>
14+
<input type="checkbox" v-model="toggle" v-bind:true-value="a" v-bind:false-value="b">
15+
<br>
16+
<pre>{{ toggle }}</pre>
17+
</div>
18+
<script>
19+
var vm = new Vue({
20+
el: '#example',
21+
data: {
22+
toggle: '',
23+
a: '台湾',
24+
b: '小凡'
25+
}
26+
})
27+
</script>
28+
</body>
29+
30+
</html>

Diff for: ‎11/10 radio.html

+32
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,32 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
4+
<head>
5+
<meta charset="UTF-8">
6+
<title>Document</title>
7+
<script src="vue.js"></script>
8+
</head>
9+
10+
<body>
11+
<div id="example">
12+
radio value bindings demo
13+
<br>
14+
<input type="radio" v-model="pick" v-bind:value="a">
15+
<input type="radio" v-model="pick" v-bind:value="b">
16+
17+
<br>
18+
<pre>{{ pick }}</pre>
19+
</div>
20+
<script>
21+
var vm = new Vue({
22+
el: '#example',
23+
data: {
24+
pick: '',
25+
a: '台湾',
26+
b: '小凡'
27+
}
28+
})
29+
</script>
30+
</body>
31+
32+
</html>

Diff for: ‎11/11 select options.html

+34
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,34 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
4+
<head>
5+
<meta charset="UTF-8">
6+
<title>Document</title>
7+
<script src="vue.js"></script>
8+
</head>
9+
10+
<body>
11+
<div id="example">
12+
select options value bindings demo
13+
<br>
14+
<select v-model="selected">
15+
<!-- 对象字面量 -->
16+
<option v-bind:value="{ number: 123 }">123</option>
17+
<option v-bind:value="{ number: 456 }">456</option>
18+
<option v-bind:value="{ number: 789 }">789</option>
19+
<option v-bind:value="{ number: 'abc' }">abc</option>
20+
</select>
21+
<br>
22+
<pre>{{$data | json}}</pre>
23+
</div>
24+
<script>
25+
var vm = new Vue({
26+
el: '#example',
27+
data: {
28+
selected: ''
29+
}
30+
})
31+
</script>
32+
</body>
33+
34+
</html>

0 commit comments

Comments
 (0)