我正在努力学习本教程，并复制了代码。我唯一改变的是index.js的位置，这不应该是问题所在，因为helloworld教程运行良好。控制台输出以下内容：
[Vue warn]: Property or method "seen" is not defined on the instance but referenced during render. Make sure that this property is reactive, either in the data option, or for class-based components, by initializing the property. See: https://v2.vuejs.org/v2/guide/reactivity.html#Declaring-Reactive-Properties.(found in <Root>)
因此，我的问题是，如果index.js文件中的代码有任何错误：
var app = new Vue({
el: '#app',
data: {
seen: true
}
})
或者html文件(插入到markdown文件中，因此是标题部分(有问题吗
---
title: vue
---
<html>
<head>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<div id="app">
<span v-if="seen">Now you see me</span>
</div>
<script src="vue/index.js"></script>
</body>
</html>
这可能是一个简单的错误，但我已经折腾了两个小时。如果有人能帮我就太好了。
首先，我们不是这样写data，而是这样写data(){return { seen:true };}
这个代码有效：
<template>
<div id="app">
<span v-if="seen">Now you see me</span>
</div>
</template>
<script>
export default {
name: "App",
data() {
return {
seen: true,
};
},
};
</script>
<style>
</style>
Vuejs很酷的一点是HTMLJS和CSS部分在同一个页面上。对于HTML部分，它只是一个<template>，内部直接添加没有<body>的<div>
如果你使用CDN，你的代码应该是这样的：
<html>
<head>
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<div id="app">
<span v-if="seen">Now you see me</span>
</div>
<script type="text/javascript">
new Vue({
el: "#app",
data() {
return {
seen: true,
};
},
});
</script>
<style>
</style>
</html>您将数据定义为返回对象的函数。