Vue2中常用指令

Vue2中常用指令

1. v-text 动态渲染纯文本内容

1. 作用

v-text 指令用于动态地将纯文本内容插入到 DOM 中。它会替换元素的 textContent 属性。

2. 基本用法

<div v-text='textContent'></div>

3. 示例

new Vue({
  el: '#app',
  data: {
    textContent: 'This is dynamic text content.'
  }
});

4. 注意事项

• v-text 不会解析 HTML 标签，适合插入纯文本内容。
• 如果需要插入 HTML 内容，建议使用 v-html。

2. v-html 动态渲染 HTML 内容

1. 作用

v-html 指令用于动态地将 HTML 内容插入到 DOM 中。它会替换元素的 innerHTML 属性。

2. 基本用法

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

3. 示例

new Vue({
  el: '#app',
  data: {
    htmlContent: '<p style="color: red;">This is dynamic HTML content.</p>'
  }
});

4. 注意事项

• 使用 v-html 时要小心，避免插入恶意代码或导致 XSS 攻击。
• 如果需要插入纯文本，建议使用 v-text。

3. v-bind 动态绑定 HTML 属性

1. 作用

v-bind 指令用于动态地绑定一个或多个属性，或一个表达式或对象。当表达式的值变化时，绑定的属性也会自动更新。

2. 基本用法

<!-- 动态绑定一个属性 -->
<img v-bind:src="imageSrc" alt="Dynamic Image">
<!-- 简写 直接在属性前加： -->
<img :src="imageSrc" alt="Dynamic Image">
<!-- 动态绑定多个属性 -->
<img v-bind="{ src: imageSrc, alt: imageAlt }">

3. 示例

new Vue({
  el: '#app',
  data: {
    imageSrc: 'https://example.com/image.jpg',
    imageAlt: 'Vue Logo'
  }
});

4. 注意事项

• 当属性名包含中划线（kebab-case）时，绑定时需要用引号包裹，例如：v-bind:my-attribute=“value”。
• v-bind 可以与 CSS 类名绑定，例如：v-bind:class=“className”。

5. 绑定class属性的用法

• 数组的写法

// 直接传递一个数组, 数组里面的类名要写字符串, 注意:这里的class需要使用v-bind做数据绑定
<p :calss="['thin', 'italic']"></p>

• 数组中嵌套对象

// 数组中推荐使用这种方式
<p :class="['thin', 'italic',{'active':flag}]"></p> // 这里的flag在data中定义, 是一个布尔值

• 数组中使用三元表达式

// data中定义一个布尔值类型的flag,在数组中用三元表示来显示这个flag
<p :class="['thin', 'italic', flag ? 'active':'noactive']"></p>

• 直接使用对象

// 在为class使用v-bind绑定对象的时候,对象的属性是类型,
// 由于对象的属性可带可不带引号,写法自己决定, 属性的值是一个标识符
<p :class="{thin: true, italic: true, active: false}"></p>

6. 绑定style属性的用法

• 直接在标签上通过 :style 的形式书写

// 对象就是无序键值对的集合
使用方式：
<p :style="{color:'red', 'font-weight':200}"></p>

• 将样式定义在data中, 在:style绑定的标签中引用

// 先将样式定义在data中的一个变量身上
new app({
    el: "#app",
    data: {
        styleObject: {color:'red', 'font-weight':200}
    }
})
// 在标签上,通过属性绑定的形式,将样式对象应用到元素中
<p :style="styleObject"></p>

• 在 :style 中通过数组，引用多个 data 上的样式对象

// 先将样式定义在data中的一个变量身上
new app({
    el: "#app",
    data: {
        styleObject1: {color:'red', 'font-weight':200},
        styleObject2: {color:'red', 'font-weight':200}
    }
})
// 在标签上,通过属性绑定的形式,将样式对象应用到元素中
<p :style="[styleObject1, styleObject2]"></p>

7. 修饰符

(1) .lazy

• 作用: 将 v-model 的更新时机从 input 事件改为 change 事件，即只有在输入框失去焦点或按下回车键时才更新数据。
• 示例:

<input v-model.lazy="message">

• 适用场景: 适用于需要延迟更新数据的场景，例如表单提交

(2) .number

• 作用: 将输入的值自动转换为数字类型。
• 示例:

<input v-model.number="age" type="number">

• 适用场景: 适用于需要处理数字输入的场景

(3) .trim

• 作用: 自动去除输入值的首尾空格。
• 示例:

<input v-model.trim="message">

• 适用场景: 适用于需要清理用户输入的场景

4. v-model: 双向数据绑定

1. 作用

