Vue学习入门----实现一个todoList案例

关于vue的优点就不讨论了，这里直接上项目。

1、添加vue.js的依赖库

2、编写html网页

代码如下：

      
      
      
      
      


      

            
            
            提交
            

                  
                  
{{item}}
            
      

      
      

这里解释一下我的思路：

首先在html的body里面放一个input框、button按钮和一个ul标签，使用v-model将input框的内容和vue实例中data的inputValue属性双向绑定，双向绑定的意思就是当inputValue的值改变时，input框的值会改变，反之input框的值改变时，inputValue的值也会改变。

然后使用v-on：click给button绑定一个点击事件，当点击button时，将input框内输入的内容添加到ul标签里面去。这里的主要实现思路是首先使用v-for使li标签循环vue实例data中的一个list属性数组，每次点击button时，通过push方法将input框内输入的值添加到list数组中，然后就可以展示出来。

主要使用的vue的方法为：v-model双向绑定、v-for循环遍历、v-on：click绑定点击事件