Javascript 试图使用CDN中的Vue.js库，但未捕获语法错误：意外标识符_Javascript_Vue.js

Javascript 试图使用CDN中的Vue.js库，但未捕获语法错误：意外标识符

javascript vue.js

Javascript 试图使用CDN中的Vue.js库，但未捕获语法错误：意外标识符,javascript,vue.js,Javascript,Vue.js,我使用Django作为后端，我想使用Vue.js库作为前端。我将它们包括在CDN中。问题在于，脚本的第一行总是会得到错误uncaughtsyntaxerror:Unexpected identifier。我怀疑这是因为导入，但我不知道如何使用该库。有什么想法吗？提前谢谢 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <meta

我使用Django作为后端，我想使用Vue.js库作为前端。我将它们包括在CDN中。问题在于，脚本的第一行总是会得到错误uncaughtsyntaxerror:Unexpected identifier。我怀疑这是因为导入，但我不知道如何使用该库。有什么想法吗？提前谢谢

<!DOCTYPE html>
<html>
    <head>
            <meta charset="UTF-8">
            <meta name="viewport" content="width=device-width, initial-scale=1.0">
            <meta http-equiv="X-UA-Compatible" content="ie=edge">


            <title>title</title>


            <link rel="stylesheet" type="text/css" href="/static/fortykwords/style.css" />

            <script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script>
            <script src="https://unpkg.com/@johmun/vue-tags-input/dist/vue-tags-input.js"></script>

    </head>
    <body>


        <ul class="sidebar-nav">
        <p>sidebar</p> 

            <li><a href="/profile/">pepe14</a></li>
            <li><a href="/accounts/logout/?next=/submit/">Logout</a></li>

        </ul>

<template>
    <div>
      <vue-tags-input
        v-model="tag"
        :tags="tags"
        @tags-changed="newTags => tags = newTags"
      />
    </div>
</template>

<script>
  import VueTagsInput from '@johmun/vue-tags-input';

        export default {
          components: {
            VueTagsInput,
          },
          data() {
            return {
              tag: '',
              tags: [],
            };
          },
        };
</script>



<form action="" method="post">
    <input type='hidden' name='csrfmiddlewaretoken' value='fEEj9YrFOkChjlhrZ7HPgDoiJNcnb0ILUrd143icwaZ58No1Ckl8tTr0p9TxRMi7' />
    <table>
        <tr><th><label for="id_title">Title:</label></th><td><input type="text" name="title" required id="id_title" maxlength="250" /></td></tr>
<tr><th><label for="id_body">Body:</label></th><td><textarea name="body" cols="40" required id="id_body" maxlength="40000" rows="10">
</textarea></td></tr>
<tr><th><label for="id_tags">Tags:</label></th><td><input type="text" name="tags" required id="id_tags" /><br /><span class="helptext">A comma-separated list of tags.</span></td></tr>
    </table>
    <input type="submit" value="Submit" />
</form>

    </body>
</html>

        <title>title</title>


        <link rel="stylesheet" type="text/css" href="/static/fortykwords/style.css" />

        <script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script>
        <script src="https://unpkg.com/@johmun/vue-tags-input/dist/vue-tags-input.js"></script>

</head>
<body>

  <ul class="sidebar-nav">
    <p>sidebar</p> 

    <li><a href="/profile/">pepe14</a></li>
    <li><a href="/accounts/logout/?next=/submit/">Logout</a></li>

  </ul>
  <div id="element">
      <vue-tags-input
      v-model="tag"
      :tags="tags"
      @tags-changed="newTags => tags = newTags"
    />
  </div>



<form action="" method="post">
    <input type='hidden' name='csrfmiddlewaretoken' value='fEEj9YrFOkChjlhrZ7HPgDoiJNcnb0ILUrd143icwaZ58No1Ckl8tTr0p9TxRMi7' />
    <table>
        <tr><th><label for="id_title">Title:</label></th><td><input type="text" name="title" required id="id_title" maxlength="250" /></td></tr>
        <tr><th><label for="id_body">Body:</label></th><td><textarea name="body" cols="40" required id="id_body" maxlength="40000" rows="10">
        </textarea></td></tr>
        <tr><th><label for="id_tags">Tags:</label></th><td><input type="text" name="tags" required id="id_tags" /><br /><span class="helptext">A comma-separated list of tags.</span></td></tr>
    </table>
    <input type="submit" value="Submit" />
