1-2.vue指令：mustache语法、v-pre、v-once指令_前端为什么要放在mustache语法里-CSDN博客

本文链接：https://blog.csdn.net/weixin_45660035/article/details/110679530

1-2.vue指令：mustache语法

mustache语法的解释

mustache语法主要运用于前端的框架中，根据数据的变化动态的展示数据里面的值。通过双花括号({{data}})来实现。vue里面展示数据通过mustache语法来展示

v-pre指令的使用

1.作用

在vue里面使用该标签后，将展示原始的mustache标签，不会动态的展示数据

2.代码展示

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <script src='../js/vue.js'></script>
  <title>Document</title>
</head>
<body>
  <div id='app'>
    <!-- 此处使用v-pre标签，将显示原始的mustache标签 -->
    <h2 v-pre>{{message}}</h2>
  </div>

  <script>
    const app = new Vue({
      el: '#app',
      data: {
        message: '展示信息'
      }
    });
  </script>

</body>
</html>

3.结果展示

在这里插入图片描述

v-once指令的使用

1.作用

使用v-once后，mustache只会显示最初的值，当该值变化后，mustache展示的内容不会随值一起变化

2.代码展示

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <script src='../js/vue.js'></script>
  <title>Document</title>
</head>
<body>
  <div id='app'>
    <!-- 此处使用v-once标签，只会展示最初的值 -->
    <h2 v-once>{{message}}</h2>
  </div>

  <script>
    const app = new Vue({
      el: '#app',
      data: {
        message: '展示信息'
      }
    });
  </script>

</body>
</html>