vue学习笔记二

vue的data里的数据是如何与HTML的标签产生关联呢？

data里存放的都是键值对，一般只存放这个键的名字和值的类型。如 name: " ",值是通过methods的方法通过Ajax调用接口从后端动态获取。键的名字在标签里通过特定的vue的语法来是标签与data产生联系，也就是动态绑定。标签的写法是{ {键的名字}}。除了使用{ {}}来绑定数据，还可以使用v-model 来绑定数据，它俩的区别在{ {}}单向展示数据从data向页面展示，而v-model则是用于表单标签这一类有输入和展示操作的标签的数据双向绑定，即数据会从data向页面运输，页面操作过后的数据也会向data里运输，从而可以对data操作，让数据从接口走向后端

vue还有条件语句，循环语句

<div v-if="Math.random() > 0.5">

Sorry

</div>

<div v-else>

Not sorry

</div>

循环

<li v-for="site in sites"> { { site.name }} </li>

以我个人的理解，v-if用在添加样式上会比较合适，太多的条件可以放在jQuery里操作，不建议在HTML的标签行上直接写。v-for绑定的data数据是数组才合适，且数组里的每一条数据都是一个对象。

监听dom事件 v-on 但是之间写@click 也是可以的，用在按钮上。@click="方法名"

方法一定得存在，不然F12会报错

更详细的可以看vue的官方文档。