In vue.js we know there are two ways to bind data to a view:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div id="app">
<p>{{msg}}</p>
<p v-text="msg"></p>
</div>
<script src="./lib/vue.js"></script>
<script>
var vm = new Vue({
el: "#app",
data: {
msg: 'hello world',
}
})
</script>
</body>
</html>
You see the tag p:
<p>{{msg}}</p>
<p v-text="msg"></p>
Is there any difference between them?
There are two differences between them:
If you use the <p>{{msg}}</p> to bind the data, you can add more content, such as:
Hi, {{msg}}!
The <p v-text="msg"></p> can avoid the bind flashing, that mean when you load the view, there will not appear {{msg}} like the first way. If you want to use <p>Hi, {{msg}}!</p> way, you can add the [v-cloak] property:
<style>
[v-cloak] {
display: none;
}
</style>
...
<p v-cloak>{{msg}}</p>
Related
I am self-studying Vue.js. I am using v-bind to add the highlight class to the span element, which is supposed to add newBorder style to the element, but the style doesn't get applied.
<!DOCTYPE HTML>
<html>
<head>
<title>Intro to v-bind</title>
<meta charset="UTF-8">
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<style>
.container {
background: #cecece;
}
.newBorder {
border: 5px solid yellow;
}
</style>
</head>
<body>
<div id="app">
<img v-bind:src="'assets/images/look.jpg'" v-bind:alt="'illustration of the word -Look-'" v-bind:title="'Look'">
<span v-bind:class="{loadClass,highlight}">
look at me!
</span>
</div>
<script>
var app = new Vue({
el: '#app',
data: {
loadClass: 'container',
highlight: 'newBorder'
}
});
</script>
</body>
</html>
Appreciate it if you can point out my mistake.
Thanks
Just change the class binding the array syntax instead of object :
<span v-bind:class="[loadClass,highlight]">
<!DOCTYPE HTML>
<html>
<head>
<title>Intro to v-bind</title>
<meta charset="UTF-8">
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<style>
.container {
background: #cecece;
}
.newBorder {
border: 5px solid yellow;
}
</style>
</head>
<body>
<div id="app">
<img v-bind:src="'assets/images/look.jpg'" v-bind:alt="'illustration of the word -Look-'" v-bind:title="'Look'">
<span v-bind:class="[loadClass,highlight]">
look at me!
</span>
</div>
<script>
var app = new Vue({
el: '#app',
data: {
loadClass: 'container',
highlight: 'newBorder'
}
});
</script>
</body>
</html>
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 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.
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