-
这次通过一个todolist的例子来进一步学习vue。
-
首先，我们做把列表样式做出来：
-
-
代码：
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
<html>
<head>
<script src="http://vuejs.org/js/vue.js"></script>
<meta charset="utf-8">
<title>JS Bin</title>
</head>
<body>
<div id="app">
<input type="text">
<button>submit</button>
<ul>
<li v-for="item in list">{{item}}</li>
<!-- v-for 指令可以循环调用指定数据的内容，在通过插值表达式显示在元素中 -->
</ul>
</div>
<script>
var app = new Vue({
el: '#app',
data: {
list: ['first class', 'second class']
}
})
</script>
</body>
</html>
-
接着实现提交内容，内容呈现到todolist列表中：
- 效果
- 代码：
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
<html>
<head>
<script src="http://vuejs.org/js/vue.js"></script>
<meta charset="utf-8">
<title>JS Bin</title>
</head>
<body>
<div id="app">
<input type="text" v-model="inputValue">
<!-- v-modle进行数据双向绑定 -->
<button v-on:click="handleBtnClick">submit</button>
<!-- 添加click事件，绑定在button上 -->
<ul>
<li v-for="item in list">{{item}}</li>
<!-- v-for 指令可以循环调用指定数据的内容，在通过插值表达式显示在元素中 -->
</ul>
</div>
<script>
var app = new Vue({
el: '#app',
data: {
list: [],
inputValue: ''
},
methods: {
handleBtnClick: function() {
this.list.push(this.inputValue)
this.inputValue = ''
}
}
})
</script>
</body>
</html>
-
使用jQuery实现以上todolist
- 效果
- 代码：
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
<html>
<head>
<script src="//code.jquery.com/jquery-2.1.1.min.js"></script>
<meta charset="utf-8">
<title>JS Bin</title>
</head>
<body>
<div id="app">
<input id="input" type="text">
<button id="btn">submit</button>
<ul id="list"></ul>
</div>
<script>
function Page() {
}
$.extend(Page.prototype, {
init: function() {
this.bindEvents()
},
bindEvents: function() {
var submitBtn = $('#btn')
submitBtn.on('click', $.proxy(this.handleBtnClick, this))
},
handleBtnClick: function() {
var inputElement = $('#input')
var inputValue = inputElement.val()
var ulElement = $('#list')
ulElement.append('<li>' + inputValue + '</li>')
$('#input').val('')
}
})
var page = new Page()
page.init()
</script>
</body>
</html>