v-model 指令用于在表单输入和应用数据之间创建双向绑定。它会根据表单控件的类型自动选择合适的方式更新数据。

2. 基本用法

<!-- 文本输入 -->
<input v-model="message" placeholder="Enter your message">

<!-- 多行文本 -->
<textarea v-model="message"></textarea>

<!-- 单选按钮 -->
<input type="radio" v-model="selected" value="Option 1">
<input type="radio" v-model="selected" value="Option 2">

<!-- 复选框 -->
<input type="checkbox" v-model="checked">

3. 示例

new Vue({
  el: '#app',
  data: {
    message: '',
    selected: '',
    checked: false
  }
});

4. 注意事项

• v-model 默认会绑定到表单元素的 value 属性，但对于复选框和单选按钮，它会绑定到 checked 属性。
• 可以通过 .lazy 修饰符延迟更新，直到用户离开输入框时才更新数据。

5. v-for: 列表渲染

1. 作用

v-for 指令用于基于数组或对象渲染一个列表。它可以遍历数组、对象或数字，并为每个元素生成对应的 DOM 结构。

2. 基本用法

<!-- 渲染数组 -->
<ul>
  <li v-for="item in items" :key="item.id">
    {{ item.name }}
  </li>
</ul>

<!-- 渲染对象 -->
<div v-for="(value, key, index) in object" :key="key">
  {{ index }}. {{ key }}: {{ value }}
</div>

3. 示例

new Vue({
  el: '#app',
  data: {
    items: [
      { id: 1, name: 'Apple' },
      { id: 2, name: 'Banana' },
      { id: 3, name: 'Orange' }
    ],
    object: {
      name: 'Vue.js',
      version: '2.6.14',
      description: 'A progressive framework for building user interfaces.'
    }
  }
});

4. 注意事项

• 使用 v-for 时，建议始终提供唯一的 key 属性，以提高渲染性能并避免潜在的更新问题。
• 如果需要同时访问索引，可以使用 v-for=“(item, index) in items”。

6. v-if、v-else-if 和 v-else 条件渲染

1. 作用

v-if 指令用于根据表达式的真假条件来动态地渲染元素。v-else-if 和 v-else 则用于提供多个条件分支。

2. 基本用法

<div v-if="type === 'admin'">
  Welcome, Admin!
</div>
<div v-else-if="type === 'user'">
  Welcome, User!
</div>
<div v-else>
  Welcome, Guest!
</div>

3. 示例

new Vue({
  el: '#app',
  data: {
    type: 'user'
  }
});

4. 注意事项

• v-if 是真正的条件渲染，它会根据条件的真假动态地创建或销毁 DOM 元素。
• 如果需要频繁切换条件，建议使用 v-show，它只是通过 CSS 的 display 属性控制元素的显示和隐藏。

7. v-show 条件渲染

1. 作用

v-show 指令用于根据表达式的真假值来控制元素的显示或隐藏。它通过动态地切换 CSS 的 display 属性来实现。

2. 基本用法

<div v-show="isVisible">This is visible only if 'isVisible' is true.</div>

3. 示例

new Vue({
  el: '#app',
  data: {
    isVisible: true
  }
});

4. 注意事项

• v-show 始终会渲染元素，只是通过 CSS 控制其显示或隐藏。
• 与 v-if 不同，v-show 不会销毁或重新创建 DOM 元素，因此适合频繁切换的场景。

8. v-on 事件处理

1. 作用

v-on 指令用于监听 DOM 事件，并在事件触发时执行 JavaScript 函数。它支持各种事件，如点击、输入、提交等。

2. 基本用法

<!-- 点击事件 -->
<button v-on:click="handleClick">Click Me</button>

<!-- 键盘事件 -->
<input v-on:keyup.enter="handleEnter" placeholder="Press Enter">
<!-- 简写  v-on: => @ -->
<input @keyup.enter="handleEnter" placeholder="Press Enter">

3. 示例

new Vue({
  el: '#app',
  methods: {
    handleClick() {
      alert('Button clicked!');
    },
    handleEnter() {
      alert('Enter key pressed!');
    }
  }
});

4. 注意事项

• v-on 可以简写为 @，例如：@click=“handleClick”。
• 可以通过修饰符（如 .stop、.prevent、.capture）来增强事件处理能力。

5. 修饰符

(1) .stop

• 作用: 阻止事件冒泡，即阻止事件向上级 DOM 元素传播。
• 示例:

<button @click.stop="handleClick">Click Me</button>

• 适用场景: 适用于需要防止事件冒泡的场景

(2) .prevent

