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>
View Code

 完成了增删改查，和切换完成，算是比较完整的了，

预览地址：https://kuishang.github.io/vueTodo/

 

posted @ 2017-02-24 12:13  _白马非马  阅读(496)  评论(0)  编辑  收藏  举报