Skip to content

Commit 19059ad

Browse files
keepfoolkeepfool
committed
Vue.js component tutorial part-1 source code, based on Vue.s v1.0.25
1 parent e711ad7 commit 19059ad

15 files changed

+10800
-0
lines changed

‎02.Components/Part-1/basic-props.html

Lines changed: 51 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,51 @@
1+
<!DOCTYPE html>
2+
<html>
3+
4+
<head>
5+
<meta charset="UTF-8">
6+
<title></title>
7+
<link rel="stylesheet" href="styles/demo.css" />
8+
</head>
9+
10+
<body>
11+
12+
<div id="app">
13+
<my-component v-bind:my-name="name" v-bind:my-age="age"></my-component>
14+
</div>
15+
16+
<template id="myComponent">
17+
<table>
18+
<tr>
19+
<th colspan="2">
20+
子组件数据
21+
</th>
22+
</tr>
23+
<tr>
24+
<td>my name</td>
25+
<td>{{ myName }}</td>
26+
</tr>
27+
<tr>
28+
<td>my age</td>
29+
<td>{{ myAge }}</td>
30+
</tr>
31+
</table>
32+
</template>
33+
</body>
34+
<script src="js/vue.js"></script>
35+
<script>
36+
var vm = new Vue({
37+
el: '#app',
38+
data: {
39+
name: 'keepfool',
40+
age: 28
41+
},
42+
components: {
43+
'my-component': {
44+
template: '#myComponent',
45+
props: ['myName', 'myAge']
46+
}
47+
}
48+
})
49+
</script>
50+
51+
</html>

‎02.Components/Part-1/component-scope.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+
<title></title>
6+
</head>
7+
<body>
8+
<div id="app1">
9+
<my-component></my-component>
10+
</div>
11+
12+
<div id="app2">
13+
<my-component></my-component>
14+
</div>
15+
16+
<!--该组件不会被渲染-->
17+
<my-component></my-component>
18+
</body>
19+
<script src="js/vue.js"></script>
20+
<script>
21+
var myComponent = Vue.extend({
22+
template: '<div>This is a component!</div>'
23+
})
24+
25+
Vue.component('my-component', myComponent)
26+
27+
var app1 = new Vue({
28+
el: '#app1'
29+
});
30+
31+
var app2 = new Vue({
32+
el: '#app2'
33+
})
34+
</script>
35+
</html>

‎02.Components/Part-1/data-el.html

Lines changed: 40 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,40 @@
1+
<!DOCTYPE html>
2+
<html>
3+
4+
<head>
5+
<meta charset="UTF-8">
6+
<title></title>
7+
</head>
8+
9+
<body>
10+
<div id="app">
11+
<my-component>
12+
</my-component>
13+
14+
<my-component>
15+
</my-component>
16+
</div>
17+
<template id="myComponent">
18+
<p>
19+
<input v-model="a" /> {{ a }}
20+
</p>
21+
</template>
22+
</body>
23+
<script src="js/vue.js">
24+
</script>
25+
26+
<script>
27+
28+
29+
Vue.component('my-component', {
30+
data: function(){
31+
return {a : 1}
32+
}
33+
})
34+
35+
new Vue({
36+
el: '#app'
37+
})
38+
</script>
39+
40+
</html>

‎02.Components/Part-1/double-bind-props.html

Lines changed: 68 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,68 @@
1+
<!DOCTYPE html>
2+
<html>
3+
4+
<head>
5+
<meta charset="UTF-8">
6+
<title></title>
7+
<link rel="stylesheet" href="styles/demo.css" />
8+
</head>
9+
10+
<body>
11+
12+
<div id="app">
13+
14+
<table>
15+
<tr>
16+
<th colspan="3">父组件数据</td>
17+
</tr>
18+
<tr>
19+
<td>name</td>
20+
<td>{{ name }}</td>
21+
<td><input type="text" v-model="name" /></td>
22+
</tr>
23+
<tr>
24+
<td>age</td>
25+
<td>{{ age }}</td>
26+
<td><input type="text" v-model="age" /></td>
27+
</tr>
28+
</table>
29+
30+
<my-component v-bind:my-name.sync="name" v-bind:my-age.sync="age"></my-component>
31+
</div>
32+
33+
<template id="myComponent">
34+
<table>
35+
<tr>
36+
<th colspan="3">子组件数据</td>
37+
</tr>
38+
<tr>
39+
<td>my name</td>
40+
<td>{{ myName }}</td>
41+
<td><input type="text" v-model="myName" /></td>
42+
</tr>
43+
<tr>
44+
<td>my age</td>
45+
<td>{{ myAge }}</td>
46+
<td><input type="text" v-model="myAge" /></td>
47+
</tr>
48+
</table>
49+
</template>
50+
</body>
51+
<script src="js/vue.js"></script>
52+
<script>
53+
var vm = new Vue({
54+
el: '#app',
55+
data: {
56+
name: 'keepfool',
57+
age: 28
58+
},
59+
components: {
60+
'my-component': {
61+
template: '#myComponent',
62+
props: ['myName', 'myAge']
63+
}
64+
}
65+
})
66+
</script>
67+
68+
</html>

0 commit comments

Comments
 (0)