• 作用: 阻止事件的默认行为，例如表单提交时阻止页面刷新。
• 示例:

<form @submit.prevent="handleSubmit">
  <button type="submit">Submit</button>
</form>

• 适用场景: 适用于需要阻止默认行为的场景

(3) .capture

• 作用: 使用事件的捕获模式，即事件在目标元素触发前先在父元素捕获。
• 示例:

<div @click.capture="handleCapture">
  <button @click="handleClick">Click Me</button>
</div>

• 适用场景: 适用于需要在父元素捕获事件的场景

(4) .self

• 作用: 只有当事件的目标元素是当前元素时才触发处理函数。
• 示例:

<div @click.self="handleSelf">
  <button @click="handleClick">Click Me</button>
</div>

• 适用场景: 适用于需要区分事件来源的场景

(5) .once

• 作用: 事件只触发一次。
• 示例:

<button @click.once="handleOnce">Click Me</button>

• 适用场景: 适用于需要限制事件触发次数的场景

(6) .passive

• 作用: 事件的默认行为立即执行，不会等待事件处理函数完成。
• 示例:

<div @scroll.passive="handleScroll">Scroll Me</div>

• 适用场景: 适用于需要优化滚动性能的场景

(7) .{keyCode | keyAlias}

• 作用: 从特定键触发事件时执行。
• 示例:

<input @keyup.13="handleSubmit"> <!-- 13 是 Enter 键的 keyCode -->
<input @keyup.enter="handleSubmit"> <!-- 使用别名 -->

• 适用场景: 适用于需要监听特定按键的场景

(8) .系统修饰键

.ctrl
.alt
.shift
.meta

• 作用: 仅在按下相应按键时才触发事件。
• 示例:

<div @click.ctrl="handleCtrl">Click Me</div>

• 适用场景: 适用于需要组合键触发事件的场景

(9) .exact

• 作用: 仅在按下精确的系统修饰符组合时才触发事件。
• 示例:

<button @click.ctrl.exact="handleExact">Click Me</button>

• 适用场景: 适用于需要精确控制修饰键的场景。

(10) 鼠标按钮修饰符

.left
.right
.middle

• 作用: 限制处理函数仅响应特定的鼠标按钮。
• 示例:

<div @click.left="handleLeft">Click Me</div>

• 适用场景: 适用于需要区分鼠标按钮的场景

9. v-cloak 防止未编译的 Mustahge 语法闪烁

1. 作用

v-cloak 指令用于在 Vue 实例初始化之前隐藏未编译的 Mustache 语法，防止页面在加载时显示原始的模板语法。

2. 基本用法

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

3. 示例

new Vue({
  el: '#app',
  data: {
    message: 'Hello, Vue!'
  }
});

4. 注意事项

• 通常与 CSS 样式配合使用，例如：[v-cloak] { display: none; }。
• 在生产环境中，建议使用 v-cloak 来避免页面加载时的闪烁问题。

10. v-pre 跳过编译

1. 作用

v-pre 指令用于跳过 Vue 的编译过程，直接显示原始的 Mustache 语法或模板内容。

2. 基本用法

<div v-pre>
  {{ This will not be compiled by Vue }}
</div>

3. 示例

new Vue({
  el: '#app'
});

4. 注意事项

• v-pre 通常用于调试或展示 Vue 的模板语法。
• 被 v-pre 标记的内容不会被 Vue 编译，因此不会响应数据变化

11. v-once 只渲染一次

1. 作用

v-once 指令用于让数据只渲染一次，后续数据变化不会更新视图。

2. 基本用法

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

3. 示例

new Vue({
  el: '#app',
  data: {
    message: 'This will not update if message changes.'
  }
});

4. 注意事项

• v-once 适合用于不需要动态更新的内容，例如版权声明或固定的提示信息。
• 使用 v-once 后，Vue 不会再监听该部分的 DOM 更新。

12. v-slot 插槽

1. 作用

v-slot 指令用于定义组件的插槽内容，允许在组件内部插入自定义内容。

2. 基本用法

<my-component>
  <template v-slot:header>
    <h1>Header Content</h1>
  </template>
  <template v-slot:default>
    <p>Default Slot Content</p>
  </template>
  <template v-slot:footer>
    <p>Footer Content</p>
  </template>
</my-component>

3. 示例

Vue.component('my-component', {
  slots: {
    header: 'header',
    default: 'default',
    footer: 'footer'
  }
});

new Vue({
  el: '#app'
});

4. 注意事项

• v-slot 是 Vue 2.6+ 引入的新语法，用于替代 slot 和 slot-scope。
• 可以使用 # 语法简写，例如：<template #header>…。