Question

为什么将Vue放在外部js文件中却无法使用Vue打印基本的hello世界，但是当我将其放入由script标记包围的html文件中时，效果很好 >

当我将该脚本标签的内容复制并粘贴到一个名为js_vue.js的文件中时，它根本不起作用

我是Vue的新手，所以我不告诉您这里发生了什么。当然，有一种方法可以像将原始html和jquery一样将所有js代码放在单独的文件中

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

    <script src="https://unpkg.com/vue"></script>
    <script src="js_vue.js"></script>
</head>
<body>

<div id="app">
    {{ message }}
</div>


</body>
</html>

<script>
    var app = new Vue({
        el: '#app',
        data: {
            message: 'Hello Vue!'
        }
    })
</script>

作为摘要：

var app = new Vue({
  el: '#app',
  data: {
    message: 'Hello Vue!'
  }
})

<script src="https://unpkg.com/vue"></script>

<div id="app">
  {{ message }}
</div>

Answer 1

Vue和Jquery使用不同的方式或想法来创建dynamics元素。 jQuery使用选择器访问元素，Vue使用模板制作真实的动态元素。您要搜索的是Vue模板。将模板保存到文件中后，必须将其导入到组件中，然后放入components中。选中this vue structure

import Hello form ./folder/another/Hello.vue

...
componets:{
   Hello
}

在script标签中编写小型组件时的解决方案。选中it on this example

示例

<template id="create-template">
  ....
</template>

Vue.component('create-post', {
  template: '#create-template'
})

如何在外部js文件中使用Vue.js

1 个答案: