This question already has answers here:
Why don't self-closing script elements work?
(12 answers)
Closed 5 years ago.
Here is my code and i seem to have done everything correctly.
what might be the problem as the output is only {{message}}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div id="app">
<h1>{{message}}</h1>
</div>
<script src="https://vuejs.org/js/vue.js"/>
<script>
new Vue({
el: '#app',
data:{
message: "Yow"
},
mounted: function () {
console.log("Mounted")
}
});
</script>
</body>
</html>
and it just outputs {{message}}
Hey man you forgot to close ending script tag in vue.js script/api
You were rendering whole html part in script tag like you can see in console below :
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div id="app">
<h1>{{message}}</h1>
</div>
<script src="https://vuejs.org/js/vue.js"/>
</script>
<script>
console.log('hi');
var app = new Vue({
el: '#app',
data:{
message: 'yow'
},
mounted: function () {
console.log("Mounted")
}
});
</script>
</body>
And always inlude api/main/cdn link ahead of any operational js file
Related
Im new to VueJS and trying to figure out how I would nest components or have sub components. I don't know if im very bad at googling but I couldn't really find a clear answer.
This is my script and html :
Vue.component('card', {
template: '<div class="card"></div>'
})
Vue.component('card-text', {
props: ['text-content'],
template: '{{ text-content }}'
})
new Vue({
el: '#app',
})
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="style.css">
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script defer src="script.js"></script>
</head>
<body>
<div id="app">
<card>
<card-text text-content="Text to show"></card-text>
</card>
</div>
</body>
</html>
as you can see I have 2 components, card and card-text.
I want to display these like this :
<card>
<card-text text-content="text to show"></card-text>
</card>
You would need slots to do that. Just change your card component to:
Vue.component('card', {
template: '<div class="card"><slot></slot></div>'
})
To be able to render different stuff inside <card></card>
You can read more in the docs
If you want to nest card-text inside card, just do as follows:
Vue.component('card', {
template: '<div class="card"><card-text text-content="Text to show"></card-text></div>'
})
I have index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<script type="module">
import Vue from '/static/js/vue.js'
new Vue({
el: '#index',
data:{
message:'Hello Vue!'
}
})
</script>
<div id="index">
<p>{{ message }}</p>
</div>
</body>
</html>
also I have this file structure
But I get this error:
GET http://localhost:8080/static/js/vue.js net::ERR_ABORTED 404
Can anybody help me? I want to use Vue.js without webpack, npm or something else.
Put your Vue scripts at the end of the body and as #Terry suggested change the path of your vue.js script to '/js/vue.js':
here's a working example https://codepen.io/ellisdod/pen/PoqBRbg?editors=1010
<body>
<div id="index">
<p>{{ message }}</p>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
new Vue({
el: '#index',
data:{
message:'Hello Vue!'
}
})
</script>
</body>
I am new to VueJs. As a start, I am trying to create a page which on button click increases or decreases age. However, the age is not rendering on to the html. Given below are the reqd files:
HTML:
<!DOCTYPE html>
<html lang="en">
<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">
<title>Vue</title>
<script src="https://unpkg.com/vue#2.6.11/dist/vue.js"></script>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<div id="app">
<h1>Events</h1>
<button #click="add">Add a year</button>
<button #click="subtract">Subtract a year</button>
<p>{{ age }}</p>
</div>
<script src="app.js"></script>
</body>
</html>
app.js:
new Vue({
el: '#app',
data: {
age:22
},
methods: {
add: function(){
this.age++;
}
subtract: function(){
this.age--;
}
}
});
Any help is appreciated!
problem is missing comma symbol after add function :D .
Correct version of app.js as below :
new Vue({
el: '#app',
data: {
age:22
},
methods: {
add: function(){
this.age++;
},
subtract: function(){
this.age--;
}
}
});
I have this simple file and using http-server it does not work. Please help. NOTE that I have a proper <head> of the HTML page .
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>VueTester</title>
</head>
<body>
<script>
new Vue({
el: '#app',
data: {
message: 'Hello Vue.js!',
},
})
</script>
<div id="app">
<p>{{ message }}</p>
</div>
<script src="https://unpkg.com/vue"></script>
</body>
</html>
Ok if i understand you right, you just have a simple HTML-file and want to use vue in it.
In this case you just have to reorganize your code like this and it should work:
<html>
<body>
<div id="app">
<p>{{ message }}</p>
</div>
<script src="https://unpkg.com/vue"></script>
<script>
new Vue({
el: '#app',
data: { message: 'Hello Vue.js!' }
})
</script>
If i missunderstood you just tell me and I try to edit it.
I am new in vue. i tried to render a vue component. but i got error.
i am not using vue-cli. i include a script https://cdn.jsdelivr.net/npm/vue
My html code
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>
VUE Study
</title>
<link href="stylee.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
</head>
<body>
<div class="container" id="head">
</div>
<script src="components/app.js"></script>
</body>
</html>
app.js
import Index from "./Index.vue"
new Vue({
el: '#head',
render: h => h(Index)
});
both app.js and Index.vue are in same folder.
Please healp me to solve this..
The error occurs because browser do not recognize import statement.
Since you are not using a bundler like webpack you can register the components using Vue.component(). This will eliminate the need to import components inside other modules.
Vue.component('Index', {
data() {
return {
value: 'Index component'
}
},
template: `<h2>{{ value }}</h2>`
})
new Vue({
el: '#head'
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>
VUE Study
</title>
<link href="stylee.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
</head>
<body>
<div class="container" id="head">
<index />
</div>
<script src="components/app.js"></script>
</body>
</html>