vue.js variables is not Working With Node.js :
Question
i am trying to run vue.js code inside my node.js app , but when i run my code using node index.js in terminal i got {{ name }} in browser instead of {{ john }}
HTML:
<!DOCTYPE html>
<html lang="en" xmlns:v-on="http://www.w3.org/1999/xhtml">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<link rel="stylesheet" href="/style.css">
<title>Document</title>
</head>
<body>
<div id="app">
<h1>
{{name}}
</h1>
</div>
</body>
</html>
JavaScript:
var Vue = require('vue');
var express = require('express');
var app = express();
var http = require('http');
var server = http.Server(app);
server.listen(3000,function () {
console.log('starting the server');
});
app.use(express.static(__dirname));
app.get('/',function (req,res) {
res.sendFile(__dirname + +'/index.html');
})
new Vue({
el:'#app',
data:{
name:'john'
},
})
Any Help :)
Note: i am using vue module installed from npm
2 answers
solution1
1 2018-04-24 15:53:51
Vue is a client side framework that needs to be running on the webpage you are serving, not on the node client that is serving it.
If you are trying to do server side rendering for Vue, you'll want to follow the guide for that.
solution2
0 ACCPTED 2018-04-24 15:54:23
You're mixing the frontend and the backend, it'll not work. The Vue is part of the front, so it needs to be imported at the index.html so there you can use the new Vue and so on. I recommend you to use the Vue-CLI to begin a project, It'll set the dependencies for you so you won't need to set a web-server manually.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.