vue示例todos

60 阅读 0 评论 40 点赞

我是靠谱客的博主贤惠板凳，最近开发中收集的这篇文章主要介绍vue示例todos，觉得挺不错的，现在分享给大家，希望可以做个参考。

概述

简单版todos-纯数据展示

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>todoDEMO</title>
<style>
</style>
</head>
<body>
<div class="div1">
<input type="text" placeholder=" add a todo" v-model="item" @keyup.enter="addNewTodo">
<ul>
<li v-for="todo in todos">
{{todo}}
</li>
</ul>
</div>
</body>
<script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.14.1/lodash.min.js"></script>
<script src="vue-v2.0.js"></script>
<script>
var vm = new Vue({
el: '.div1',
data: {
item: '',
todos: []
},
methods: {
addNewTodo: function () {
this.todos.push(this.item);
this.item = '';
}
}
})
</script>
</html>

View Code

子条目-需要样式咋办？则把子条目做成组件，（但是这一版失败了，）


1 <!DOCTYPE html>

2 <html lang="en">

3 <head>

4
<meta charset="UTF-8">

5
<title>todoDEMO</title>

6
<link rel="stylesheet" href="reset.css">

7
<link href="//cdn.bootcss.com/bootstrap/4.0.0-alpha.6/css/bootstrap.css" rel="stylesheet">

8
<style>

9 
.container {
 10
padding-top: 50px;
 11 
}
 12
 13 
.content ul li {
 14
margin-bottom: 10px;
 15 
}
 16
</style>
 17 </head>
 18 <body>
 19 <div class="div1 container">
 20
<div class="row">
 21
<div class="col-md-12">
 22
<header class="">
 23
<h1 class=" text-center text-primary">TO<span class="text-danger">D</span>O<span
 24
class="text-warning">S</span></h1>
 25
<label for="myInput">说点什么吧： </label>
 26
<input type="text" class="form-control" id="myInput" placeholder=" add a todo" v-model="item"
 27
@keyup.enter="addNewTodo">
 28
</header>
 29
</div>
 30
</div>
 31
<div class="row">
 32
<div class="col-md-12">
 33
<section class="content">
 34
<ul>
 35
<li class="bg-info"
 36
is="todo-item"
 37
v-for="(todo,index) in todos"
 38
@remove="removeItem(index)"
 39
:value="todo"
 40
></li>
 41
</ul>
 42
</section>
 43
</div>
 44
</div>
 45
 46
<div class="row">
 47
<div class="col-md-12">
 48
<footer>
 49 
总计：{{total}}
 50
</footer>
 51
</div>
 52
</div>
 53 </div>
 54
 55
 56 <div class="show">.aa..</div>
 57 <div class="hidden-xl-down">.bbb.</div>
 58
 59
 60 </body>
 61 <script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.14.1/lodash.min.js"></script>
 62 <script src="vue-v2.0.js"></script>
 63 <script>
 64
 65
Vue.component('todo-item', {
 66
template: '
 67
<li @dblclick="edit">
 68
<span v-bind:class="[editing?hiddenClass:showClass]">{{value}}</span>
 69
<input type="text" v-bind:value="val"
@keyup.enter="submit"
@blur="submit" v-bind:class="[editing?showClass:hiddenClass]" v-on:input="updateValue($event.target.value)">
 70
<button @click="$emit('remove')">删除</button>
 71
</li>
 72
',
 73 
props: {
 74 
value: {
 75
required: true,
 76
default: function () {
 77
return {value: 'nothing...'}
 78 
},
 79 
validator: function (value) {
 80
return value;
 81 
}
 82 
}
 83 
},
 84 
data: function () {
 85
return {
 86
val:this.value,
 87
editing:false,
 88
hiddenClass:'hidden-xl-down',
 89
showClass:'show',
 90
inputval:''
 91 
}
 92 
},
 93 
methods: {
 94 
edit: function () {
 95
 96
this.editing=true;
 97 
},
 98 
submit : function () {
 99
this.editing=false;
100
this.$emit('increment')//此处数据无法传递出去给父组件，而且这样耦合性较高，父类和子类依赖同一份数据
101
//console.log(3);//显示隐藏
102
//console.log(this.val);//显示隐藏
103 
},
104 
updateValue: function (val) {
105
this.inputval =val;
106 
console.log(val);
107 
}
108
109
110 
}
111 
});
112
113
/*
思路：
114 
（注意：每一个条目的数据都存在父类data中，通过prop传递给子组件，所以子类组件不能修改此数据）
115 
1 子组件包含 一个显示数据的span 和一个隐藏的input ,当span得到值后 同时赋值给input
116 
2 input 修改完后通过子组件派发事件，让外层父类更新，但是数据无法传递出来，
117 
3 要换思路*/
118
119
var vm = new Vue({
120
el: '.div1',
121 
data: {
122
item: '',
123 
todos: []
124
125 
},
126 
methods: {
127 
addNewTodo: function () {
128
this.todos.push(this.item);
129
this.item = '';
130 
},
131 
removeItem: function (index) {
132
this.todos.splice(index, 1)
133 
}
134 
},
135 
computed: {
136 
total: function () {
137
return this.todos.length;
138 
}
139 
}
140 
})
141 </script>
142 </html>