Vue 框架之 v-bind 指令详解

v-bind指令详解

1.这个指令是干啥的？

它可以让html标签的某个属性的值产生动态的效果。

2.v-bind指令的语法格式：

<html标签 v-bind:参数 = "表达式"></html标签>

3.v-bind指令的编译原理？

编译前：

<html标签 v-bind:参数 = "表达式"></html标签>

编译后：

<html标签 参数 = "表达式"></html标签>

注意两项：

第一：在编译的时候 v-bind 后面的"参数名"会被编译为 html 标签的"属性名"

第二：表达式会关联 data ,当 data 发生改变之后，表达式的执行结果就会发生变化。

所以，连带的就会产生动态效果。

1. v-bind 因为很常用，所以 vue 框架对该指令提供了一种简写方式：

只是针对v-bind提供了以下简写方式：

<html标签 :参数 = "表达式"></html标签>

5.什么时候使用插值语法？什么时候使用指令？

凡是标签体当中的内容要想动态，需要使用插值语法。

只要想让html标签的属性动态，需要使用指令语法。

注意：原则上v-bind指令后面的这个参数名可以随便写。但大部分情况下，这个参数名还是需要写成该html标签支持的属性名。这样才会有意义。

v-bind 的使用

首先我在 data 配置项里面指定了两张图片的路径（图片是我自己弄的，和 js 目录并列）

接着使用 v-bind 进行编译，第一第二张图片是一致的，第三张图片是用来验证 v-bind 的简化语法

效果如下：

该文章为笔记，教程为动力节点的老杜Vue视频教程，Vue2 Vue3实战精讲
视频链接：https://www.bilibili.com/video/BV17h41137i4?p=1&vd_source=2136c732ce8d5a3f412e2f7064285cb7