VUE（二）

V-FOR的使用

image.png

我们把数据写在data里面后，就可以循环这个数据，list是data里的list，item指的是循环之中每一项的内容，然后我们就可以用{{itme}}了

V-ON的使用

图片.png

在我们刚进入页面的时候，页面是没有数据的，这时我们要用到v-on指令，我们绑定一个函数v-on:handleBtnClick，这时，我们并没有这个方法，我们一定要把函数定义在methods里。
这段增加的函数的意思是只要button点击，我们就可以触发handleBtnClick这个方法，vue这个实例，已经接管了这个模板，所以我们知道，当我们触发事件的时候，他会自动在methods里面去找。

v-modle的使用

图片.png

当我们click点击的时候，我们希望拿到Input内容，这时候就要用到v-modle。
我们在控制台用app.$data.inputValue获取数据，首先获取的是空字符串，而且我们改变app.$data.inputValue数据以及改变页面数据，控制台app.$data.inputValue也会发生变化，这就是一个双向数据绑定。在这里，我们把Input的value值和data里的InputValue做了绑定，这样我们button的时候，我们就可以用this.inputValue添加数据，VUE的实例会自动去data里找inputValue。

input框清空

最后一步，当我们在Input输入内容的时候，数据是加到后面了，但是我们的input框里还有我们上次输入的内容，很简单，我们只要在后面加一句this.inputValue = " "就好了。

最后

我们用VUE都是在操作数据，并没有操作DOM，列表中的内容我们放在list里面，input的内容我们放在inputValue中，当我们在页面做操作，我们并没有改变DOM，而是去改变数据，数据变了，页面自动跟着变化，这种我们就叫做MVVM格式，也就是不涉及DOM操作，取而代之都是在改变数据层，当我们数据变更，VUE底层会根据数据的不同帮助我们重新渲染页面。