vuejs 指令之 v-bind

v-bind

给元素属性设置值，比如我们可以给 img 的 src 属性设置地址，也可以给 class 属性设置多个，我们一起来看下面的例子

<div id="box">
    <!--v-bind: 代表给 src属性进行值的设定-->
    <img v-bind:src="baidulog" alt="">
    <!--也可以简写-->
    <img :src="baidulog" alt="">
    <!--还可以添加css属性-->
    <p :class="class1"></p>
</div>
<script>
    var vm = new Vue({
        el: "#box",
        data: {
            baidulog: "https://www.baidu.com/img/bd_logo1.png?where=super",
            class1: "a"
        }
    })
</script>

添加class属性

从上面的例子我们知道 v-bind 可以添加 class 属性，那么他有那些特性呢？

1：可以同时添加多个 class 属性，但是要把他们放在数组里面
2：后面添加的 class 名会和前面的进行叠加，而不是覆盖
3：可以简写 ： ：class=“ ”，：src=” “

补充：

	 alt + 1 左侧的菜单快速的折叠
     lorem tab 键 快速的生成文本
     lorem数字 tab 键 快速的指定长度的文本

<div id="box">
    <!--如果要添加多个 class 时，可以用数组加入-->
    <!--并且，后面添加的class名会与前面的 class 进行叠加-->
    <div class="div1" v-bind:class="[ class1, class2 ]"></div>
    <!--简写-->
    <div class="div1" :class="[ class1, class2 ]"></div>
</div>
<script>
    var vm = new Vue({
        el: "#box",
        data: {
            class1: 'c1',
            class2: 'c2',
        }
    })
</script>

img 属性

	img 的src属性存在两种值：
	 1. 绝对路径 http 或者 https 开头 
			如<img src="https://ss0.baidu.com/6ONWsjip0QIZ8tyhnq/it/u=3577843278,2910635202&fm=179&app=42&f=JPEG?w=121&h=140" alt="">
			这个就是直接以绝对路径引进来的
 	 2. 相对路径，不包含 http 或者 https协议，当前的url地址+相对路径拼成一个完整的url地址发送网络请求
 		    <img src="./1.img" alt="">
 		    这个就是以相对路径引进来的，而他的实际地址为：当前的url地址 + ./1.img

<div id="box">    
    <img v-bind:src="logo" alt="">
    <!--也可以简写-->
    <img :src="logo" alt="">
    //这是我们在 html 里的常规引入图片
    <img src="https://ss0.baidu.com/6ONWsjip0QIZ8tyhnq/it/u=3577843278,2910635202&fm=179&app=42&f=JPEG?w=121&h=140" alt="">
    //下面这种写法是不正确的，他在解析的时候，会把{{ }} 一起当做地址的一部分
   // <img v-bind:src="{{ message }}" alt="" />
</div>
<script>
    var vm = new Vue({
        el: "#box",
        data: {
            logo: 'https://ss0.baidu.com/6ONWsjip0QIZ8tyhnq/it/u=3577843278,2910635202&fm=179&app=42&f=JPEG?w=121&h=140'
        }
    })
</script>

style

引入 style 和引入 class 的原理差不多，但有些不同要注意到
1：也可以像 class 一样使用数组把多个放在一起，但这里要注意的是，这些样式就不能像上面一样用字符串了，而要用对象的形式（在下面的例子里我们可以很直观的看到）
2：也可以直接写在标签，因为 指令 给我们创建了一个 js 语境，js 代码在这里是可以被解析的。（属性可以加引号，也可以不加，但是如果不加的话，属性要用小驼峰命名）

<div id="box">
   <!-- v-bind 既然可以设置 class ，也可以设置style-->
    <p :style="style1">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Amet aperiam, atque blanditiis deleniti deserunt dignissimos enim eum facilis, fugit laborum mollitia odio quo reiciendis sed suscipit vel vitae voluptate! Error.</p>
    <!--如果要设置多个样式，我们也可以像 class 一样使用数组把多个放在一起，但这里要注意的是，这些样式就不能像上面一样用字符串了，而要用对象的形式-->
    <p :style="[ style2, style3 ]">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ab at atque aut culpa enim hic illum nesciunt quasi qui quidem, quod sit, suscipit ut? Accusantium aspernatur ipsam maiores ratione tempore?</p>
    <!--也可以直接写在标签里-->
    <!--属性可以加引号，也可以不加，但是如果不加的话，属性要用小驼峰命名-->
    <p :style="{ color: 'red', 'font-size': '20px', lineHeight: '50px' }">
        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Atque deleniti dolore doloremque ducimus eaque enim fugit labore, molestias officia optio quidem, quod repellendus repudiandae, sapiente similique sit soluta voluptates voluptatum.
    </p>
</div>
<script>
    var vm = new Vue({
        el: "#box",
        data: {
            style1: 'font-size: 20px; color: red',
            style2: { 'font-size': '30px', 'line-height': '35px' },
            style3: { 'color': 'blue' },
        }
    })
</script>