Skip to content

Commit 0ea9004

Browse files
thinkingcthinkingc
committed
vuedemo
1 parent 232004c commit 0ea9004

File tree

4 files changed

+10487
-0
lines changed

4 files changed

+10487
-0
lines changed

‎VueDemo1/README.md

+147
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,147 @@
1+
大家都知道Vue.js是中国人创造出来的，简单易用，所以必须要支持一下
2+
3+
##**Vue采用的*MVVM*设计模式**
4+
也就是说model和view绑定
5+
model改变，view的内容改变，反之亦然
6+
7+
##**Vue主要有以下几个关键字**
8+
1. v-model 绑定模型
9+
2. v-if 判断是否显示该dom
10+
3. v-show 判断是否将该dom的display设为none
11+
4. v-else if或者show为false时显示该dom
12+
5. v-for 迭代
13+
6. v-bind 绑定属性
14+
7. v-on 绑定方法
15+
16+
##我们以一个可查找的信息管理系统为例子
17+
18+
```
19+
<!DOCTYPE html>
20+
<html>
21+
22+
<head>
23+
<meta charset="UTF-8">
24+
<title></title>
25+
<link rel="stylesheet" href="styles/demo.css" />
26+
</head>
27+
28+
<body>
29+
<div id="app">
30+
<span>key</span>
31+
<!-- 绑定model中search.key -->
32+
<!-- 内容和下面每一列的数据进行比较 -->
33+
<!-- 内容改变，下面的每一列都马上会进行比较 -->
34+
<input type="text" v-model="search.key">
35+
<legend>
36+
Create New Person
37+
</legend>
38+
<div class="form-group">
39+
<label>Name:</label>
40+
<!-- 绑定model中newPerson.name -->
41+
<input type="text" v-model="newPerson.name"/>
42+
</div>
43+
<div class="form-group">
44+
<label>Age:</label>
45+
<!-- 绑定model中newPerson.age -->
46+
<input type="text" v-model="newPerson.age"/>
47+
</div>
48+
<div class="form-group">
49+
<label>Sex:</label>
50+
<!-- 绑定model中newPerson.sex -->
51+
<select v-model="newPerson.sex">
52+
<option value="Male">Male</option>
53+
<option value="Female">Female</option>
54+
</select>
55+
</div>
56+
<div class="form-group">
57+
<label></label>
58+
<!-- @click是v-on:click的缩写 -->
59+
<button @click="createPerson">Create</button>
60+
</div>
61+
</fieldset>
62+
<table>
63+
<thead>
64+
<tr>
65+
<th>Name</th>
66+
<th>Age</th>
67+
<th>Sex</th>
68+
<th>Delete</th>
69+
</tr>
70+
</thead>
71+
<tbody>
72+
<!-- 用v-for迭代，$index为每一个item的索引 -->
73+
<!-- v-if判断为true则显示，否则则移除，这里更适合用v-show,v-show并不会移除dom只会将display属性改为none -->
74+
<!-- 和搜索框内容进行比较 -->
75+
<tr v-for="person in people" v-if="person.name.indexOf(search.key)>=0||person.sex.indexOf(search.key)>=0||person.age==search.key">
76+
<td >{{ person.name }}</td>
77+
<!-- :style是v-bind:style的缩写，满足条件则值为前面的，否则为后面的，固定的字符串要用' ',变量不需要用'' -->
78+
<!-- v-bind后面还可以接其他的属性例如class，id -->
79+
<td :style="person.age>30 ? 'color: red' : ' ' ">{{ person.age }}</td>
80+
<!-- v-else元素必须立即跟在v-if或v-show元素的后面——否则它不能被识别 -->
81+
<td v-if="person.sex =='Male'">男</td>
82+
<td v-else>女</td>
83+
<td class="text-center"><button @click="deletePerson($index)">Delete</button></td>
84+
</tr>
85+
</tbody>
86+
</table>
87+
</div>
88+
</body>
89+
<script src="js/vue.js"></script>
90+
<script>
91+
// 初始化Vue
92+
//el获取绑定的标签，#app获取id为app的dom，.app的话则获取class为app的dom
93+
//data中为模型
94+
//methods为方法
95+
var vm = new Vue({
96+
el: '#app',
97+
data: {
98+
search:{
99+
key:""
100+
},
101+
newPerson: {
102+
name: '',
103+
age: 0,
104+
sex: 'Male'
105+
},
106+
people: [{
107+
name: 'Jack',
108+
age: 30,
109+
sex: 'Male'
110+
}, {
111+
name: 'Bill',
112+
age: 26,
113+
sex: 'Male'
114+
}, {
115+
name: 'Tracy',
116+
age: 22,
117+
sex: 'Female'
118+
}, {
119+
name: 'Chris',
120+
age: 36,
121+
sex: 'Male'
122+
}]
123+
},
124+
methods:{
125+
createPerson: function(){
126+
this.people.push(this.newPerson);
127+
// 添加完newPerson对象后，重置newPerson对象
128+
this.newPerson = {name: '', age: 0, sex: 'Male'}
129+
},
130+
deletePerson: function(index){
131+
// 删一个数组元素
132+
this.people.splice(index,1);
133+
}
134+
}
135+
})
136+
</script>
137+
138+
</html>
139+
```
140+
141+
不需要太多的解释，直接看代码就知道Vue用法是什么
142+
143+
##效果图
144+
145+
![效果](http://img.blog.csdn.net/20170102094932832?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvcXFfMzIxOTgyNzc=/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/SouthEast)
146+
147+
![搜索](http://img.blog.csdn.net/20170102094953513?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvcXFfMzIxOTgyNzc=/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/SouthEast)

0 commit comments

Comments
 (0)