【Vue 初步（v-html，v-show，v-if ，v-on，v-bind，v-for，事件、v-model、按键修饰符）】

v-html 简介

什么是v-html？

在Vue.js中，v-html是一种指令，用于将一段HTML代码渲染到元素中。通常情况下，Vue会将用户输入的文本作为纯文本显示，但在某些情况下，可能需要渲染HTML标记，这时就可以使用v-html。

基本用法

要在Vue中使用v-html，首先确保数据中包含HTML代码，然后将该数据绑定到需要渲染HTML的元素上。

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

<script>
export default {
  data() {
    return {
      htmlContent: '<strong>这是加粗的文本</strong>'
    };
  }
}
</script>

在上面的示例中，v-html指令将htmlContent的值渲染为HTML，并将其显示在<p>元素中。将在页面上显示为粗体文本。

安全性考虑

使用v-html时，要格外小心安全性问题。如果从不受信任的源获取HTML代码并将其渲染到你的应用程序中，可能会导致跨站脚本攻击（XSS）。为了确保安全性，应始终信任和验证来自用户或不受信任源的HTML。

Vue提供了一个工具函数this.$sanitize，可以用于过滤不安全的HTML标记。在将HTML渲染之前，可以使用它来确保只有安全的标记被渲染。

<template>
  <div>
    <p v-html="sanitizeHTML(htmlContent)"></p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      htmlContent: '<script>alert("恶意脚本");</script>'
    };
  },
  methods: {
    sanitizeHTML(html) {
      // 使用$sanitize过滤HTML
      return this.$sanitize(html);
    }
  }
}
</script>

这将确保只有安全的HTML标记被渲染到页面上，从而防止潜在的安全问题。

当使用Vue.js时，你会经常遇到需要根据条件显示或隐藏元素的情况。Vue提供了两个主要的指令来实现这一目的：v-show和v-if。在这篇博客中，我们将深入研究这两个指令的用法、区别以及何时使用它们。

v-show 和 v-if 简介

v-show

v-show是Vue.js中的一个指令，用于根据条件来控制元素的显示和隐藏。它的工作方式是通过修改元素的CSS属性（display）来控制元素的可见性。

<template>
  <div>
    <p v-show="isVisible">这是一个可见的段落。</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      isVisible: true
    };
  }
}
</script>

在上面的示例中，当isVisible为true时，段落将可见。如果isVisible为false，段落将被隐藏，但它仍然存在于DOM中。

v-if

v-if也是一个用于条件性渲染元素的指令，但它的工作方式不同。它会在DOM中完全添加或移除元素，而不仅仅是修改CSS属性。

<template>
  <div>
    <p v-if="isVisible">这是一个可见的段落。</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      isVisible: true
    };
  }
}
</script>

与v-show不同，当isVisible为false时，使用v-if的元素将从DOM中删除，而当isVisible为true时，元素将被添加回DOM中。

区别和选择

• v-show更适用于需要频繁切换可见性的元素，因为它只是切换CSS属性，不会导致DOM的重新渲染。这在性能要求较高的情况下很有用。

• v-if适用于那些不经常切换可见性的元素，因为它会根据条件在DOM中添加或删除元素。这可以减少不必要的DOM节点，但可能会在频繁切换时引起性能问题。

• 如果你不确定该使用哪个指令，可以考虑首先使用v-if。如果性能成为问题，再考虑切换到v-show。

• 另外，如果需要在元素的初始状态下执行一些复杂的计算或异步操作，v-if可能更适合，因为它只会在条件为true时才会执行这些操作。

示例代码

以下示例演示了v-show和v-if的区别：

<template>
  <div>
    <button @click="toggleVisibility">切换可见性</button>
    <p v-show="isVisible">使用 v-show 显示的段落。</p>
    <p v-if="isVisible">使用 v-if 显示的段落。</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      isVisible: true
    };
  },
  methods: {
    toggleVisibility() {
      this.isVisible = !this.isVisible;
    }
  }
}
</script>

v-on 指令简介

v-on是Vue.js中的一个指令，用于监听DOM事件，并在事件触发时执行指定的操作。你可以将它用于各种事件，如点击、鼠标移入、键盘输入等。

基本用法

下面是使用v-on的基本示例，当按钮被点击时，会触发一个函数：

