V-FOR的使用
我们把数据写在data里面后,就可以循环这个数据,list是data里的list,item指的是循环之中每一项的内容,然后我们就可以用{{itme}}了
V-ON的使用
在我们刚进入页面的时候,页面是没有数据的,这时我们要用到v-on指令,我们绑定一个函数v-on:handleBtnClick
,这时,我们并没有这个方法,我们一定要把函数定义在methods里。
这段增加的函数的意思是只要button点击,我们就可以触发handleBtnClick这个方法,vue这个实例,已经接管了这个模板,所以我们知道,当我们触发事件的时候,他会自动在methods里面去找。
v-modle的使用
当我们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底层会根据数据的不同帮助我们重新渲染页面。