Vue 常用指令 v-bind 绑定动态值

v-bind

用于动态绑定一个或多个属性值，或者向另一个组件传递props值(这个后面再介绍)，应用场景:图片地址src、超链接href、动态绑定一些类、样式等等

绑定超链接

v-bind作用在属性上面绑定动态值。

v-bind 指令后接收一个参数，以冒号分割。v-bind 指令将该元素的 href 属性与表达式 url 的值绑定。使用v-bind就可以在属性里面传递变量了，其实也就是vue渲染为HTML。

使用v-bind是因为html标签里面有很多的属性值不是写死的，它也是一个动态的值，是一个变量。

使用了v-bind之后，引号里面的就不再是字符串了，而是引用的变量了。

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>首页</title>
    <link href="" type="text/css" rel="stylesheet"/>
    <script src="https://unpkg.com/vue@3"></script>
    <style type="text/css">

    </style>
</head>

<body>    
    <div id="hello-vue">
      <!--href取到url变量的值-->
      <a v-bind:href="url">百度</a>
    </div>
         
    <script type="text/javascript">
      const HelloVueApp = {
        data(){
            return{
                url: "http://www.baidu.com"
            }
        }
      }
      Vue.createApp(HelloVueApp).mount("#hello-vue")
    </script>

</body>

</html>

绑定Class 相比下面style更加实用

操作元素(标签)的 class 和 style 属性是数据绑定的一个常见需求。例如希望动态切换class，为div显示不同背景颜色，可以动态的去绑定class。

当isActive为true的时候则class=active生效

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>首页</title>
    <link href="" type="text/css" rel="stylesheet"/>
    <script src="https://unpkg.com/vue@3"></script>
    <style type="text/css">
        .test {
                width: 200px;
                height: 200px;
                background: grey;
            }

        .active {
                background: orange;
            }
    </style>
</head>

<body>    
    <div id="hello-vue">
       <div v-bind:class="{active: isActive}" class="test"></div>
       <button type="button" v-on:click="btn()">增加样式</button>
    </div>
         
    <script type="text/javascript">
      const HelloVueApp = {
        data(){
            return{
                isActive: false
            }
        },
        methods:{
            btn(){
                if(this.isActive){
                    this.isActive = false
                }else{
                    this.isActive = true
                }
            }
        }
      }
      Vue.createApp(HelloVueApp).mount("#hello-vue")
    </script>

</body>

</html>

data里面定义的属性可以在整个view实例里面去使用，这个是要用this的。

绑定Style

v-bind:style 的对象语法看着非常像 CSS，但其实是一个 JavaScript 对象。
可以使用v-bind在style样式中传递样式变量。
使用时需要将css样式名中带”-“的转成驼峰命名法，如font-size，转为fontSize

v-bind作用在style上，css属性的key要由font-size变为fontSize

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>首页</title>
    <link href="" type="text/css" rel="stylesheet"/>
    <script src="https://unpkg.com/vue@3"></script>
    <style type="text/css">

    </style>
</head>

<body>    
    <div id="hello-vue">
       <div v-bind:style="{background:bground,fontSize:fSize + 'px'}">
           hello-vue
       </div>
    </div>
         
    <script type="text/javascript">
      const HelloVueApp = {
        data(){
            return{
                fSize: '24',
                bground: 'orange'
            }
        }
      }
      Vue.createApp(HelloVueApp).mount("#hello-vue")
    </script>

</body>

</html>

指令缩写

v- 前缀作为一种视觉提示，用来识别模板中 Vue 特定的属性。但对于一些频繁用到的指令来说，就会感到使用繁琐。
因此，Vue 为 v-bind 和 v-on 这两个最常用的指令，提供了特定简写:

v-bind缩写 :

<!-- 完整语法 -->
<a v-bind:href="url"> ... </a>

<!-- 缩写 -->
<a :href="url"> ... </a>

<!-- 动态参数的缩写 -->
<a :[key]="url"> ... </a>

v-on缩写 @

<!-- 完整语法 -->
<a v-on:click="doSomething"> ... </a>
<!-- 缩写 -->
<a @click="doSomething"> ... </a>
<!-- 动态参数的缩写 -->
<a @[event]="doSomething"> ... </a>