</form>


<script>
    new Vue({
      el: '#element',
      data: {
        tag: '',
        tags: [],
      },

    });
</script>
    </body>
</html>


标题

侧边栏
        <title>title</title>


        <link rel="stylesheet" type="text/css" href="/static/fortykwords/style.css" />

        <script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script>
        <script src="https://unpkg.com/@johmun/vue-tags-input/dist/vue-tags-input.js"></script>

</head>
<body>

  <ul class="sidebar-nav">
    <p>sidebar</p> 

    <li><a href="/profile/">pepe14</a></li>
    <li><a href="/accounts/logout/?next=/submit/">Logout</a></li>

  </ul>
  <div id="element">
      <vue-tags-input
      v-model="tag"
      :tags="tags"
      @tags-changed="newTags => tags = newTags"
    />
  </div>



<form action="" method="post">
    <input type='hidden' name='csrfmiddlewaretoken' value='fEEj9YrFOkChjlhrZ7HPgDoiJNcnb0ILUrd143icwaZ58No1Ckl8tTr0p9TxRMi7' />
    <table>
        <tr><th><label for="id_title">Title:</label></th><td><input type="text" name="title" required id="id_title" maxlength="250" /></td></tr>
        <tr><th><label for="id_body">Body:</label></th><td><textarea name="body" cols="40" required id="id_body" maxlength="40000" rows="10">
        </textarea></td></tr>
        <tr><th><label for="id_tags">Tags:</label></th><td><input type="text" name="tags" required id="id_tags" /><br /><span class="helptext">A comma-separated list of tags.</span></td></tr>
    </table>
    <input type="submit" value="Submit" />
</form>


<script>
    new Vue({
      el: '#element',
      data: {
        tag: '',
        tags: [],
      },

    });
</script>
    </body>
</html>




从“@johmun/vue标记输入”导入VueTagsInput；
导出默认值{
组成部分：{
VueTagsInput，
},
数据（）{
返回{
标记：“”，
标签：[]，
};
},
};
标题：
正文：
标记：
以逗号分隔的标记列表。

由于您同时使用从CDN输入的Vue和Vue标记，因此无法依赖导入/导出。因此，首先需要从代码中删除它们：两个

 import VueTagsInput from '@johmun/vue-tags-input';

        <title>title</title>


        <link rel="stylesheet" type="text/css" href="/static/fortykwords/style.css" />

        <script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script>
        <script src="https://unpkg.com/@johmun/vue-tags-input/dist/vue-tags-input.js"></script>

</head>
<body>

  <ul class="sidebar-nav">
    <p>sidebar</p> 

    <li><a href="/profile/">pepe14</a></li>
    <li><a href="/accounts/logout/?next=/submit/">Logout</a></li>

  </ul>
  <div id="element">
      <vue-tags-input
      v-model="tag"
      :tags="tags"
      @tags-changed="newTags => tags = newTags"
    />
  </div>



<form action="" method="post">
    <input type='hidden' name='csrfmiddlewaretoken' value='fEEj9YrFOkChjlhrZ7HPgDoiJNcnb0ILUrd143icwaZ58No1Ckl8tTr0p9TxRMi7' />
    <table>
        <tr><th><label for="id_title">Title:</label></th><td><input type="text" name="title" required id="id_title" maxlength="250" /></td></tr>
        <tr><th><label for="id_body">Body:</label></th><td><textarea name="body" cols="40" required id="id_body" maxlength="40000" rows="10">
        </textarea></td></tr>
        <tr><th><label for="id_tags">Tags:</label></th><td><input type="text" name="tags" required id="id_tags" /><br /><span class="helptext">A comma-separated list of tags.</span></td></tr>
    </table>
    <input type="submit" value="Submit" />
</form>


<script>
    new Vue({
      el: '#element',
      data: {
        tag: '',
        tags: [],
      },

    });
</script>
    </body>
</html>

和

        <title>title</title>


        <link rel="stylesheet" type="text/css" href="/static/fortykwords/style.css" />

        <script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script>
        <script src="https://unpkg.com/@johmun/vue-tags-input/dist/vue-tags-input.js"></script>

