推荐：​​Vue汇总​​

Vue - 用Vue写一个TodoList小栗子

需求

  • 在输入框中输入计划，点击提交，可以加入计划​​List​​的最前面。
  • 避免输入全是空格。
  • 避免点击按钮的冒泡事件。

代码

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>TodoList</title>
    <script src="./js/vue.js"></script>
  </head>
  <body>
    <div id="div">
      <input v-model.trim="inputValue" type="text">
      <button @click.stop="bntClick">提交</button>
      <ul>
        <li v-for="item in list" :key="item.id">{{item.value}}</li>
      </ul>
    </div>
  </body>
</html>
<script>
  var vue = new Vue({
    el: '#div',
    data: {
      inputValue: '',
      id: 1,
      list: []
    },
    methods: {
      bntClick(){
        if(this.inputValue !== ''){
          this.list.unshift({
            id: this.id++,
            value: this.inputValue
          });
          this.inputValue = '';
        }
        else{
          alert('写点东西再交');
        }
      }
    }
  })
</script>

如果代码中有没见过的修饰符或者​​API​​，可以去最前面的推荐部分看一下相关博客，博客里面都介绍的很详细。

效果

Vue - 用Vue写一个TodoList小栗子_vue.js


输入都是空格，直接警告，​​v-model.trim​​起到了作用。

Vue - 用Vue写一个TodoList小栗子_前端_02

输入计划，点击提交。

Vue - 用Vue写一个TodoList小栗子_前端_03


避免点击按钮的冒泡事件，​​@click.stop​​起了作用，虽然这里的例子不避免点击按钮的冒泡事件也没关系。

写博客是博主记录自己的学习过程，如果有错误，请指正，谢谢！