vue从零开始（三）指令

v-bind的使用

<!-- 绑定一个属性 -->
<img v-bind:src="imageSrc">

<!-- 动态特性名 (2.6.0+) -->
<button v-bind:[key]="value"></button>

<!-- 缩写 -->
<img :src="imageSrc">

<!-- 动态特性名缩写 (2.6.0+) -->
<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 }]">

<!-- style 绑定 -->
<div :style="{ fontSize: size + 'px' }"></div>
<div :style="[styleObjectA, styleObjectB]"></div>

<!-- 绑定一个有属性的对象 -->
<div v-bind="{ id: someProp, 'other-attr': otherProp }"></div>

<!-- 通过 prop 修饰符绑定 DOM 属性 -->
<div v-bind:text-content.prop="text"></div>

<!-- prop 绑定。“prop”必须在 my-component 中声明。-->
<my-component :prop="someThing"></my-component>

<!-- 通过 $props 将父组件的 props 一起传给子组件 -->
<child-component v-bind="$props"></child-component>

<!-- XLink -->
<svg><a :xlink:special="foo"></a></svg>

其中v-bind绑定class或者style的时候可以使用数组或者对象的形式

v-model进行双向绑定

 

<input v-model="message" placeholder="edit me">
<p>Message is: {{ message }}</p>

 

在输入框中输入内容的时候页面中显示的内容也跟着变化，数据改变是输入框的内容也跟着变化

 

v-model实现原理

<my-checkbox v-model="foo"></my-checkbox>
 
Vue.component('my-checkbox', {
  template: `<input 
        type="checkbox"
        @change="$emit('balabala', $event.target.checked)"
        :checked="checked"
       />`,
 props: ['checked'],
 model: {
  prop: 'checked',
  event: 'balabala'
 },
})

在v-bind的基础上进行事件绑定来监听输入框或者选框的变化

v-pre

跳过这个元素和它的子元素的编译过程。可以用来显示原始 Mustache 标签。跳过大量没有指令的节点会加快编译。

<span v-pre>{{ this will not be compiled }}</span>

v-cloak

这个指令保持在元素上直到关联实例结束编译。和 CSS 规则如 [v-cloak] { display: none }一起用时，这个指令可以隐藏未编译的 Mustache 标签直到实例准备完毕

[v-cloak] {
  display: none;
}
<div v-cloak>
  {{ message }}
</div>