vue 常用的指令

发表于 | 分类于

vue中的指令

  • 解释：指令 (Directives) 是带有 v- 前缀的特殊属性
  • 作用：当表达式的值改变时，将其产生的连带影响，响应式地作用于 DOM

v-text

  • 解释：更新DOM对象的 textContent
1
<h1 v-text="msg"></h1>

v-html

  • 解释：更新DOM对象的 innerHTML
1
<h1 v-html="msg"></h1>

v-bind

  • 作用：当表达式的值改变时，将其产生的连带影响，响应式地作用于 DOM
  • 语法：v-bind:title="msg"
  • 简写：:title="msg"
1
2
3
4
<!-- 完整语法 -->
<a v-bind:href="url"></a>
<!-- 缩写 -->
<a :href="url"></a>

v-on

  • 作用：绑定事件
  • 语法：v-on:click="say" or v-on:click="say('参数', $event)"
  • 简写：@click="say"
  • 说明：绑定的事件从methods中获取
  • 案例：跑马灯
1
2
3
4
<!-- 完整语法 -->
<a v-on:click="doSomething"></a>
<!-- 缩写 -->
<a @click="doSomething"></a>

事件修饰符

  • .stop 阻止冒泡，调用 event.stopPropagation()
  • .prevent 阻止默认行为，调用 event.preventDefault()
  • .capture 添加事件侦听器时使用事件捕获模式
  • .self 只当事件在该元素本身（比如不是子元素）触发时，才会触发事件
  • .once 事件只触发一次

v-for

  • 作用：基于源数据多次渲染元素或模板块
1
2
3
4
5
6
7
8
9
10
<!-- 1 基础用法 -->
<div v-for="item in items">
  {{ item.text }}
</div>

<!-- item 为当前项，index 为索引 -->
<p v-for="(item, index) in list">{{item}} -- {{index}}</p>
<!-- item 为值，key 为键，index 为索引 -->
<p v-for="(item, key, index) in obj">{{item}} -- {{key}}</p>
<p v-for="item in 10">{{item}}</p>

key属性

  • 推荐：使用 v-for 的时候提供 key 属性，以获得性能提升。
  • 说明：使用 key，VUE会基于 key 的变化重新排列元素顺序，并且会移除 key 不存在的元素。
  • vue key
  • vue key属性的说明
1
2
3
<div v-for="item in items" :key="item.id">
  <!-- 内容 -->
</div>

样式处理 -class和style

  • 使用方式：v-bind:class="expression" or :class="expression"
  • 表达式的类型：字符串、数组、对象（重点）
  • 语法：
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
<!-- 1 -->
<!-- 重点 -->
<div v-bind:class="{ active: true }"></div> ===>
<div class="active"></div>

<!-- 2 -->
<div :class="['active', 'text-danger']"></div> ===>
<div class="active text-danger"></div>

<!-- 3 -->
<div v-bind:class="[{ active: true }, errorClass]"></div> ===>
<div class="active text-danger"></div>


--- style ---
<!-- 1 -->
<div v-bind:style="{ color: activeColor, 'font-size': fontSize + 'px' }"></div>
<!-- 2 将多个 样式对象 应用到一个元素上-->
<!-- baseStyles 和 overridingStyles 都是对象 -->
<div v-bind:style="[baseStyles, overridingStyles]"></div>

v-if 和 v-show

  • 条件渲染
  • v-if：根据表达式的值的真假条件，销毁或重建元素
  • v-show：根据表达式之真假值，切换元素的 display CSS 属性
1
2
<p v-show="isShow">这个元素展示出来了吗？？？</p>
<p v-if="isShow">这个元素，在HTML结构中吗？？？</p>

提升性能：v-pre

  • 说明：跳过这个元素和它的子元素的编译过程。可以用来显示原始 Mustache 标签。跳过大量没有指令的节点会加快编译。
1
<span v-pre>{{ this will not be compiled }}</span>

提升性能：v-once

  • 说明：只渲染元素和组件一次。随后的重新渲染，元素/组件及其所有的子节点将被视为静态内容并跳过。这可以用于优化更新性能。
1
<span v-once>This will never change: {{msg}}</span>