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

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

vue.js

如何在外部js文件中使用Vue.js,vue.js,vue-component,Vue.js,Vue Component,为什么当我将hello world放在外部js文件中时，无法使用Vue打印基本hello world，而当我将其放在由脚本标记包围的html文件中时，它工作正常当我将该脚本标记的内容复制并粘贴到一个名为js_vue.js的文件中时，它根本不起作用我刚开始学习Vue，所以我不知道这里发生了什么。当然，有一种方法可以像对待原始html和jquery一样，将我所有的js代码放在一个单独的文件中 <!DOCTYPE html> <html lang="en"> <hea

为什么当我将hello world放在外部js文件中时，无法使用Vue打印基本hello world，而当我将其放在由脚本标记包围的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>


{{message}}

Vue和Jquery在创建dynamics元素时没有使用相同的方法或思想。Jquery使用选择器访问元素，Vue使用模板创建真正的动态元素。您正在搜索的是vue模板。当模板保存到文件中时，您必须将其导入组件，并放入

组件中。检查
在script
标记中编写小组件时，也是一种解决方案。检查
示例
<template id="create-template">
  ....
</template>

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


....
Vue.component（'create-post'{
模板：“#创建模板”
})
您的确切文件是什么，确切的文件名是什么，确切的内容是什么，以及您收到的错误消息是什么？你现在所描述的并没有足够的意义来回答。您的问题中的代码应该可以工作（如果您将其设置为一个代码段，则可以工作）。可能是您的外部脚本在DOM准备就绪之前正在执行。尝试在主体标记的末尾添加脚本标记。我想我知道这个问题。将
移动到
标记的最底部。该脚本必须在DOM中的其他元素可用后运行。否则，将脚本的内容包装在document.addEventListener（“DOMContentLoaded”，fuction（）{//所有脚本内容}）中这样它将在DOM加载完成后执行。请看js文件实际上只是将代码片段放在顶部，比如如何将变量放在函数之外，使其成为全局变量
<template id="create-template">
  ....
</template>

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