<labeledinput id="username">Username: </labeledinput>
Will render like:
<div><label for="username">Username: </label><input type="text" id="username"></div>
<div id="app">
<labeledinput id="username">Username: </labeledinput>
</div>
<script>
var vm = new Vue({
el: '#app'
});
// Example case
console.log(document.getElementById("app").innerHTML);
</script>
I know this is a very stupid question. but I can't get a concept of Vue.js
Thanks,
The way more simple to create a component is:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<div id="app">
<div>
<label-input v-model="username">
<span>Username</span>
</label-input>
<span>Username is {{ username }}</span>
</div>
</div>
<script>
Vue.component('label-input', {
props: ['value'],
template: `
<div>
<label>
<slot></slot>
<input type="text" :value="value" #input="$emit('input', $event.target.value)" />
</label>
</div>`,
});
new Vue({
el: '#app',
data() {
return {
username: '',
};
},
});
</script>
</body>
</html>
Related
We have a small project at which I want to create a login page that takes data from a vue data list and if the data corresponds with the username and passwords introduced in html it will load a new page. I don't exactly know how to properly take and check the data from the vue data list and I searched in the documentation for a while but I got lost and didn't find how exactly to do it so any help would be awesome.
This is the page:
<!DOCTYPE html>
<html>
<head>
<meta content="text/html;charset=utf-8" http-equiv="Content-Type">
<meta content="utf-8" http-equiv="encoding">
<title>Login Page</title>
<link rel="stylesheet" type="text/css" href="style.css"/>
<script type="text/javascript" src="libs/vue/vue.js"></script>
<script type="text/javascript" src="libs/axios/axios.js"></script>
<script src="login.js" defer></script>
</head>
<body id="indexbody">
<div class="Login" id="Login">
<div class="container">
<h1>LOGIN</h1>
<form id="login-form" method="post">
<div class="text-field">
<input type="text" name="username" required autocomplete="off"/>
<span></span>
<label for="username"><b>Username</b></label>
</div>
<div class="text-field">
<input type="password" name="password" required autocomplete="off"/>
<span></span>
<label for="password"><b>Password</b></label>
</div>
<div class="LoginBTN">
<input type="button" value="Login" id="loginBTN" onclick="validate(this.form)"/>
</div>
</form>
</div>
</div>
</body>
</html>
Here is the js file:
var login = new Vue({
el: "#Login",
data: {
loginUsers: [{
"username":"admin",
"password":"admin"
},
{
"username":"Razvan",
"password":"parolamea"
}]
},
methods: {
}
});
function validate(form){
var un=form.username.value;
var pw=form.password.value;
for(var users in loginUsers){
if(un==users.username && pw==users.password){
window.location='table.html';
return;
}
else{
alert("Login failed");
}
}
}
For use the Vue instance variables you have to bind some model variables to the inputs, and move the validate function to a method of the Vue instance. Something like this:
for the html file:
<!DOCTYPE html>
<html>
<head>
<meta content="text/html;charset=utf-8" http-equiv="Content-Type">
<meta content="utf-8" http-equiv="encoding">
<title>Login Page</title>
<link rel="stylesheet" type="text/css" href="style.css"/>
<script type="text/javascript" src="libs/vue/vue.js"></script>
<script type="text/javascript" src="libs/axios/axios.js"></script>
<script src="login.js" defer></script>
</head>
<body id="indexbody">
<div class="Login" id="Login">
<div class="container">
<h1>LOGIN</h1>
<form id="login-form" method="post">
<div class="text-field">
<input v-model="username" type="text" name="username" required autocomplete="off"/>
<span></span>
<label for="username"><b>Username</b></label>
</div>
<div class="text-field">
<input v-model="password" type="password" name="password" required autocomplete="off"/>
<span></span>
<label for="password"><b>Password</b></label>
</div>
<div class="LoginBTN">
<input type="button" value="Login" id="loginBTN" #click="validate()"/>
</div>
</form>
</div>
</div>
</body>
</html>
and this for the js file:
var login = new Vue({
el: "#Login",
data: {
username: '',
password: '',
loginUsers: [{
"username":"admin",
"password":"admin"
},
{
"username":"Razvan",
"password":"parolamea"
}]
},
methods: {
validate() {
const un = this.username;
const pw = this.password;
for(var userIndex in this.loginUsers){
const user = this.loginUsers[userIndex];
if(un==user.username && pw==user.password){
window.location='table.html';
return;
}
}
alert("Login failed");
}
}
});
I have a minimal Vue app:
<!DOCTYPE html>
<html>
<head>
<meta charset='utf-8'>
<meta name='viewport' content='width=device-width, initial-scale=1, shrink-to-fit=no'>
<meta http-equiv='x-ua-compatible' content='ie=edge'>
<!-- 1. Link Vue Javascript -->
<script src='https://unpkg.com/vue/dist/vue.js'></script>
<!-- 2. Link VCalendar Javascript (Plugin automatically installed) -->
<script src='https://unpkg.com/v-calendar'></script>
<!--3. Create the Vue instance-->
<script>
window.onload = function(){
new Vue({
el: '#app',
data: {
},
template: ''
})
}
</script>
</head>
<body>
<div id='app'>
</div>
</body>
</html>
and I want to show the date picker from https://vcalendar.io/examples/datepickers.html#button-dropdown but is only specified as template.
What are the steps to display that date picker inside my application?
new Vue({
el: '#app',
data: () => ({
selectedDate: null
}),
template: `
<div>
<v-date-picker class="inline-block" v-model="selectedDate">
<template v-slot="{ inputValue, togglePopover }">
<div class="flex items-center">
<button #click="togglePopover()">
Pick date
</button>
<input
:value="inputValue"
readonly
/>
</div>
</template>
</v-date-picker>
</div>
`
})
<!-- 1. Link Vue Javascript -->
<script src='https://unpkg.com/vue/dist/vue.js'></script>
<!-- 2. Link VCalendar Javascript (Plugin automatically installed) -->
<script src='https://unpkg.com/v-calendar'></script>
<div id='app'>
</div>
I'm just beginning to learn view and am practicing using it, but I keep getting the errors "vue was used before it was defined" and "Vue is not defined". Ive uploaded what I have in my html and my js file.
var app = new Vue();
app({
el: '#app',
data: {
product: 'Socks'
}
});
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Vue practice</title>
<script src="https://cdn.jsdelivr.net/npm/vue#2.5.13/dist/vue.js"></script>
</head>
<body>
<div id="app">
<div class="product-image">
<img src="" />
</div>
<div class="product-info">
<h1>{{ product }}</h1>
</div>
</div>
</body>
</html>
You just need to put those parameters into your Vue() constructor
var app = new Vue({
el: '#app',
data: {
product: 'Socks'
}
});
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Vue practice</title>
<script src="https://cdn.jsdelivr.net/npm/vue#2.5.13/dist/vue.js"></script>
</head>
<body>
<div id="app">
<div class="product-image">
<img src="" />
</div>
<div class="product-info">
<h1>{{ product }}</h1>
</div>
</div>
</body>
</html>
How can I initialize new Vue instance, mount it to existing dom element, and use this element's html as component's (or app's) content?
Here is an example project https://codesandbox.io/s/white-darkness-f3v80
<div id="app">
<p>This is slot text from index.html</p>
<template slot="foo">Also should be parsed as named slot</template>
</div>
Element div#app (index.html) may contain default slot, or other kind of slots (scoped etc). And App.vue should parse this html into relevant slots.
Try something like this:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<div id="app">
<div>
<any-component>
<p>This is slot text from index.html</p>
<template v-slot:foo>
Also should be parsed as named slot
</template>
</any-component>
</div>
</div>
<script>
Vue.component('any-component', {
template: `
<div>
<slot name="default"></slot>
<slot name="foo"></slot>
</div>`,
});
new Vue({
el: '#app',
data() {
return {};
},
});
</script>
</body>
</html>
Are you looking for it?
I need to change the {{message}} on the click of a button with a alert box. No alert box is showing and the message is also not changing.
I am new to vue world, the other examples are working but there is a problem with this file only.
I have used the directive "v-once" on the message tag inside the <h1> tag, the <h2> doesn't have "v-once".
Please reply me what I have done wrong in the code below.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Vue.js Tutorial | Directives</title>
<script src="https://unpkg.com/vue#2.0.3/dist/vue.js"></script>
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
</head>
<body>
<div id="app">
<h1 v-once>{{message}}</h1>
<h2>{{message}}</h2>
<h5 v-show="viewed" v-html="intro"></h5>
</div>
<button #click="rewrite" type="button" name="button" >Change</button>
</body>
<script>
var app = new Vue({
el: '#app',
data: {
message: 'Hello Vue World',
intro: 'Welcome to the Tutorial <small>It is all about Vue.js</small>',
viewed: true,
},
methods: {
rewrite: function () {
alert('Button Clicked!'),
this.message = 'Bye vue World!!!',
},
},
});
</script>
</html>
The problem with your code is that you put the button outside of div#app so the Vue instance doesn't affect it. Just move the button to be inside div#app and it'll work
<body>
<div id="app">
<h1 v-once>{{message}}</h1>
<h2>{{message}}</h2>
<h5 v-show="viewed" v-html="intro"></h5>
// move button into here
<button #click.prevent="rewrite" type="button" name="button">Change</button>
</div>
</body>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Vue.js Tutorial | Directives</title>
<script src="https://cdn.jsdelivr.net/npm/vue#2.6.11"></script>
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"
integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
</head>
<body>
<div id="app">
<h1 v-once>{{message}}</h1>
<h2>{{message}}</h2>
<h5 v-show="viewed" v-html="intro"></h5>
<button #click.prevent="rewrite" type="button" name="button">Change</button>
</div>
</body>
<script>
var app = new Vue({
el: '#app',
data: {
message: 'Hello Vue World',
intro: 'Welcome to the Tutorial <small>It is all about Vue.js</small>',
viewed: true,
},
methods: {
rewrite: function() {
alert('Button Clicked!')
this.message = 'Bye vue World!!!'
},
},
});
</script>
</html>