时间戳

首页 > 解决方案 > 如何在外部 js 文件中使用 Vue.js

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

问题描述

为什么当我将它放在外部js文件中时，我无法使用Vue打印一个基本的hello world，但是当我将它放在由脚本标签包围的html文件中时，它工作正常

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

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

<!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>

标签： vue.jsvue-component

解决方案

Vue 和 Jquery 没有使用相同的方式或想法来创建动态元素。Jquery 使用选择器来访问元素，Vue 使用模板来制作真正的动态元素。您正在寻找的是一个 vue 模板。当模板保存到文件中时，您必须将其导入到您的组件中，并放入components. 检查这个 vue 结构 

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

...
componets:{
   Hello
}

script当您在标签中编写小组件时也是解决方案。在这个例子中检查它

例子

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

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

推荐阅读