vue.js - Hello vue报错Property or method "message" is not defined
本文介绍了vue.js - Hello vue报错Property or method "message" is not defined的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
问 题
报错信息
instance but referenced during render. Make sure to declare reactive
data properties in the data option. (found in <App> at
C:ProjectcodemyVueProjectsrcApp.vue)
App.vue
<template>
<div id="app">
{{ message }}
</div>
</template>
<script>
var app = new Vue({
el: '#app',
data: {
message: 'Hello Vue!'
}
})
</script>
<style>
</style>main.js
// The Vue build version to load with the `import` command
// (runtime-only or standalone) has been set in webpack.base.conf with an alias.
import Vue from 'vue'
import App from './App'
import router from './router'
Vue.config.productionTip = false
/* eslint-disable no-new */
new Vue({
el: '#app',
router,
template: '<App/>',
components: { App }
})
index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>my-vue-project</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.2.6/vue.js"></script>
</head>
<body>
<div id="app"></div>
<!-- built files will be auto injected -->
</body>
</html>
解决方案
App.vue
export default {
name: 'App',
data(){
return {
message: 'Hello Vue!'
}
}
}这篇关于vue.js - Hello vue报错Property or method "message" is not defined的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
