VueDemo1：记事簿(v-for、v-on、v-model)

VueDemo1：记事簿

1. 列表结构可以通过v-for指令结合数据生成
2. v-on结合事件修饰符可以对事件进行限制,比如enter
3. v-on在绑定事件时可以传递自定义参数
4. 通过v-model可以快速的设置和获取表单元素的值
5. 基于数据的开发方式(以往为基于dom开发)

代码：

 <!-- 主体区域 -->
<section id="todoapp">
  <!-- 输入框 -->
  <header>
     <h1>小白记事簿</h1>
     <input v-model="inputValue" @keyup.enter="add" autofocus="autofocus" autocomplete="off" placeholder="请输入任务" />
  </header>
  <!-- 列表区域 -->
  <section class="main">
     <ul>
       <li v-for="(item,index) in list">
          <div>
            <span>{{index+1}}</span>
            <label>{{item}}</label>
            <button class="destory" @click="remove(index)">x</button>
          </div>
       </li>
     </ul>
  </section>
  <!-- 列表清空 -->
  <footer>
  <!-- <footer v-show="list.length != 0"> -->
     <span v-if="list.length != 0">
       <strong>{{list.length}}</strong>items left
     </span>
     <button @click="clear" v-show="list.length != 0">清空</button>
  </footer>
</section>

var app = new Vue({
  el:"#todoapp",
  data:{
     list:["吃饭","睡觉","打豆豆"],
     inputValue:"好好学习，天天向上"
  },
  methods:{
     add:function(){
       this.list.push(this.inputValue);
       this.inputValue="";
     },
     remove:function(index){
       console.log("删除"+index);
       this.list.splice(index,1);
     },
     clear:function(){
       this.list=[];
     }
  }
})