1.v-bind指令

一些指令能够接收一个“参数”，在指令名称之后以冒号表示。例如，v-bind 指令可以用于响应式地更新 HTML 属性：

<a v-bind:herf="url">....</a> 这个可以缩写为<a :href="url">...</a>

在这里 href 是参数，告知 v-bind 指令将该元素的 href 属性与表达式 url 的值绑定

另一个例子是 v-on 指令，它用于监听 DOM 事件：

<a v-on:click="doSomething">...</a> 这个可以缩写为<a @click="doSomething">...</a>

2.v-if指令

<p v-if="seen">现在你看到我了<p>

这里，v-if 指令将根据表达式 seen 的值的真假来插入/移除 <p>元素

v-show 跟v-if差不多也是通过后面的值的真假来看是否显示这个标签

3.v-model指令

在 input 输入框中我们可以使用 v-model 指令来实现双向数据绑定：

<p>{{message}}</p>

4.class属性绑定

我们可以为v-bind:class设置一个对象，从而动态的切换class

<div v-bind:class="{active: isActive}"></div>,active在style中设定属性，根据vue里面data中的isActive的真假决定是否用active这个样式

5.v-for

接下来讲一下比较麻烦的列表渲染吧

v-for指令需要使用 item in items 形式的特殊语法，items 是源数据数组并且 item 是数组元素迭代的别名。它可以对数组，对象，和模版进行渲染，展示一个数组的吧

结果是

后面根据前面那些语法综合写了一个小demo，一个留言板

这里可以看见最上面两个input用v-model将数据绑定，然后我在data里面是放了一个数组，用来存输入的数据，添加那个按钮通过@click=“add”，然后在vue的methods里写入add这个方法

一点击，就会把数据存在myData这个数组中，然后下面是写了一个表格，将数组中的数据渲染到表格中

最后来讲讲动画吧，因为看着比较好玩，就学了一下

6.动画

<transition name="fade">运动的东西</transition>

class定义：

.fade-enter{}//初始状态 .fade-enter-active{}//变化成什么样—> 当元素出来显示

.fade{} .fade-leave-active{}//变成什么样 —>当元素离开消失

由于自己写的动画不好看，官网也推荐了可以用animate.css，所以我就去官网下来animate然后把它引入到文件里

vue里的指令