2.1.2 指令语法

指令（Directive）是带有“v-”前缀的Vue自定义标签属性，其属性值一般是一个JavaScript表达式。Vue中包含了一些不同功能的指令，比如v-bind用来给标签指定动态属性值，v-on用来给标签绑定事件监听，v-if和v-show用来控制标签是否显示。但需要注意的是，不管是什么功能的指令，它们操作的目标都是指令属性所在的标签。

下面以v-bind与v-on为例来演示指令语法的使用，同时读者可以思考下方代码的运行效果。

这里先将这两个指令的语法进行展示，以便于读者后续的理解。

● v-bind：属性名="JavaScript表达式"。

● v-on：事件名="方法名表达式"。

代码如下所示。

上面这段代码使用v-bind为a标签指定了动态属性值url，此时a标签的href属性值就是data对象中定义的url值，如图2-2所示；使用v-on为button标签绑定事件监听并指定回调confirm函数，当点击按钮时触发该函数执行对应操作。通过控制台查看该效果，如图2-3和图2-4所示。

图2-2 a标签的href属性值

图2-3 弹出对话框

图2-4 点击“确定”按钮后跳转至尚硅谷官方网站

其实Vue允许将“v-bind：属性名”简化为“：属性名”，“v-on：事件名”简化为“＠事件名”的形式，并且在实际项目开发中，前端工程师基本上会使用简化的语法进行开发。

例如，可以将上面的相关代码简化为下面的代码。