v-bind介绍
之前学习Mustache表达式 一般用在标签体中，然而有有些标签的内容是响应式的，就无法用Mustache来解析，例如：
ima 和 a标签：
<script src="js/vue.js"></script> <div id="app"> <a href="{{baidu}}">百度一下</a> <img src="{{imgUrl}}"> </div> <script> 此代码是错误代码××× const app = new Vue({ el:"#app", data:{ baidu:"https://www.baidu.com/", imgUrl:"https://www.baidu.com/img/pc_a91909218349e60ed8f6f6f226c30e5f.gif" } }) </script>
所以这个代码是完全错误的 在标签属性中是解析不了的 若我们想让他可以实现解析【绑定】，也让标签属性实现动态化：
那么就用v-bind指令：
作用：动态绑定属性
缩写：:
预期：any (with argument) | Object (without argument)
参数：attrOrProp (optional)
即：
<!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> </head> <body> <script src="js/vue.js"></script> <div id="app"> <!-- v-bind: --> <a v-bind:href="baidu">百度一下</a> <img v-bind:src="imgUrl"> </div> <script> const app = new Vue({ el:"#app", data:{ baidu:"https://www.baidu.com/", imgUrl:"https://www.baidu.com/img/pc_a91909218349e60ed8f6f6f226c30e5f.gif" } }) </script> </body> </html>
所以就成功了，还有简写 “：” 简称：v-bind语法糖
例如:
<div id="app"> <!-- v-bind: 简写就是 : 冒号即可 --> <a :href="baidu">百度一下</a> <img :src="imgUrl"> </div> <script> const app = new Vue({ el:"#app", data:{ baidu:"https://www.baidu.com/", imgUrl:"https://www.baidu.com/img/pc_a91909218349e60ed8f6f6f226c30e5f.gif" } }) </script>
总结：
很方便的一个绑定 但是呢 注意 后面跟的数据不是 {{}} ，而是Vue的data中的键.
这玩意不支持驼峰写法命名，如果要的话 ，使用的时候记得在驼峰处加上 - 。