<template>
  <div>
    <button v-on:click="handleClick">点击我</button>
  </div>
</template>

<script>
export default {
  methods: {
    handleClick() {
      // 在这里执行点击事件的操作
      console.log("按钮被点击了！");
    }
  }
}
</script>

在上面的示例中，v-on:click监听了按钮的点击事件，并在触发时调用handleClick方法。

v-on 的简写形式

为了简化代码，Vue还提供了@符号作为v-on的简写形式。上面的示例可以重写为：

<template>
  <div>
    <button @click="handleClick">点击我</button>
  </div>
</template>

<script>
export default {
  methods: {
    handleClick() {
      // 在这里执行点击事件的操作
      console.log("按钮被点击了！");
    }
  }
}
</script>

@符号与v-on具有相同的功能，但更加简洁。

在Vue.js中，v-bind指令是一个强大的工具，用于动态绑定HTML元素的属性。它允许你根据Vue实例的数据来设置元素的属性值，使你能够以响应式的方式更新页面。此外，Vue还提供了:作为v-bind的简写形式，使代码更加简洁和易读。在这篇博客中，我们将深入介绍v-bind及其简写的用法。

v-bind 指令简介

v-bind指令用于将Vue实例的数据绑定到HTML元素的属性上。通过这种方式，可以根据数据的变化来动态更新元素的属性值。

<template>
  <div>
    <a v-bind:href="url">点击跳转</a>
  </div>
</template>

<script>
export default {
  data() {
    return {
      url: 'https://example.com'
    };
  }
}
</script>

在上面的示例中，v-bind:href将url数据绑定到<a>元素的href属性上。当url数据发生变化时，链接的目标也会相应地更新。

动态绑定class和style

除了绑定属性，v-bind还可以用于动态绑定class和style。可以根据特定条件为元素添加不同的类或样式。

动态绑定class

<template>
  <div>
    <div v-bind:class="{'active': isActive, 'error': hasError}">动态绑定class</div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      isActive: true,
      hasError: false
    };
  }
}
</script>

在上面的示例中，v-bind:class根据isActive和hasError的值来动态添加active和error类。

动态绑定style

<template>
  <div>
    <div v-bind:style="{ color: textColor, fontSize: fontSize + 'px' }">动态绑定style</div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      textColor: 'blue',
      fontSize: 16
    };
  }
}
</script>

v-bind:style允许动态设置元素的CSS样式。在上面的示例中，textColor和fontSize的值将影响文本颜色和字体大小。

v-bind 的简写形式

为了简化代码，Vue提供了:作为v-bind的简写形式。上面的示例可以重写为：

<template>
  <div>
    <a :href="url">点击跳转</a>
  </div>
</template>

<script>
export default {
  data() {
    return {
      url: 'https://example.com'
    };
  }
}
</script>

使用:作为v-bind的简写，可以使代码更加紧凑和易读。

v-for 简介

什么是 v-for？

v-for是Vue.js中的一个指令，用于在模板中迭代遍历数据集合，例如数组或对象。通过v-for，可以创建多个重复的元素，每个元素都与数据集合中的一个项相关联。

基本用法

以下示例演示了如何使用v-for来遍历数组并渲染列表项：

<template>
  <div>
    <ul>
      <li v-for="item in items">{{ item }}</li>
    </ul>
  </div>
</template>

<script>
export default {
  data() {
    return {
      items: ['苹果', '香蕉', '橙子', '葡萄']
    };
  }
}
</script>

在上面的示例中，v-for指令在<li>元素上创建了一个循环，遍历items数组的每个项，并将其渲染为一个列表项。

遍历对象

v-for不仅可以遍历数组，还可以遍历对象的属性。

<template>
  <div>
    <ul>
      <li v-for="(value, key) in user">{{ key }}: {{ value }}</li>
    </ul>
  </div>
</template>

<script>
export default {
  data() {
    return {
      user: {
        name: 'John',
        age: 30,
        occupation: 'Developer'
      }
    };
  }
}
</script>

在这个示例中，v-for遍历了user对象的属性，分别渲染了键和值。

遍历索引

有时你可能需要获取当前项的索引，可以通过v-for的第二个参数来实现：

