第五节:Vue指令:基本认识使用/v-text/v-html/v-cloak/v-once/v-pre

在Vue中，指令是具有v-前缀的特殊属性，它们可以应用于HTML模板中，用于指示Vue如何渲染DOM。下面是一些常用的Vue指令：

1. v-text: 更新元素的文本内容。
2. v-html: 更新元素的innerHTML，注意：使用v-html可能会导致XSS攻击，所以谨慎使用。
3. v-cloak: 防止渲染过程中出现闪烁问题。
4. v-once: 只渲染元素一次，之后数据变化时不重新渲染。
5. v-pre: 跳过元素和它的子元素的编译过程，用于显示原始的Mustache标签。

示例代码：

<div id="app">
  <!-- 使用v-text指令 -->
  <p v-text="message"></p>
 
  <!-- 使用v-html指令 -->
  <div v-html="rawHtml"></div>
 
  <!-- 使用v-cloak指令防止闪烁 -->
  <p v-cloak>{{ message }}</p>
 
  <!-- 使用v-once指令 -->
  <p v-once>这个消息将不会改变: {{ message }}</p>
 
  <!-- 使用v-pre指令显示原始的Mustache标签 -->
  <p v-pre>{{ message }}</p>
</div>
 
<script>
new Vue({
  el: '#app',
  data: {
    message: 'Hello Vue!',
    rawHtml: '<span style="color: red;">This should be red.</span>'
  }
})
</script>

在这个例子中，Vue实例中的数据绑定到了HTML元素上，展示了不同的指令使用方法。