0

我正在学习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'
    }
});

但是，我不知道为什么我的浏览器会显示这个：

在此处输入图像描述

太感谢了

4

1 回答 1

2

您的脚本顺序不正确。您必须首先包含 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>
于 2018-07-09T08:34:26.567 回答