Vue.js 的问题：不显示数据

Question

我正在学习 Vue.js 框架，我正在尝试处理这个 JavaScript 框架。

我的例子很简单，但是我没有克服根据.html和.js文件显示data {}

这是我的 .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 的问题：不显示数据

Issue with Vue.js : Doesn't display data

javascript

vue.js

vue-directives