前端学习——指令

vue作为前端框架，为了简化或实现一些特定功能，提供了很多指令，那什么是指令呢？

所谓的指令就是能够完成特定功能的一些vue语法，比如属性绑定指令v-bind，事件绑定指令v-on，循环指令v-for等。在vue中，所有的指令都是v-开头的。

vue中最常用的指令有以下几种：

v-bind 属性动态绑定指令，通过v-bind可以实现html属性值的动态修改。如下图所示，a标签有href属性，就可以通过v-bind绑定动态数据，只需要修改data对象中的href的值，就可以实现修改超链接的跳转链接。并且v-bind指令由于使用频率比较高，所以可以使用其简写形式，也就是 冒号 ：

v-on 事件绑定指令，

我们知识前端开发会有很多事件，比如点击事件，键盘事件等，之前使用js开发时，事件绑定是通过先获取dom节点，然后再给获取的节点绑定事件，也就是方法，而使用了v-on指令后，就可以直接在节点dom上绑定事件。

如下图所示，通过v-on绑定点击事件，当点击按钮时就会触发绑定的事件函数，而且由于v-on使用频率较高，所以也提供了简写形式 艾特符  @

v-for 循环指令

因为实际开发过程中会碰到很多循环遍历的需求，所以vue提供了v-for指令来遍历数据，遍历对象可以是数组，对象，字符串等。最常见的遍历就是数组，其次是对象。

v-for指令中提供了一个key属性，可能很多人认为key指令没什么用，或者说大部分时间都用不到key属性。但vue为什么提供了一个key属性呢？

那是因为vue是一款前端框架，它隔离了程序员之间操作dom的过程，按照vue的语法，vue框架自动实现操作dom的过程，但为了提升效率，vue使用了一个叫做虚拟dom的设计思想，既在vue的操作过程中，会先在内存中解析出一个虚拟dom，然后使用diff算法匹配虚拟dom和真实dom的区别，如果没有改变就不会修改真实dom ，如果不一样才会根据新的数据重新渲染dom节点。

说白了就是vue为了实现dom的复用，减少真实的dom操作，而用来进行diff算法时，所使用的一个key属性。

如果循环遍历的数据只是用来进行页面展示，那么使用key属性确实没什么用，但如果循环列表中的数据可能会被修改，这时使用key的作用就体现出来了。

key最好是使用唯一的数据标识，比如用户id，手机号，身份证号等，因为默认情况下key是使用索引作为唯一标识，但在数据修改和插入的过程中，数据的索引可能会被改变，比如在一个数组中的头部插入一条数据，这时之前索引为0的数据变成了索引为1的数据。

v-model 数据双向绑定

在一些表单项中，因为需要用户输入，所以可以v-model进行双向数据绑定。当给输入项设置v-model属性时，v-model设置的默认值就是输入项的值，如果用户输入新的值，那么v-model也能获取到最新的数据。

如下图所示，使用v-model 绑定给input输入框进行双向数据绑定，并设置默认值

默认值效果如下图：

当在输入框中重新输入新的值时，发现val的默认值已经被改变了，这就是数据的双向绑定。

如果不使用vue，使用原生js开发，那么输入框就要使用placeholder给输入框设置默认值，并且重新输入之后，需要重新根据数据框的id获取当前的值。

在text，checkbox，select这几种类型时，由于其属性不一样，所以vue引擎会根据不同的类型解析出不同的属性，正如官网所示：

所以，v-model在不同的html标签中有不同的效果，所以具体的使用需要多加注意，多学习，总结或者查看官方文档。

剩下其它的vue指令，相对来说用的就比较少，而且也比较简单，等使用的时候可以查看文档临时学习。

v-html，v-text，v-show，v-if，v-else-if