Vue学习—深入剖析v-bind指令

一、v-bind指令

1.动态绑定特性

1.绑定一个属性

<div id="app">
    <div v-bind:set='type'></div>//type为我们设置的参数attr
</div>
<script>
    const vm = new Vue({
        el: '#app',
        data: {
            type: 'attr'
        }
    })
</script>

2.动态特性名 (2.6.0+)

<div id="app">
    <div v-bind:[set]='type'></div>//特性名和特性值都通过参数设置
</div>
<script>
    const vm = new Vue({
        el: '#app',
        data: {
            set: 'attrName',
            type: 'attr'
        }
    })
</script>

3.v-bind缩写

如果某些情况下需要绑定多个特性，会导致代码冗余

<div id="app">
    <div v-bind:[set]='type' v-bind:[make]='spec'></div>
</div>

于是：

<div id="app">
    <div v-bind:[set]='type' :makeName='spec'></div>
</div>
<script>
    const vm = new Vue({
        el: '#app',
        data: {
            set: 'attrName',
            type: 'attr',
            spec: 'special'
        }
    })
</script>

4.内联字符串拼接

<div id="app">
    <img :src="'/path/to/images/' + fileName">
</div>
<script>
    const vm = new Vue({
        el: '#app',
        data: {
            fileName: '1.png'
        }
    })
</script>

5.无参数

没有参数时，可以绑定到一个包含键值对的对象。注意此时 class 和 style 绑定不支持数组和对象。

<div id="app">
    <img v-bind="{name: 'jimo',age: '18'}">
</div>

2.绑定class

1.对象语法

<div id="app">
    <div v-bind:class="{ red: isRed }"></div>//判断isRed的值
</div>
<script>
    const vm = new Vue({
        el: '#app',
        data: {
            isRed: true
        }
    })
</script>

2.数组语法

• 我们可以把一个数组传给 v-bind:class，以应用一个 class 列表

<div id="app">
	<div v-bind:class="['classA', 'classB']"></div>
    <div v-bind:class="[classA, classB]"></div>
</div>
<script>
    const vm = new Vue({
        el: '#app',
        data: {
            classA: 'red',
            classB: 'green'
        }
    })
</script>

• 在数组语法总可以使用三元表达式来切换class

<div id="app">
    <div v-bind:class="[isActive ? activeClass : '', errorClass]"></div>
</div>
<script>
    const vm = new Vue({
        el: '#app',
        data: {
            isActive: true,
            activeClass: 'red',
            errorClass: 'green'
        }
    })
</script>

• 在数组语法中可以使用对象语法(可以与普通 class 共存)

<div id="app">
    <div v-bind:class="[classA, { classB: isB, classC: isC }]"></div>
    <div v-bind:class="classA" class="red"></div>
</div>
<script>
    const vm = new Vue({
        el: '#app',
        data: {
            classA: 'pick',
            classB: 'red',
            classC: 'green',
            isB: !false,
            isC: ''
        }
    })
</script>

3.绑定style

1.使用对象语法

看着比较像CSS，但其实是一个JavaScript对象
CSS属性名可以用驼峰式(camelCase)或者短横线分隔(kebab-case)来命名
但是使用短横线分隔时，要用引号括起来

<div id="app">
    <div v-bind:style="{ fontSize: size + 'px' }">字体</div>
</div>
<script>
    const vm = new Vue({
        el: '#app',
        data: {
            size: 19
        }
    })
</script>

• 也可以直接绑定一个样式对象，这样模板会更清晰

<div id="app">
    <div v-bind:style="styleObj">字体</div>
</div>
<script>
    const vm = new Vue({
        el: '#app',
        data: {
            styleObj: {
                color: 'red',
                fontSize: '18px'
            }
        }
    })
</script>

2.使用数组语法

数组语法可以将多个样式对象应用到同一个元素

<div id="app">
    <div v-bind:style="[styleObjA,styleObjB]">字体</div>
</div>
<script>
    const vm = new Vue({
        el: '#app',
        data: {
            styleObjA: {
                color: 'red',
                fontSize: '18px'
            },
            styleObjB: {
                border: '1px solid red'
            }
        }
    })
</script>

• 自动添加前缀
  绑定style时，使用需要添加浏览器引擎前缀的CSS属性时，如 transform，Vue.js会自动侦测并添加相应的前缀。

• 多重值
  从 2.3.0 起你可以为 style 绑定中的属性提供一个包含多个值的数组，常用于提供多个带前缀的值
  例：

<div id="app">
    <div :style="{display:['-webkit-box','-ms-flexbox','flex']}"></div>
</div>

这样写只会渲染数组中最后一个被浏览器支持的值。在本例中，如果浏览器支持不带浏览器前缀的 flexbox，那么就只会渲染 display: flex。

4.修饰符

修饰符 (modifier) 是以英文句号 . 指明的特殊后缀，用于指出一个指令应该以特殊方式绑定。

1…camel

<div id="app">
    <svg :viewBox='viewBox'></svg>
</div>
<script>
    const vm = new Vue({
        el: '#app',
        data: {
            viewBox: '0 0 100 100'
        }
    })
</script>

<div id="app">
    <svg :view-box.camel='viewBox'></svg>
</div>

2…prop

被用于绑定 DOM 属性 (property)

const demo = document.getElementById('app');
for(let key in demo){
    console.log(key);//这些就是属性
}

<div v-bind:text-content.prop="text"></div>

3…sync

讲解组件时再说