Question

我正在学习Vue.js框架，并且正在尝试一些方法来处理此JavaScript框架。

我的示例非常简单，但我并没有克服根据data {}和.html文件显示.js的问题。

这是我的 .html文件：

<!DOCTYPE html>
<html>
<head>
    <title>Test de Vue.js</title>
    <script src="test.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.16/vue.js"></script>
</head>
<body>

    <div id='test'>
        <p>{{ texte }}</p>
    </div>

</body>
</html>

我的 .js文件位于同一目录中：

var vm = new Vue ({
    el : '#test',
    data : {
        texte : 'Ceci est un premier test en Vue.js'
    }
});

但是，我不知道为什么我的浏览器显示以下内容：

非常感谢您

Answer 1

您的脚本顺序不正确。您必须先包含Vue.js，然后再包含脚本，因为脚本引用了Vue中定义的vue.js对象。

虽然vue.js可以包含在<head>中，但是您的Vue模型定义应该放在目标元素之后的<body>标签中，否则将无法正常工作。

<head>
    ...
    <script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.16/vue.js"></script>
</head>
<body>
    <div id="test">...</div>
    <script src="test.js"></script>
</body>

Vue.js问题：不显示数据

1 个答案: