vue里面的comments的讲解及使用

Lysun001

于 2024-12-27 16:00:56 发布

阅读量1k

点赞数 5

文章标签： vue.js 前端 javascript

本文链接：https://blog.youkuaiyun.com/lotpyve/article/details/144770965

版权

先说明一下，我干前端也挺久了，这个属性一般不使用，只是今天有时间，发现没有了解过这个属性，恰好看一下。

先来看一下官网说明

这就是说明主要是用来保留 html 中的注释可以在浏览器中看到的，但是有个限制，那就是得在完整构建版本中编译时才可以使用。

下面我们来说一下完整构建版本中编译时是什么意思，我们平常通过 vueCLI 用的 vue 的，并不是完整版的

我们在 vue 项目中通过 import vue from 'vue' 引用时，给我们引用的是 dist/vue.runtime.common.js 这个文件

所以我们通过完整版的 vue 来看一下 comments 的使用，我这里是通过 bootcdn 引用的远程资源完整版 vue，如果试验的时候这个 cdn 用不了了，你们可以 npm i vue@2 之后在 node_modules 里面找到完整版自己引用就行

不添加 comments 属性：

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>

<body>
  <script src="https://cdn.bootcdn.net/ajax/libs/vue/2.7.14/vue.js"></script>
  <div id="app">
  </div>

  <script>
    const app = new Vue({
      el: '#app',
      data: {
        message: 'Hello, Vue!'
      },
      template: '<div><h1>{{ message }}</h1> <!-- 你好啊 --></div>'
    });
  </script>
</body>

</html>

添加了 comments 属性：

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>

<body>
  <script src="https://cdn.bootcdn.net/ajax/libs/vue/2.7.14/vue.js"></script>
  <div id="app">
  </div>

  <script>
    const app = new Vue({
      el: '#app',
      comments: true,
      data: {
        message: 'Hello, Vue!'
      },
      template: '<div><h1>{{ message }}</h1> <!-- 你好啊 --></div>'
    });
  </script>
</body>

</html>