vue.js之ToDoList

学会了基础的vue框架后，可以试着做一些东西了，比如ToDoList这个项目。
做ToDoList之前你得先去看或学习下SUI这个框架，做ToDoList可以在这里面找到许多的组件，可以省去很多时间。

1. ToDoList第一步

   1. 首先创建文件夹取名‘ToDoList’，在文件夹里面创建好html文件，css文件，js文件；

   2. 在html文件里引入css文件、js文件；

   3. 引入SUI的 cdn文件

       <link rel="stylesheet" href="https://g.alicdn.com/msui/sm/0.6.2/css/sm.min.css">
       <script type='text/javascript' src='https://g.alicdn.com/sj/lib/zepto/zepto.min.js' charset='utf-8'></script>
       <script type='text/javascript' src='https://g.alicdn.com/msui/sm/0.6.2/js/sm.min.js' charset='utf-8'></script>
      

      注意 ：引入css文件、js文件时，要把文件放在引入的cdn的下方，以便覆盖代码。

   4. 找组件放入定义好的vue的html页面中

   5. 给页面添加样式渲染，写入js代码根据vue的规则用数据操作事件

   6. 代码如下：
      html

       <div id="app">
           <!-- header--start -->
           <header class="bar bar-nav">
               <a class="icon icon-star pull-left"></a>
               <a 
               class="icon icon-edit pull-right"
               @click=" wintask = !wintask "
               ></a>
               <h1 class="title">todolist</h1>
           </header>
           <!-- header--end -->
      
           <!-- main--start -->
           <div class="content">
               <!-- card-start -->
               <div 
               class="card list" 
               v-for=" (item,index) in newtodos"
               >
                   <div class="card-content">
                       <div class="card-content-inner"> {{ item.text }} </div>
                   </div>
                   <div class="pull-right to-btn">
                       <button 
                       class="button button-success" 
                       @click=" item.flag=!item.flag" 
                       :class = "{'button-fill': item.flag}"
                       >
                           <span class="icon icon-check"></span>
                       </button>
                       <button 
                       class="button button-danger"
                       @click = "check(index)"
                       >
                           <span class="icon icon-remove"></span>
                       </button>
                   </div>
               </div>
               <!-- card-end -->
      
               <!-- 编辑弹窗--start -->
               <div 
               class="win"
               v-show="wintask"
               >
                   <div class="win-bg"></div>
                   <p><input type="text" 
                       v-model="task"
                       @keyup.enter= "addTodos"
                       ></p>
               </div>
               <!-- 编辑弹窗--end -->
      
               <!-- 删除弹框--start -->
               <div 
               class="win"
               v-show="deltask"
               @click="deltask = false"
               >
                   <div class="win-bg"></div>
                   <div class="win-del">
                       <span>亲，你真的要抛弃我吗？</span>
                       <button 
                       class="button button-primary button-fill pull-right"
                       @click="remove(activeindex)"
                       >真的</button>
                   </div>
               </div>
               <!-- 删除弹框--end -->
               <!-- main--end -->
               
       	<!-- footer--start-->
           </div>
           <div class="footer">
               <ul>
                   <li  v-for=" (item,index) in foot "> 
                       <button 
                       class="button"
                       :class="['button-' + item.classname,type===item.text?'button-fill':null]"
                       @click="type = item.text"
                       > {{ item.text }} </button>
                   </li>
               </ul>
           </div>
           <!-- footer--end-->
       </div>
      

      css

       @charset 'utf-8';
       .list {
           padding-bottom: 10px;
           overflow: hidden;
       }
       
       .button {
           display: inline-block;
           margin-right: 10px;
       }
       
       /* 弹窗 -- start*/
       .win{
           position: fixed;
           top: 0;
           left: 0;
           z-index: 10000;
           width: 100%;
           height: 100%;
       }
       .win .win-bg{
           position: absolute;
           width: 100%;
           height: 100%;
           background: rgba(0, 0, 0, 0.5);
       }
       .win p{
           position: absolute;
           left: 20%;
           top: 30%;
       }
       .win>.win-del{
           width: 80%;
           background: #fff;
           position: absolute;
           left:10%;
           top: 40%;
           border-radius: 15px;
       }
       .win span{
           display: block;
           text-indent: 50px;
           line-height: 60px;
       }
       .win .win-del button{
           margin:0 30px 5px 0;
       }
       /* 弹窗 -- end */
       
       /* footer--start */
       .footer{
           position:fixed;
           width: 100%;
           bottom: 0;
       }
       .footer ul{
           list-style: none;
           display: flex;
           padding: 0;
           justify-content: space-around;
       }
       .footer li{
           width: 80px;
           height: 80px;
           text-align: center;
       }
       .footer li button{
           width: 100%;
           height: 100%;
           border-radius:50%;
       }
       /* footer--end */
      

      js

       	new Vue({
       	    el: '#app',//初始化定义vue模板
       	    data: { //数据存放
       	      todos: [
       	        {
       	          id: 1,
       	          text: '好困',
       	          flag: false
       	        },
       	        {
       	          id: 2,
       	          text: '想睡',
       	          flag: false
       	        }
       	      ],
       	      task:'',
       	      wintask: false,
       	      deltask: false,
       	      activeindex: 0,
       	      type: 'A',
       	      foot:[
       	        {
       	        id: 1,
       	        text: 'A',
       	        classname: 'success'
       	      },
       	      {
       	        id: 2,
       	        text: 'F',
       	        classname: 'primary'
       	      },
       	      {
       	        id: 3,
       	        text: 'U',
       	        classname: 'danger'
       	      }
       	    ]
       	    },
       	      methods: { //定义事件
       	        addTodos () {
       	          this.todos.push({
       	          id: this.todos.length + 1,
       	          text: this.task,
       	          flag: true,
       	        })
       	        this.task = '',
       	        this.wintask = false
       	      },
       	      // 判断删除
       	      check(index){
       	        if( this.todos[index].flag ){
       	          //已完成
       	          this.remove(index)//直接删除
       	        }else{
       	          //未完成
       	          this.activeindex = 'index'
       	          this.deltask = true
       	        }
       	      },
       	      remove(index){
       	        this.todos.splice(index,1)
       	      }
       	    },
       	    computed:{ //计算属性
       	      newtodos(){
       	        if(this.type==='A'){
       	          return this.todos
       	        }else if(this.type==='F'){
       	          return this.todos.filter((item,index)=>{
       	            return item.flag ? item: null
       	          })
       	        }else{
       	          return this.todos.filter((item,index)=>{
       	            return !item.flag ? item : null
       	          })
       	        }
       	      }
       	    }
       	  })
      

      注意：在使用vue框架时，js中不能有任何的DOM操作，要用数据操作事件