5.v-pre指令.html 1.0 KB

123456789101112131415161718192021222324252627282930313233343536
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. <meta charset="UTF-8">
  5. <meta http-equiv="X-UA-Compatible" content="IE=edge">
  6. <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7. <title>v-pre指令</title>
  8. <!-- 引入vue -->
  9. <script type="text/javascript" src="../js/vue.js"></script>
  10. </head>
  11. <body>
  12. <!--
  13. v-pre指令(没有值):
  14. 1、可以让Vue跳过其所在节点的编译过程。(也就是代码写的是啥样,页面呈现的就是啥样)
  15. 2、可利用它跳过:没有使用指令语法、没有使用插值语法的节点,会加快编译。
  16. -->
  17. <!-- 准备一个容器 -->
  18. <div id="root">
  19. <h2 v-pre>Vue其实有点简单</h2>
  20. <h2>当前的n值是:{{n}}</h2>
  21. <button @click="n++">点我n+1</button>
  22. </div>
  23. </body>
  24. <script>
  25. Vue.config.productionTip = false //阻止 vue 在启动时生成生产提示
  26. new Vue({
  27. el: '#root',
  28. data: {
  29. n:1
  30. }
  31. })
  32. </script>
  33. </html>