Updated April 19, 2023
Introduction to Vue.js Form
Vue.js form is defined as the directive which is used to create the two-way data bindings from the user input data including the user-defined or pre-defined tags and elements called input elements, textboxes, text areas and even though select elements also the form automatically choosed the correct path for updating the elements will based upon the user-defined inputs. It may be any of the types it follows the V-model (both model and view) layers in the application by using the Vue instance it will store and fetch the values from the backend database.
Syntax of Vue.js Form
Generally, JavaScript and its frameworks have built-in methods and usages likewise Vue.js form is one of the use of virtual DOM and its core part is mainly focused on the view layer so is used for the frontend development projects.
The Syntax for the Vue.js form is as follows:
<html>
<head>
<script type="text/javascript" src="js/vue.js"></script>
</head>
<body>
<script>
var v=new Vue({
----some logics write for to create the vue instance---
});
---some other UI html elements codes and its attributes based on the requirements---
</script>
</body>
</html>Above code is used for creating the front end application by using Vue.js it includes the html <script> tag for adding the js file in the “src” attribute used for calling the js classes and its behaviours.
How does Form work in Vue.js?
- By using Vue.js codes we can develop the interactive web application interfaces in open source platform and it also made the web development in easy manner. Vue.js is mainly focused on the view layer and it can be used for both small and large web applications without any issues. Vue.js uses html, js and css with three different categories are separately in beginning stage is very useful for understanding the concepts and adopted with the Vue.js styles. Vue.js have its own templates it also been used in many purposes and is very easy for to built-in applications.
- Vue.js is used for the virtual dom which can makes it for faster execution the virtual dom basically javascript object is created which is same as the real document object model (DOM) any time a changes or modifications to be made to the DOM type the javascript object is created and the changes are made and later both the types as well as javascript objects are to be compared and the final changes are updated in the real DOM. The Vue.js uses vue-cli,CDN/npm packages these are very useful and easiest way to implement the projects set up with all the require basic requirements.
- In Vue.js is also a developing framework and also it takes the good parts from other javascript frameworks. The form validation is natively supported with using all the browsers but sometimes some different browsers handle those things in the similar manner it makes relying on it with bit. Even though validation is supported perfectly when there are may be many times it needs custom validations both automatically and more manually vue-based solutions may be more appropriate than others. By using some custom validations it makes the web applications to be perfect and most intense regarding with some situations like political and religious arguments.
Examples of Vue.js Form
Given below are the examples of Vue.js Form:
Example #1
Code:
<!DOCTYPE html>
<html>
<head>
<style>
.input {
margin-left: 13px;
width: 54px;
}
.input[type=submit] {
width: 107px;
}
</style>
</head>
<body bgcolor="blue">
<form
id="c"
@submit="form1"
action="https://vuejs.org/"
method="post"
novalidate="true"
>
<p v-if="Error">
<b>Welcome USer Please validate it</b>
<ul>
<li v-for="Errors and Exceptions">{{ Error and Exceptions }}</li>
</ul>
</p>
<p>
Welcome To My Domain
</p>
<p>
<input
v-model.number="first"
type="number"
name="example1"
> Example1 <br/>
<input
v-model.number="second"
type="number"
name="example2"
> Example2 <br/>
<input
v-model.number="third"
type="number"
name="example3"
> Example3 <br/>
<input
v-model.number="four"
type="number"
name="example4"
> Example4 <br/>
<input
v-model.number="five"
type="number"
name="example5"
> Example5 <br/>
</p>
<p>
Total: {{sum}}
</p>
<p>
<input
type="submit"
value="Submit"
>
</p>
</form>
<script>
const c = new Vue({
l: '#c',
d:{
errors: [],
first: 0,
second: 0,
third: 0,
four: 0,
five: 0
},
computed: {
sum: function () {
return Number(this.first) +
Number(this.second) +
Number(this.third) +
Number(this.four+this.five);
}
},
methods:{
form1: function (e) {
this.errors = [];
if (this.total != 100) {
this.errors.push('Please type any valid inputs from the range 0 to 100!');
}
if (!this.errors.length) {
return true;
}
e.preventDefault();
}
}
})
</script>
</body>
</html>Output:
Example #2
Code:
<!DOCTYPE html>
<html>
<head>
<script src="//unpkg.com/vue"></script>
<script type="text/javascript" src="//unpkg.com/[email protected]"></script>
<link rel="stylesheet" type="text/css" href="//unpkg.com/[email protected]/dist/vfg.css">
<link rel="stylesheet" type="text/css" href="style.css">
<script type="text/javascript" src="//rawgit.com/fergaldoyle/vue-form/master/dist/vue-form.min.js"></script>
<link rel="stylesheet" type="text/css" href="//maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css">
</head>
<body>
<form id="example">
<p>
<input type="text" v-model="first">
{{first}}
</p>
<p>
<input type="checkbox" v-model="second">
{{second ? "yes" : "no"}}
</p>
<p>
<input type="radio" name="picked" value="one" v-model="third">
<input type="radio" name="picked" value="two" v-model="third">
{{third}}
</p>
<p>
<select v-model="four">
<option>demo1</option>
<option>demo2</option>
</select>
{{four}}
</p>
<p>
<select v-model="five" multiple>
<option>demo1</option>
<option>demo2</option>
<option>demo3</option>
</select>
{{five}}
</p>
<p><pre>data: {{$data | json 2}}</pre></p>
</form>
<script>
const c=new Vue({
el: '#example',
data: {
first : 'Welcome USER!',
second : true,
third : 'demo1',
four : 'demo2',
five: ['demo1', 'demo3']
}
})
</script>
</body>
</html>Output:
Example #3
Code:
<html>
<body>
<style>
#databinding{
padding: 22px 11px 14px 46px;
margin: 1 2 27px 4;
width: auto; }
</style>
<div id = "databinding" style = "">
<h1>Customer Details</h1>
<span>ID</span>
<input type = "text" placeholder = "numbere" v-model = "id"/>
<button v-on:click = "result" v-bind:style = "s">Add</button>
<br/>
<br/>
<user
v-for = "(i, j) in demo"
v-bind:it = "it"
v-bind:in = "j"
v-bind:trt = "i"
v-bind:k = "i.id"
v-on:rem = "demo.splice(j, 1)">
</user>
</div>
<script type = "text/javascript">
Vue.component('user',{
props: ['itr', 'j'],
data: function() {
return {
s : {
backgroundColor:this.getcolor(),
fontSize : 22
}
}
},
methods:{
getcolor : function() {
if (this.j % 2) {
return "green";
} else {
return "red";
}
}
}
});
var v = new Vue({
el: '#databinding',
data: {
id:'',
demo:[],
},
methods :{
result : function() {
this.demo.push({
id: this.id
});
this.id;
}
}
});
</script>
</body></html>Output:
Conclusion
In Vue.js is easiest for to develop the interactive web interfaces its focus is more on the presentation layer which is the front end because easily integrated with other projects and libraries. Installation is very simple and easily build apps for beginners.
Recommended Articles
This is a guide to Vue.js Form. Here we discuss the introduction, syntax, and working of form in Vue.js along with examples and code implementation. You may also have a look at the following articles to learn more –
