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中的键.

这玩意不支持驼峰写法命名，如果要的话 ，使用的时候记得在驼峰处加上 - 。


作者：​​咸瑜​​​