<template>
  <div>
    <ul>
      <li v-for="(item, index) in items">{{ index + 1 }}. {{ item }}</li>
    </ul>
  </div>
</template>

<script>
export default {
  data() {
    return {
      items: ['苹果', '香蕉', '橙子', '葡萄']
    };
  }
}
</script>

在上面的示例中，index参数用于获取当前项的索引。

key 属性的重要性

在使用v-for时，确保给每个遍历的元素设置一个唯一的key属性，这有助于Vue更高效地管理DOM元素的更新。如果没有提供key，Vue可能会出现性能问题或不正确的更新。

<template>
  <div>
    <ul>
      <li v-for="item in items" :key="item.id">{{ item.name }}</li>
    </ul>
  </div>
</template>

<script>
export default {
  data() {
    return {
      items: [
        { id: 1, name: '苹果' },
        { id: 2, name: '香蕉' },
        { id: 3, name: '橙子' },
        { id: 4, name: '葡萄' }
      ]
    };
  }
}
</script>

示例为每个列表项提供了一个唯一的key属性，有助于Vue准确地追踪和更新DOM元素。

事件修饰符

1. .stop：阻止事件冒泡，即停止事件传播到父元素。

<a v-on:click.stop="doThis"></a>

2. .prevent：阻止事件的默认行为，例如阻止表单的提交。

<form v-on:submit.prevent="submitForm">
  <!-- 表单内容 -->
</form>

3. .capture：事件以捕获模式触发，而不是默认的冒泡模式。

<div v-on:click.capture="handleClick">
  <!-- 以捕获模式触发 -->
</div>

4. .self：只有事件源元素上的事件才会触发，不会在子元素上触发。

<div v-on:click.self="handleClick">
  <!-- 只有点击此元素时触发，点击子元素不触发 -->
</div>

5. .once：确保事件只触发一次，之后自动解绑事件处理程序。

<button v-on:click.once="doThisOnce">点击一次</button>

6. .passive：用于提高滚动事件的性能。事件处理程序不会取消事件的默认行为。

<div v-on:scroll.passive="handleScroll">
  <!-- 提高性能的滚动事件处理 -->
</div>

v-model 修饰符

v-model是用于双向绑定表单元素值的指令。Vue提供了一些修饰符来更改v-model的默认行为。

1. .lazy：默认情况下，v-model会在input事件触发时同步输入框的值。使用.lazy修饰符后，它会在change事件触发时同步值，而不是每次输入时都同步。

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

2. .number：通常，v-model会将输入的值视为字符串。使用.number修饰符后，它会将输入的值转换为数值类型。

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

3. .trim：通常，v-model会保留输入的首尾空白。使用.trim修饰符后，它会自动去除首尾空白。

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

按键修饰符

常见的按键修饰符

1. .enter：用于监听回车键（Enter）的按下事件。

<input v-on:keyup.enter="submitForm">

2. .tab：用于监听Tab键的按下事件。

<input v-on:keydown.tab="focusNextInput">

3. .delete：用于监听删除键（Delete或Backspace）的按下事件。

<input v-on:keydown.delete="deleteItem">

4. .esc：用于监听Escape键的按下事件。

<input v-on:keyup.esc="closeModal">

5. .space：用于监听空格键的按下事件。

<button v-on:keydown.space="startVideoPlayback">播放视频</button>

6. .up：用于监听上箭头键的按下事件。

<input v-on:keydown.up="increaseValue">

7. .down：用于监听下箭头键的按下事件。

<input v-on:keydown.down="decreaseValue">

自定义按键修饰符

除了上述常见的按键修饰符，Vue.js还允许自定义按键修饰符，以监听特定的键盘按键，可以使用Vue.config.keyCodes来注册自定义按键修饰符。

// 注册自定义按键修饰符
Vue.config.keyCodes.myKey = 123;

new Vue({
  el: '#app',
  methods: {
    customKeyHandler() {
      // 当按下自定义按键时触发
      console.log('自定义按键被按下');
    }
  }
});

<!-- 在模板中使用自定义按键修饰符 -->
<input v-on:keydown.myKey="customKeyHandler">

上面的示例注册了一个名为myKey的自定义按键修饰符，并将其映射到键码为123的按键。在模板中使用了这个自定义修饰符来监听键盘事件。