I am a fully beginner in VueJS and this is my first application. It is a Hello world app, but the code is not working ;(
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Learning VueJS</title>
</head>
<body>
<div id="app">
<p>{{ title }}</p>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/3.0.0/vue.cjs.js"></script>
<script src="script.js"></script>
</body>
script.js
new Vue({
el: '#app',
data: {
title: 'Hello world!'.
}
});
Your data must be a function.
new Vue({
el: '#app',
data()
return {
title: 'Hello world!',
};
}
});
See docs: https://v2.vuejs.org/v2/guide/components.html#data-Must-Be-a-Function
You're using a CDN link that uses Vue 3 version with a code syntax that runs in Vue 2, since you're beginner you should change the CDN link to vue 2 :
<script src="https://cdn.jsdelivr.net/npm/vue#2.6.11"></script>
let app = new Vue({
el: '#app',
data: {
title: 'Hello world!'
}
});
<script src="https://cdn.jsdelivr.net/npm/vue#2.6.12"></script>
<div id="app">
<p>{{ title }}</p>
</div>
Related
I work with vuejs mustache syntax don't work
I work with vuejs mustache syntax don't work
<!DOCTYPE html>
<html>
<head>
<title>index</title>
<script src="https://cdn.jsdelivr.net/npm/vue#2.6.14"></script>
<script>
const app = new Vue({
el: '#app',
data: {
message: "hello",
},
})
</script>
</head>
<body>
<div id="#app">
<h5>{{message}}</h5>
</div>
</body>
</html>
capture
It should be <div id="app"> not <div id="#app"> and the script that includes the vue instance should be at the end of body element :
<!DOCTYPE html>
<html>
<head>
<title>index</title>
<script src="https://cdn.jsdelivr.net/npm/vue#2.6.14"></script>
</head>
<body>
<div id="app">
<h5>{{message}}</h5>
</div>
<script>
const app = new Vue({
el: '#app',
data: {
message: "hello",
},
})
</script>
</body>
</html>
Why is my Vue and index.js import not working?
In my live server the text just shows up as {{ message }}
the html and js files are located in the same directory
var app = new Vue({
el: '#app',
data: {
message: 'Hello Vue!'
}
})
<!DOCTYPE html>
<html lang="en">
<html>
<head>
<meta charset="UTF-8">
<title>Pomodoro Timer</title>
<link rel="stylesheet" href="index.css">
</head>
<body>
<div id="app">
{{ message }}
</div>
</body>
</html>
<!-- Javascript -->
<script src="index.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
Im learning veu and I tried a basic setup but it shows {{name}} and there is veu is not defined in the console.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>VueJS Tutorial</title>
<link href="styles.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/vue#2.5.17/dist/vue.js"></script>
</head>
<body>
<div id="vue-app">
<h1>{{ name }}</h1>
</div>
<script src="app.js" type="text/javascript"></script>
</body>
</html>
new Veu({
el: '#vue-app',
data: {
name: () => {
return "Shaun";
}
}
});
Its Vue not Veu.
new Vue({
el: '#vue-app',
data: {
name: () => {
return "Shaun";
}
}
});
I cannot seem to able to get vue-axios to fetch, store and display data in browser. I tried this and getting undefined when getData button is clicked.
new Vue({
el: '#app',
data: {
dataReceived: '',
},
methods: {
getData() {
axios.get('https://min-api.cryptocompare.com/data/price?fsym=BTC&tsyms=USD')
.then(function(response) {
this.dataReceived = this.response;
console.log(this.dataReceived);
return this.dataReceived;
})
}
}
})
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title></title>
<script src="https://unpkg.com/vue#2.5.17/dist/vue.js"></script>
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
</head>
<body>
<div id="app">
<button #click="getData" type="button">getData</button>
<p>dataReceived: {{ dataReceived }}</p>
</div>
</body>
</html>
I would add to #boussadjrabrahim's excellent answer that you need to use a fat arrow notation inside your then callback to make sure that the this keyword is bound to your Vue instance. Otherwise your dataReceived will remain blank.
new Vue({
el: '#app',
data: {
dataReceived: '',
},
methods: {
getData() {
axios.get('https://min-api.cryptocompare.com/data/price?fsym=BTC&tsyms=USD')
.then((response) => {
this.dataReceived = response.data;
console.log(this.dataReceived);
return this.dataReceived;
})
}
}
})
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title></title>
<script src="https://unpkg.com/vue#2.5.17/dist/vue.js"></script>
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<script src="https://unpkg.com/vue-axios#2.1.4/dist/vue-axios.min.js"></script>
</head>
<body>
<div id="app">
<button #click="getData" type="button">getData</button>
<p>dataReceived: {{ dataReceived }}</p>
</div>
</body>
</html>
You're missing axios library so add it as follow :
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
Another thing to rectify is this.response change it to response.data
new Vue({
el: '#app',
data: {
dataReceived: '',
},
methods: {
getData() {
axios.get('https://min-api.cryptocompare.com/data/price?fsym=BTC&tsyms=USD')
.then((response)=> {
this.dataReceived = response.data;
console.log(this.dataReceived);
return this.dataReceived;
})
}
}
})
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title></title>
<script src="https://unpkg.com/vue#2.5.17/dist/vue.js"></script>
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<script src="https://unpkg.com/vue-axios#2.1.4/dist/vue-axios.min.js"></script>
</head>
<body>
<div id="app">
<button #click="getData" type="button">getData</button>
<p>dataReceived: {{ dataReceived }}</p>
</div>
</body>
</html>
I'm trying to use Vue with a Phoenix/Elixir project. After a great deal of troubleshooting I still could not get Vuejs elements to render. So I decided to test the simple "hello world" example in raw html/js.
It won't work either. What am I doing wrong?
Here's the jsfiddle I'm trying to duplicate on my computer:
https://jsfiddle.net/yyx990803/okv0rgrk/
Here's the code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Vue Test</title>
<script src="https://cdn.jsdelivr.net/vue/latest/vue.js"></script>
<script>
new Vue({
el: '#app',
data: {
message: 'Hello Vue.js!'
}
})
</script>
</head>
<body>
<div id="app">
{{ message }}
</div>
</body>
</html>
Put your second script tag before </body>. The reason your code isn't working is because you're trying to mount #app before it exists. If you try to mount it after it's there it'll be fine.
Here is a minimal example:
<!DOCTYPE html>
<html>
<head>
<script src="http://cdn.jsdelivr.net/vue/2.0.3/vue.js"></script>
</head>
<body>
<div id="app">
<p>{{ message }}</p>
</div>
<!-- Must put the script below after the app div -->
<script type="text/javascript">
new Vue({
el: '#app',
data: {
message: 'Hello Vue.js!'
}
})
</script>
</body>
</html>