Skip to content

Commit 35d8352

Browse files
dk-landk-lan
committed
modify by dk
1 parent 9572c43 commit 35d8352

File tree

4 files changed

+258
-3
lines changed

4 files changed

+258
-3
lines changed

‎README.md‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -37,7 +37,7 @@
3737
- 认识 Vue
3838
- 认识数据驱动模式
3939
- 认识 MVVM 模式
40-
- [模版语法](https://github.com/dk-lan/vue-erp/tree/master/VueBasic/%E6%A8%A1%E7%89%88%E8%AF%AD%E6%B3%95)
40+
- [模版语法](https://github.com/dk-lan/vue-erp/tree/master/VueBasic/TemplateSyntax)
4141

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

‎VueBasic/TemplateSyntax/Example.css‎

Lines changed: 155 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,155 @@
1+
* {
2+
margin: 0;
3+
padding: 0;
4+
box-sizing: border-box
5+
}
6+
7+
html {
8+
font-size: 12px;
9+
font-family: Ubuntu, simHei, sans-serif;
10+
font-weight: 400
11+
}
12+
13+
body {
14+
font-size: 1rem
15+
}
16+
17+
table,
18+
td,
19+
th {
20+
border-collapse: collapse;
21+
border-spacing: 0
22+
}
23+
24+
table {
25+
width: 100%
26+
}
27+
28+
td,
29+
th {
30+
border: 1px solid #bcbcbc;
31+
padding: 5px 10px
32+
}
33+
34+
th {
35+
background: #42b983;
36+
font-size: 1.2rem;
37+
font-weight: 400;
38+
color: #fff;
39+
cursor: pointer
40+
}
41+
42+
tr:nth-of-type(odd) {
43+
background: #fff
44+
}
45+
46+
tr:nth-of-type(even) {
47+
background: #eee
48+
}
49+
50+
fieldset {
51+
border: 1px solid #BCBCBC;
52+
padding: 15px;
53+
}
54+
55+
input {
56+
outline: none
57+
}
58+
59+
input[type=text] {
60+
border: 1px solid #ccc;
61+
padding: .5rem .3rem;
62+
}
63+
64+
input[type=text]:focus {
65+
border-color: #42b983;
66+
}
67+
68+
button {
69+
outline: none;
70+
padding: 5px 8px;
71+
color: #fff;
72+
border: 1px solid #BCBCBC;
73+
border-radius: 3px;
74+
background-color: #009A61;
75+
cursor: pointer;
76+
}
77+
button:hover{
78+
opacity: 0.8;
79+
}
80+
81+
#app {
82+
margin: 0 auto;
83+
max-width: 640px
84+
}
85+
86+
.form-group {
87+
margin: 10px;
88+
}
89+
90+
.form-group > label {
91+
display: inline-block;
92+
width: 10rem;
93+
text-align: right;
94+
}
95+
96+
.form-group > input,
97+
.form-group > select {
98+
display: inline-block;
99+
height: 2.5rem;
100+
line-height: 2.5rem;
101+
}
102+
103+
.text-center{
104+
text-align: center;
105+
}
106+
107+
.pagination {
108+
display: inline-block;
109+
padding-left: 0;
110+
margin: 21px 0;
111+
border-radius: 3px;
112+
}
113+
114+
.pagination > li {
115+
display: inline;
116+
}
117+
118+
.pagination > li > a {
119+
position: relative;
120+
float: left;
121+
padding: 6px 12px;
122+
line-height: 1.5;
123+
text-decoration: none;
124+
color: #009a61;
125+
background-color: #fff;
126+
border: 1px solid #ddd;
127+
margin-left: -1px;
128+
list-style: none;
129+
}
130+
131+
.pagination > li > a:hover {
132+
background-color: #eee;
133+
}
134+
135+
.pagination .active {
136+
color: #fff;
137+
background-color: #009a61;
138+
border-left: none;
139+
border-right: none;
140+
}
141+
142+
.pagination .active:hover {
143+
background: #009a61;
144+
cursor: default;
145+
}
146+
147+
.pagination > li:first-child > a .p {
148+
border-bottom-left-radius: 3px;
149+
border-top-left-radius: 3px;
150+
}
151+
152+
.pagination > li:last-child > a {
153+
border-bottom-right-radius: 3px;
154+
border-top-right-radius: 3px;
155+
}

‎VueBasic/TemplateSyntax/Example.html‎

Lines changed: 98 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,98 @@
1+
<!DOCTYPE html>
2+
<html>
3+
<head>
4+
<meta charset="UTF-8">
5+
<title>模版语法-综合案例</title>
6+
<link rel="stylesheet" href="Example.css" />
7+
<script src="https://unpkg.com/vue/dist/vue.js"></script>
8+
</head>
9+
10+
<body>
11+
<div id="app">
12+
13+
<fieldset>
14+
<legend>
15+
Create New Person
16+
</legend>
17+
<div class="form-group">
18+
<label>Name:</label>
19+
<input type="text" v-model="newPerson.name"/>
20+
</div>
21+
<div class="form-group">
22+
<label>Age:</label>
23+
<input type="text" v-model="newPerson.age"/>
24+
</div>
25+
<div class="form-group">
26+
<label>Sex:</label>
27+
<select v-model="newPerson.sex">
28+
<option value="Male">Male</option>
29+
<option value="Female">Female</option>
30+
</select>
31+
</div>
32+
<div class="form-group">
33+
<label></label>
34+
<button @click="createPerson">Create</button>
35+
</div>
36+
</fieldset>
37+
<table>
38+
<thead>
39+
<tr>
40+
<th>Name</th>
41+
<th>Age</th>
42+
<th>Sex</th>
43+
<th>Delete</th>
44+
</tr>
45+
</thead>
46+
<tbody>
47+
<tr v-for="(person, index) in people">
48+
<td>{{ person.name }}</td>
49+
<td>{{ person.age }}</td>
50+
<td>{{ person.sex }}</td>
51+
<td :class="'text-center'"><button @click="deletePerson(index)">Delete</button></td>
52+
</tr>
53+
</tbody>
54+
</table>
55+
</div>
56+
</body>
57+
<script>
58+
var vm = new Vue({
59+
el: '#app',
60+
data: {
61+
newPerson: {
62+
name: '',
63+
age: 0,
64+
sex: 'Male'
65+
},
66+
people: [{
67+
name: 'Jack',
68+
age: 30,
69+
sex: 'Male'
70+
}, {
71+
name: 'Bill',
72+
age: 26,
73+
sex: 'Male'
74+
}, {
75+
name: 'Tracy',
76+
age: 22,
77+
sex: 'Female'
78+
}, {
79+
name: 'Chris',
80+
age: 36,
81+
sex: 'Male'
82+
}]
83+
},
84+
methods:{
85+
createPerson: function(){
86+
this.people.push(this.newPerson);
87+
// 添加完newPerson对象后，重置newPerson对象
88+
this.newPerson = {name: '', age: 0, sex: 'Male'}
89+
},
90+
deletePerson: function(index){
91+
// 删一个数组元素
92+
this.people.splice(index,1);
93+
}
94+
}
95+
})
96+
</script>
97+
98+
</html>

‎VueBasic/TemplateSyntax/README.md‎

Lines changed: 4 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -212,7 +212,7 @@ var vm = new Vue({
212212
<tr><td>v-model</td><td>表单元素的值</td><td><!--v-model-->
213213
214214
``` html
215-
<!--仅限于表单元素-->
215+
<!--仅限于表单元素，双向绑定-->
216216
<input type="text" v-model="mess"/>
217217
```
218218

@@ -250,4 +250,6 @@ var vm = new Vue({
250250
</tbody>
251251
</table>
252252

253-
[指令效果](https://dk-lan.github.io/vue-erp/VueBasic/TemplateSyntax/Directives.html)
253+
[指令效果](https://dk-lan.github.io/vue-erp/VueBasic/TemplateSyntax/Directives.html)
254+
255+
[综合安全](https://dk-lan.github.io/vue-erp/VueBasic/TemplateSyntax/Example.html)

0 commit comments

Comments
 (0)