原标题：vue从入门到学会第二天——–指令上
一、前言
指令是自定义属性，它使得标签的各项操作更为灵活，下面我们来重点介绍下vue中的每个指令的用法。
二、样式绑定指令v-bind
vue支持两种绑定样式的指令，即：style和class，意思就是你可以直接在style标签中编写一些表达式或者传递一些数据给他们，然后vue再来响应这些操作，话不多说，我们来看下：
1.class
这里仅仅只是使用了一个class的插值表达式，不过我们应该注意到了，咱们的class前面加了一个“：”，加这个冒号之后使得咱们的class变为了一个动态的可修改的值，它会随着不同场景不断变化，这样就使得咱们的前端项目的灵活性大大提高了。当然我们也可以在动态修改时补上全称，v-bind:class这样也是可以的，如下：
当然对于该加载什么样式除了比大小，还有就是可以给个布尔值来实现，如下：
如果你想加载多个类名了，可以这样，如下：
还可以这样，如下：
可以看到，当应用多个类的时候，后面的类的效果将会覆盖到前面的类的效果。
2.style
使用这种方法似乎更简单，因为他不需要我们再去单独的写一个标签来定义类的属性，如下：
如果样式比较长，我们可以将它写入到变量中，然后引用，如下：
如果要绑定多个样式了，如下：
3.绑定基本属性
在vue中，如果想要使用基本属性，最好使用绑定，为什么这么说了，因为有的属性不用绑定是无法赋值的，如下：
此时就无法显示图片，如果绑定这个属性的话就可以显示了，如下：
三、事件绑定指令v-on
1.基础事件绑定
刚刚我们说的是样式绑定，现在来聊聊事件绑定，先来个最基本的点击事件绑定，如下：
基本上所有的事件都可以通过绑定并监听其行为，当然，被绑定的事件既可以是表达式，也可以是函数，不够函数要写在methods中，如下：
这里后面我们会着重讲解，这里不做重点。我们来看看效果，如下：
可以看到，此刻元素标签绑定的点击事件的函数就生效了。
2.事件绑定修饰
如果你想要取消某个元素的事件所触发的默认效果，或者是取消点击这个元素同时触发父元素的点击效果的冒泡行为，那么请用事件修饰符，一般有如下几类：
.stop 阻止冒泡
.prevent 停止默认行为
.capture 添加事件监听器时使用事件捕获模式
.self 只当在 event.target 是当前元素自身时触发处理函数
.once 只执行一次
.passive 滚动事件的默认行为 (即滚动行为) 将会立即触发
可以看到，当我们取消了button的冒泡事件后，button就可以用了，再也不用担心因为没有父元素层级高而没效果了。同样的，其他的修饰符也具备一些特殊的效果，比如prevent，停止默认行为，一般用来跳转或者是点击按钮是否确认的提示，如下：
这样就实现了取消并自定义元素的默认行为的功能。
3.按键绑定修饰
既然键盘有事件绑定和修饰，那么按键肯定也有，如下：
.enter => 回车键
.tab => tab键
.delete => 删除键
.esc => 取消键
.space => 空格键
.up => 上
.down => 下
.left => 左
.right => 右
下面我们来实现一个回车和空格的按键绑定，如下:
如果我想用自定义的修饰符来实现回车效果，可以进行一些配置，如下：
4.系统修饰键
如果我们想要使用组合键的形式，可以使用系统修饰键，如下：
.ctrl
.alt
.shift
.meta
下面来看下：
5.修饰符精确
如果你只想在某个按钮按下后才作出动作，那么必须使用exact修饰符，如下：
6.鼠标修饰符
可以对鼠标的左右中三个键进行操作，如下：
.left 左键
.right 右键
.middle 中键
我们来对这三个修饰符进行应用，如下：
四、总结
vue中要学的指令还比较多，不过这两个算是应用的比较多的了，所以这里小编着重对其进行讲解，有什么不明白的可以滴滴我哟，要源码的话关注公众号“”简易编程网“”后台回复vue2即可。
责任编辑：