Vue v-bind命令 单向加载组件数据到html中

梗概:

将应用中的某个变量单向同步给该html中的某一个属性

1. 特化于class和style的bind命令:

child::Vue 绑定class与style属性

实例:

1. 实例之一:

<!-- 将imageSrc变量的值单向同步给 “src”属性 -->
<img v-bind:src="imageSrc" />
 
<!-- 动态 attribute 名 -->
<button v-bind:[key]="value"></button>
 
<!-- 缩写 -->
<img :src="imageSrc" />
 
<!-- 动态 attribute 名缩写 -->
<button :[key]="value"></button>
 
<!-- 内联字符串拼接 -->
<img :src="'/path/to/images/' + fileName" />
 
<!-- class 绑定 -->
<div :class="{ red: isRed }"></div>
<div :class="[classA, classB]"></div>
<div :class="[classA, { classB: isB, classC: isC }]"></div>
 
<!-- style 绑定 -->
<div :style="{ fontSize: size + 'px' }"></div>
<div :style="[styleObjectA, styleObjectB]"></div>
 
<!-- 绑定一个全是 attribute 的对象 -->
<!-- 键名为属性名, 键值为属性值 -->
<div v-bind="{ id: someProp, 'other-attr': otherProp }"></div>
 
<!-- prop 绑定。"prop" 必须在 my-component 声明 -->
<my-component :prop="someThing"></my-component>
 
<!-- 将父组件的 props 一起传给子组件 -->
<child-component v-bind="$props"></child-component>
 
<!-- XLink -->
<svg><a :xlink:special="foo"></a></svg>

1.1. 说明:

1. child::props