![剑指Vue3:从入门到实践](https://wfqqreader-1252317822.image.myqcloud.com/cover/329/51090329/b_51090329.jpg)
上QQ阅读APP看本书,新人免费读10天
设备和账号都新为新人
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:事件名="方法名表达式"。
代码如下所示。
![](https://epubservercos.yuewen.com/EBE7EF/30122329607553806/epubprivate/OEBPS/Images/48137_29_3.jpg?sign=1739404424-HVQhDsiWwwuCyHSr0rxRjPDU4Foh6aEH-0-016dc115b38e36ede6fb227807dd7458)
![](https://epubservercos.yuewen.com/EBE7EF/30122329607553806/epubprivate/OEBPS/Images/48137_30_1.jpg?sign=1739404424-wlCmXS4lOxt1VB19j9QDnMugUPbg09OR-0-5102fc95556f5d498e292d3752641dda)
上面这段代码使用v-bind为a标签指定了动态属性值url,此时a标签的href属性值就是data对象中定义的url值,如图2-2所示;使用v-on为button标签绑定事件监听并指定回调confirm函数,当点击按钮时触发该函数执行对应操作。通过控制台查看该效果,如图2-3和图2-4所示。
![](https://epubservercos.yuewen.com/EBE7EF/30122329607553806/epubprivate/OEBPS/Images/48137_30_2.jpg?sign=1739404424-PU88iFBlXeJlgLSOQMoF6KRb1B4l9GWH-0-4b839621d5b762b7fd3265471fc6ddcc)
图2-2 a标签的href属性值
![](https://epubservercos.yuewen.com/EBE7EF/30122329607553806/epubprivate/OEBPS/Images/48137_30_3.jpg?sign=1739404424-SQlLXbJmYyzleko6hl02xCKnavTqt8KB-0-df4eff0f5508d37769890a77eea145f6)
图2-3 弹出对话框
![](https://epubservercos.yuewen.com/EBE7EF/30122329607553806/epubprivate/OEBPS/Images/48137_30_4.jpg?sign=1739404424-HG70uWEUBVHTNx1zlVBhJjewyRnc3Y86-0-75c0634ccbfb11d2155689e37033787d)
图2-4 点击“确定”按钮后跳转至尚硅谷官方网站
其实Vue允许将“v-bind:属性名”简化为“:属性名”,“v-on:事件名”简化为“@事件名”的形式,并且在实际项目开发中,前端工程师基本上会使用简化的语法进行开发。
例如,可以将上面的相关代码简化为下面的代码。
![](https://epubservercos.yuewen.com/EBE7EF/30122329607553806/epubprivate/OEBPS/Images/48137_30_5.jpg?sign=1739404424-cw9iUVhPJCfRqVtAo6tfJDRjZibzlJ1V-0-b2d0fc51074c1ba46e2cb4c2fdd28f9d)