在第二课中，我们将讨论关于属性绑定，关于将Vue实例中存储的数据连接到HTML元素的属性。 → 第一课
本课目的
在这里，我们将研究如何显示图像并使用属性绑定设置属性文本
alt。我们将从Vue实例中获取相关数据。
初始码
让我们从位于文件
index.html中的标记中的<body>以下HTML代码开始：
<div id="app">
<div class="product">
<div class="product-image">
<img src="" />
</div>
<div class="product-info">
<h1>{{ product }}</h1>
</div>
</div>
</div>
注意
<div>类的标签product-image。它包含<img>我们要动态绑定显示图像所需的数据的元素。具有类
的元素用于显示产品名称。 这是文件中包含的JavaScript ：
<div>product-info
main.js
var app = new Vue({
el: '#app',
data: {
product: "Socks",
image: "./assets/vmSocks-green.jpg"
}
})
请注意，该对象
data现在具有image包含图像路径的新属性。
→ 可在此处找到本教程中使用的 CSS。
要将样式连接到
index.html，请在标记中添加<head>以下内容：
<link rel="stylesheet" type="text/css" href="style.css"
在这里，我们假设样式文件有一个名称，
style.css并与存放在相同的文件夹中index.html。
这是我们将在页面上显示的图像。
一个任务
我们需要在页面上显示图像。这样做时，我们想动态地操纵该图像。也就是说，我们需要能够更改存储在Vue实例中的图像的路径，并立即在页面上看到这些更改的结果。由于是
src元素属性<img>负责元素将显示的图像，因此我们需要将一些数据绑定到该属性。这将使我们能够基于Vue实例中存储的数据动态更改图像。
一个重要术语：数据绑定
当我们谈论Vue中的数据绑定时，关键是要在模板中使用或显示数据的位置直接“连接”或“链接”到数据源，即实例中存储的对应对象。 Vue。
换句话说，数据源实体与使用该数据的实体以及数据宿相关联。在我们的例子中，数据源是Vue实例，接收器是
srcelement 的属性<img>。
问题的解决
要将属性值
image从数据对象绑定到src标签属性<img>，我们将使用Vue指令v-bind。让我们<img>从文件中重写标记代码index.html：
<img v-bind:src="image" />
当Vue在处理页面时看到这样的构造时，框架将其替换为以下HTML代码：
<img src="./assets/vmSocks-green.jpg" />
如果一切都正确完成，则图像将显示在页面上。
绿色袜子的图像显示在页面上
，如果更改
imageobject属性的值data，则属性值将相应地更改src，这将导致在页面上显示新图像。
假设我们要用蓝色的袜子代替绿色的袜子。为此，假设具有新图像的文件的路径看起来像
./assets/vmSocks-blue.jpg（可以在此处找到图像文件），image将对象中的属性描述代码转换data为这种形式就足够了：
image: "./assets/vmSocks-blue.jpg"
这将导致蓝色袜子的图像出现在页面上。
蓝色袜子的图像显示在页面上
v-bind的其他用例
该指令
v-bind不仅可以与attribute一起使用src。它还可以帮助我们动态调整图像属性alt。
让我们使用options向对象添加一个
data新属性altText：
altText: "A pair of socks"
让我们将相应的数据绑定到属性
alt，将元素代码转换<img>为以下形式：
<img v-bind:src="image" v-bind:alt="altText" />
在这里，与属性一样
src，使用由v-bind冒号和属性名称（alt）组成的构造。
现在，如果Vue实例的属性更改为
image或altText，则<img>更新的数据将出现在相应的element属性中。这不会破坏元素属性和Vue实例中存储的数据之间的链接。
开发Vue应用程序时会经常使用此技术。因此，存在施工记录的缩写形式
v-bind:。看起来像:。如果在编写标签代码时使用此技术<img>，则会得到以下信息：
<img :src="image" />
简单方便。此技术提高了代码的清洁度。
作坊
将
<a>带有文本的链接（元素）添加到页面More products like this。在对象中，data创建一个link包含link 的属性https://www.amazon.com/s/ref=nb_sb_noss?url=search-alias%3Daps&field-keywords=socks。使用指令v-bind将属性绑定link到hrefelement 的属性<a>。
→ 这是可用来解决此问题的模板。
→ 这是解决问题的方法。
结果
这是我们今天学到的：
- Vue实例中存储的数据可以绑定到HTML属性。
- 该指令用于将数据绑定到属性
v-bind。该指令的简写形式是冒号（:）。 - 冒号后面的属性名称表示数据绑定到的属性。
- 作为使用引号指定的属性的值，将使用键的名称，通过该键，您可以找到连接到该属性的数据。
如果您正在学习本课程，我们请您告诉我们您在什么环境下做作业。
→ 第1部分：实例化Vue
→ 第2 部分：Vue中的属性绑定
