vue学习笔记（五）——指令

 

13条指令

1. v-text　　（数据绑定语法-插值）

<span v-text="msg"></span>
<!-- 和下面的一样 -->
<span>{{msg}}</span>

2.v-html　　（数据绑定语法-插值，普通HTML,注意安全）

<div v-html="html"></div>

3.v-show　　（条件渲染，触发过渡效果）

<h1 v-show="ok">Hello!</h1>

4.v-if　　（条件渲染）

5.v-else　　（条件渲染）　　

<div v-if="Math.random() > 0.5">
  Now you see me
</div>
<div v-else>
  Now you don't
</div>

6.v-else-if　　（条件渲染）

<div v-if="type === 'A'">
  A
</div>
<div v-else-if="type === 'B'">
  B
</div>
<div v-else-if="type === 'C'">
  C
</div>
<div v-else>
  Not A/B/C
</div>

7.v-for　　（列表渲染）

<div v-for="item in items">
  {{ item.text }}
</div>

//也可以为数组索引指定别名（或者用于对象的键）：
<div v-for="(item, index) in items"></div>
<div v-for="(val, key) in object"></div>
<div v-for="(val, key, index) in object"></div>

//迫使其重新排序的元素,您需要提供一个 key 的特殊属性:
<div v-for="item in items" :key="item.id">
  {{ item.text }}
</div>

8.v-on　　（绑定事件监听器）

<!-- 方法处理器 -->
<button v-on:click="doThis"></button>
<!-- 内联语句 -->
<button v-on:click="doThat('hello', $event)"></button>
<!-- 缩写 -->
<button @click="doThis"></button>
<!-- 停止冒泡 -->
<button @click.stop="doThis"></button>
<!-- 阻止默认行为 -->
<button @click.prevent="doThis"></button>
<!-- 阻止默认行为，没有表达式 -->
<form @submit.prevent></form>
<!--  串联修饰符 -->
<button @click.stop.prevent="doThis"></button>
<!-- 键修饰符，键别名 -->
<input @keyup.enter="onEnter">
<!-- 键修饰符，键代码 -->
<input @keyup.13="onEnter">

<!--在子组件上监听自定义事件（当子组件触发 “my-event” 时将调用事件处理器）-->
<my-component @my-event="handleThis"></my-component>
<!-- 内联语句 -->
<my-component @my-event="handleThis(123, $event)"></my-component>
<!-- 组件中的原生事件 -->
<my-component @click.native="onClick"></my-component>

9.v-bind　　（动态绑定,class,style,props）　

<!-- 绑定一个属性 -->
<img v-bind:src="imageSrc">
<!-- 缩写 -->
<img :src="imageSrc">
<!-- with inline string concatenation -->
<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>
<!-- XLink -->
<svg><a :xlink:special="foo"></a></svg>

10.v-model　　（表单控件绑定, input, select, textarea, lazy, number, trim）

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

11.v-pre　　（跳过编译过程）　

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

12.v-cloak　　（这个指令保持在元素上直到关联实例结束编译。）

[v-cloak] {
  display: none;
}

<div v-cloak>
  {{ message }}
</div>

13.v-once　　（数据绑定-插值，用于优化更新性能）　　  

<!-- 单个元素 -->
<span v-once>This will never change: {{msg}}</span>
<!-- 有子元素 -->
<div v-once>
  <h1>comment</h1>
  <p>{{msg}}</p>
</div>
<!-- 组件 -->
<my-component v-once :comment="msg"></my-component>
<!-- v-for 指令-->
<ul>
  <li v-for="i in list" v-once>{{i}}</li>
</ul>