</head>
<body>

  <ul class="sidebar-nav">
    <p>sidebar</p> 

    <li><a href="/profile/">pepe14</a></li>
    <li><a href="/accounts/logout/?next=/submit/">Logout</a></li>

  </ul>
  <div id="element">
      <vue-tags-input
      v-model="tag"
      :tags="tags"
      @tags-changed="newTags => tags = newTags"
    />
  </div>



<form action="" method="post">
    <input type='hidden' name='csrfmiddlewaretoken' value='fEEj9YrFOkChjlhrZ7HPgDoiJNcnb0ILUrd143icwaZ58No1Ckl8tTr0p9TxRMi7' />
    <table>
        <tr><th><label for="id_title">Title:</label></th><td><input type="text" name="title" required id="id_title" maxlength="250" /></td></tr>
        <tr><th><label for="id_body">Body:</label></th><td><textarea name="body" cols="40" required id="id_body" maxlength="40000" rows="10">
        </textarea></td></tr>
        <tr><th><label for="id_tags">Tags:</label></th><td><input type="text" name="tags" required id="id_tags" /><br /><span class="helptext">A comma-separated list of tags.</span></td></tr>
    </table>
    <input type="submit" value="Submit" />
</form>


<script>
    new Vue({
      el: '#element',
      data: {
        tag: '',
        tags: [],
      },

    });
</script>
    </body>
</html>

导出默认值{}

        <title>title</title>


        <link rel="stylesheet" type="text/css" href="/static/fortykwords/style.css" />

        <script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script>
        <script src="https://unpkg.com/@johmun/vue-tags-input/dist/vue-tags-input.js"></script>

</head>
<body>

  <ul class="sidebar-nav">
    <p>sidebar</p> 

    <li><a href="/profile/">pepe14</a></li>
    <li><a href="/accounts/logout/?next=/submit/">Logout</a></li>

  </ul>
  <div id="element">
      <vue-tags-input
      v-model="tag"
      :tags="tags"
      @tags-changed="newTags => tags = newTags"
    />
  </div>



<form action="" method="post">
    <input type='hidden' name='csrfmiddlewaretoken' value='fEEj9YrFOkChjlhrZ7HPgDoiJNcnb0ILUrd143icwaZ58No1Ckl8tTr0p9TxRMi7' />
    <table>
        <tr><th><label for="id_title">Title:</label></th><td><input type="text" name="title" required id="id_title" maxlength="250" /></td></tr>
        <tr><th><label for="id_body">Body:</label></th><td><textarea name="body" cols="40" required id="id_body" maxlength="40000" rows="10">
        </textarea></td></tr>
        <tr><th><label for="id_tags">Tags:</label></th><td><input type="text" name="tags" required id="id_tags" /><br /><span class="helptext">A comma-separated list of tags.</span></td></tr>
    </table>
    <input type="submit" value="Submit" />
</form>


<script>
    new Vue({
      el: '#element',
      data: {
        tag: '',
        tags: [],
      },

    });
</script>
    </body>
</html>

对于Vue组件

        <title>title</title>


        <link rel="stylesheet" type="text/css" href="/static/fortykwords/style.css" />

        <script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script>
        <script src="https://unpkg.com/@johmun/vue-tags-input/dist/vue-tags-input.js"></script>

</head>
<body>

  <ul class="sidebar-nav">
    <p>sidebar</p> 

    <li><a href="/profile/">pepe14</a></li>
    <li><a href="/accounts/logout/?next=/submit/">Logout</a></li>

  </ul>
  <div id="element">
      <vue-tags-input
      v-model="tag"
      :tags="tags"
      @tags-changed="newTags => tags = newTags"
    />
  </div>



<form action="" method="post">
    <input type='hidden' name='csrfmiddlewaretoken' value='fEEj9YrFOkChjlhrZ7HPgDoiJNcnb0ILUrd143icwaZ58No1Ckl8tTr0p9TxRMi7' />
    <table>
        <tr><th><label for="id_title">Title:</label></th><td><input type="text" name="title" required id="id_title" maxlength="250" /></td></tr>
        <tr><th><label for="id_body">Body:</label></th><td><textarea name="body" cols="40" required id="id_body" maxlength="40000" rows="10">
        </textarea></td></tr>
        <tr><th><label for="id_tags">Tags:</label></th><td><input type="text" name="tags" required id="id_tags" /><br /><span class="helptext">A comma-separated list of tags.</span></td></tr>
    </table>
    <input type="submit" value="Submit" />
