VUE课程---8、属性绑定v-bind

一、总结

一句话总结：

v-bind是vue中绑定属性的指令，可以将标签里面的属性绑定vue里面的数据，v-bind: 指令可以被简写为 :要绑定的属性

<div id="app">
    <p v-bind:title="myTitle">{{msg}}</p>
    <!--v-bind指令可以简写为:（冒号）-->
    <p :title="myTitle+'aaaaa'">{{msg}}</p>

    <a :href="myHref">让学过的东西不再忘记</a>
</div>
<script src="../js/vue.js"></script>
<script>
    new Vue({
        el:'#app', //element
        data:{
            msg:'欢迎来到vue的世界',
            myTitle:'这是p标签的title属性',
            myHref:'https://fanrenyi.com'
        }
    });
</script>

1、属性绑定指令 v-bind: 的简写形式是什么？

v-bind: 指令可以被简写为 :要绑定的属性

<div id="app">
    <p v-bind:title="myTitle">{{msg}}</p>
    <!--v-bind指令可以简写为:（冒号）-->
    <p :title="myTitle+'aaaaa'">{{msg}}</p>

    <a :href="myHref">让学过的东西不再忘记</a>
</div>
<script src="../js/vue.js"></script>
<script>
    new Vue({
        el:'#app', //element
        data:{
            msg:'欢迎来到vue的世界',
            myTitle:'这是p标签的title属性',
            myHref:'https://fanrenyi.com'
        }
    });
</script>

二、属性绑定v-bind

博客对应课程的视频位置：

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>属性绑定v-bind</title>
 6 </head>
 7 <body>
 8 <!--
 9 
10 属性绑定指令v-bind
11 可以用标签里面的属性绑定vue里面的数据
12 
13 v-bind指令可以简写为:（冒号）
14 
15 -->
16 <div id="app">
17     <p v-bind:title="myTitle">{{msg}}</p>
18     <!--v-bind指令可以简写为:（冒号）-->
19     <p :title="myTitle+'aaaaa'">{{msg}}</p>
20 
21     <a :href="myHref">让学过的东西不再忘记</a>
22 </div>
23 <script src="../js/vue.js"></script>
24 <script>
25     new Vue({
26         el:'#app', //element
27         data:{
28             msg:'欢迎来到vue的世界',
29             myTitle:'这是p标签的title属性',
30             myHref:'https://fanrenyi.com'
31         }
32     });
33 </script>
34 </body>
35 </html>