《跟热饭一起学习vue吧》Part.3 属性绑定

属性绑定

什么叫属性绑定？我们分开来解读

属性：一个元素标签内，可以写很多东西，比如id,name,style,click等等。但是这些并不都叫属性，比如onclick就不算属性。而id,name就是属性。

那么绑定是什么意思呢？就是这些属性的值，是可以在vue构造器中的变量绑定起来，绑定起来有什么用呢？就可以控制了啊，通过更改vue构造器的data里面的变量的值，就可以自动让元素内的属性内容跟着变！

那么这个绑定要怎么写呢？vue的一系列属性，一旦绑定上，那么有一些写法都会和原生的产生变化。

我们本节课学的就是一个class属性绑定变化。众所周知，class是用来决定这个元素采用什么样式的。接下来我们要学的这个例子比较复杂，但是其实说白了，就是告诉你，我可以通过控制，来让这个元素一会用 某个样式，一会不用，来回换。

这里我们先不用关心，vue里面data里的use变量的值是怎么变的，我们只学习它变了之后，我们div标签的class属性是否也跟着一起变即可。

这里我们注意红线部分，可以发现

1.在元素中的 ，你想要绑定的属性名之前加上 v-bind: 即可实现绑定.

2.class的内容是一个字典字符串，其中的不同样式名字就当做key，启用不启用就看值是true还是false，不过这里我们因为想控制，所以把这个值用 变量use来顶替。

3.变量在元素标签外，是用{{ }}来包裹的，但是在元素标签的属性内容里，在最外层一个大引号内，就直接写出来就行。我认为，vue底层这是把这段字符串进行求值的操作："{'class1': use}" 内部的class1因为是key，所以要用区别于外层引号的 单引号来包裹。而use作为变量，则不能被任何包裹，否则写成'use' 那么就会被当做字符串解读，就不会找到vue构造器中data里的那个use变量了。

4.其他的属性，诸如href等，估计也都是前面加v-bind: 来表示绑定起来了。

然后我们试着点了一下这个修改颜色，实现use变量从false变成true。结果发现这个div真的会自动启用上面的全局样式.class1，变成黑底白字：

大家暂时不用管这个use变量的值是如何变化的，这些我们之后会讲。本节课只要记住：【属性前面加v-bind: 属性里面写变量， 变量data里要有， data一变标签属性就变 】

即可。

好了本节课就到这里，怎么样，是不是感觉很简单？？？