</form>


<script>
    new Vue({
      el: '#element',
      data: {
        tag: '',
        tags: [],
      },

    });
</script>
    </body>
</html>

最重要的是，如果vue标记输入有效，那么您的vue组件代码将无法工作：

<template>
<script>
<style>

        <title>title</title>


        <link rel="stylesheet" type="text/css" href="/static/fortykwords/style.css" />

        <script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script>
        <script src="https://unpkg.com/@johmun/vue-tags-input/dist/vue-tags-input.js"></script>

</head>
<body>

  <ul class="sidebar-nav">
    <p>sidebar</p> 

    <li><a href="/profile/">pepe14</a></li>
    <li><a href="/accounts/logout/?next=/submit/">Logout</a></li>

  </ul>
  <div id="element">
      <vue-tags-input
      v-model="tag"
      :tags="tags"
      @tags-changed="newTags => tags = newTags"
    />
  </div>



<form action="" method="post">
    <input type='hidden' name='csrfmiddlewaretoken' value='fEEj9YrFOkChjlhrZ7HPgDoiJNcnb0ILUrd143icwaZ58No1Ckl8tTr0p9TxRMi7' />
    <table>
        <tr><th><label for="id_title">Title:</label></th><td><input type="text" name="title" required id="id_title" maxlength="250" /></td></tr>
        <tr><th><label for="id_body">Body:</label></th><td><textarea name="body" cols="40" required id="id_body" maxlength="40000" rows="10">
        </textarea></td></tr>
        <tr><th><label for="id_tags">Tags:</label></th><td><input type="text" name="tags" required id="id_tags" /><br /><span class="helptext">A comma-separated list of tags.</span></td></tr>
    </table>
    <input type="submit" value="Submit" />
</form>


<script>
    new Vue({
      el: '#element',
      data: {
        tag: '',
        tags: [],
      },

    });
</script>
    </body>
</html>

由于从cdn导入时，vue tags input会自动加载到

窗口中

，因此无需在vue实例中导入/引用该组件。

谢谢！这就解决了问题。你知道我如何使它不作为一个单独的表单出现，而是从模板中修改一个现有表单来做到这一点吗？我想你应该将表单和vue标记相关的代码注册为组件，然后在主vue实例中将它们作为标记呈现。虽然有关vue组件的大多数示例和教程都假定您将使用单文件组件和babel，但vue组件的官方文档仍然假定您只是在浏览器中使用vue，没有任何构建步骤，因此它们应该会有很大帮助：

        <title>title</title>


        <link rel="stylesheet" type="text/css" href="/static/fortykwords/style.css" />

        <script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script>
        <script src="https://unpkg.com/@johmun/vue-tags-input/dist/vue-tags-input.js"></script>

</head>
<body>

  <ul class="sidebar-nav">
    <p>sidebar</p> 

    <li><a href="/profile/">pepe14</a></li>
    <li><a href="/accounts/logout/?next=/submit/">Logout</a></li>

  </ul>
  <div id="element">
      <vue-tags-input
      v-model="tag"
      :tags="tags"
      @tags-changed="newTags => tags = newTags"
    />
  </div>



<form action="" method="post">
    <input type='hidden' name='csrfmiddlewaretoken' value='fEEj9YrFOkChjlhrZ7HPgDoiJNcnb0ILUrd143icwaZ58No1Ckl8tTr0p9TxRMi7' />
    <table>
        <tr><th><label for="id_title">Title:</label></th><td><input type="text" name="title" required id="id_title" maxlength="250" /></td></tr>
        <tr><th><label for="id_body">Body:</label></th><td><textarea name="body" cols="40" required id="id_body" maxlength="40000" rows="10">
        </textarea></td></tr>
        <tr><th><label for="id_tags">Tags:</label></th><td><input type="text" name="tags" required id="id_tags" /><br /><span class="helptext">A comma-separated list of tags.</span></td></tr>
    </table>
    <input type="submit" value="Submit" />
</form>


<script>
    new Vue({
      el: '#element',
      data: {
        tag: '',
        tags: [],
      },

    });
</script>
    </body>
</html>