VueJS āĻ events āĻāĻŋ?
VueJS āĻ events āĻŦā§āĻāĻžāĻ° āĻāĻā§ , āĻāĻŽāĻžāĻĻā§āĻ°āĻā§ JavaScript āĻāĻ° event āĻāĻŋ āĻ¸ā§āĻāĻŋ āĻŦā§āĻāĻ¤ā§ āĻšāĻŦā§āĨ¤ āĻŽā§āĻ˛āĻ¤āĻ āĻāĻ¯āĻŧā§āĻŦ āĻĒā§āĻā§ (āĻĄāĻā§āĻŽā§āĻ¨ā§āĻ āĻŦāĻž āĻŦā§āĻ°āĻžāĻāĻāĻžāĻ°ā§) āĻāĻāĻāĻžāĻ°ā§āĻ° āĻŽāĻžāĻāĻ¸ , āĻā§āĻŦā§āĻ°ā§āĻĄ āĻ āĻĨāĻŦāĻž āĻāĻžāĻāĻĒā§āĻ¯āĻžāĻĄ āĻāĻ° āĻŦāĻŋāĻāĻŋāĻ¨ā§āĻ¨ āĻŽā§āĻāĻŽā§āĻ¨ā§āĻ āĻŦāĻž āĻāĻā§āĻāĻŋāĻāĻŋāĻāĻŋ āĻ¯ā§āĻŽāĻ¨ onclick, ondbclick, onmouseover,onmouseout, onload, hover. onblur,onchange ,onkeydown āĻāĻ¤ā§āĻ¯āĻžāĻĻāĻŋ āĻāĻāĻāĻŋāĻāĻŋāĻāĻŋ āĻā§āĻ˛ā§āĻā§ JavaScript Events āĻŦāĻ˛ā§āĨ¤ āĻ āĻŋāĻ āĻāĻāĻ āĻ°āĻāĻŽ events āĻā§āĻ˛ā§ āĻāĻŽāĻ°āĻž VueJS āĻ āĻĻā§āĻāĻ¤ā§ āĻĒāĻžāĻāĨ¤ VueJS āĻ v-on directive āĻĻāĻŋāĻ¯āĻŧā§ DOM events āĻā§āĻ˛ā§ āĻ¸āĻŋāĻ˛ā§āĻā§āĻ āĻāĻ°ā§ , āĻāĻŦāĻ VueJS āĻāĻ° property, method āĻā§āĻ˛ā§ apply āĻāĻ°ā§āĨ¤
āĻāĻŦāĻžāĻ° āĻāĻ˛ā§āĻ¨ VueJS event āĻĻāĻŋāĻ¯āĻŧā§ āĻāĻāĻāĻž āĻāĻĻāĻžāĻšāĻ°āĻŖ āĻĻā§āĻāĻž āĻ¯āĻžāĻ:
<html>
<head>
<title>VueJs Events</title>
<script type = "text/javascript" src = "https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<div id="example-1">
<button v-on:click="counter += 1">Add 1</button>
<p>The button above has been clicked {{ counter }} times.</p>
</div>
<script type = "text/javascript">
var example1 = new Vue({
el: '#example-1',
data: {
counter: 0
}
});
</script>
</body>
</html>
Result
āĻāĻāĻžāĻ¨ā§ āĻāĻĒāĻ¨āĻŋ āĻŦāĻžāĻāĻ¨āĻāĻŋ āĻ¯āĻ¤āĻŦāĻžāĻ° āĻā§āĻ˛āĻŋāĻ āĻāĻ°āĻŦā§āĻ¨ , āĻ¤āĻ¤āĻŦāĻžāĻ° āĻāĻ āĻāĻ āĻāĻ°ā§ āĻ¨āĻŽā§āĻŦāĻ° āĻāĻŋ āĻŦāĻžāĻĄāĻŧāĻ¤ā§ āĻĨāĻžāĻāĻŦā§āĨ¤
āĻ¤āĻŦā§ āĻāĻĒāĻ¨āĻŋ āĻāĻžāĻāĻ˛ā§ v-on:click
āĻāĻ° āĻĒāĻ°āĻŋāĻŦāĻ°ā§āĻ¤ā§ @click
āĻ āĻŦā§āĻ¯āĻŦāĻšāĻžāĻ° āĻāĻ°āĻ¤ā§ āĻĒāĻžāĻ°ā§āĻ¨āĨ¤
<html>
<head>
<title>VueJs Events</title>
<script type = "text/javascript" src = "https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<div id="example-1">
<button @click="counter += 1">Add 1</button>
<p>The button above has been clicked {{ counter }} times.</p>
</div>
<script type = "text/javascript">
var example1 = new Vue({
el: '#example-1',
data: {
counter: 0
}
});
</script>
</body>
</html>
āĻāĻŦāĻžāĻ° āĻāĻ˛ā§āĻ¨ mouseover āĻāĻŦāĻ mouseout event āĻĻāĻŋāĻ¯āĻŧā§ āĻāĻāĻāĻž āĻāĻĻāĻžāĻšāĻ°āĻŖ āĻĻā§āĻāĻŋāĨ¤
<html>
<head>
<title>VueJs Events</title>
<script type = "text/javascript" src = "https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<div id = "databinding">
<div v-bind:style = "boxstyle" @mouseover = "changebgcolor" v-on:mouseout = "originalcolor"></div>
</div>
<script type = "text/javascript">
var vm = new Vue({
el: '#databinding',
data: {
boxstyle : {
width:"100px",
height:"100px",
backgroundColor:"red"
}
},
methods : {
changebgcolor : function() {
this.boxstyle.backgroundColor = "green";
},
originalcolor : function() {
this.boxstyle.backgroundColor = "red";
}
},
});
</script>
</body>
</html>
āĻāĻŦāĻžāĻ° āĻāĻĒāĻ¨āĻŋ āĻāĻĒāĻ¨āĻžāĻ° āĻŽāĻžāĻāĻ¸ āĻĒāĻ¯āĻŧā§āĻ¨ā§āĻāĻžāĻ°āĻā§ āĻ˛āĻžāĻ˛ āĻ°āĻā§āĻ° āĻŦāĻā§āĻ¸ā§āĻ° āĻāĻĒāĻ° āĻ¨āĻŋāĻ˛ā§āĻ āĻ¨āĻŋāĻā§āĻ° āĻŽāĻ¤ā§ āĻĢāĻ˛āĻžāĻĢāĻ˛ āĻĻā§āĻāĻ¤ā§ āĻĒāĻžāĻ°āĻŦā§āĻ¨āĨ¤
<html>
<head>
<title>VueJs .key Modifier</title>
<script type = "text/javascript" src = "https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<div id = "databinding">
<input type = "text" v-on:keyup = "showinputvalue" v-bind:style = "styleobj" placeholder = "Enter your name"/>
<h3> {{name}}</h3>
</div>
<script type = "text/javascript">
var vm = new Vue({
el: '#databinding',
data: {
name:'',
styleobj: {
width: "30%",
padding: "12px 20px",
margin: "8px 0",
boxSizing: "border-box"
}
},
methods : {
showinputvalue : function(event) {
this.name=event.target.value;
}
}
});
</script>
</body>
</html>
Output
VueJS .once Event Modifiers
VueJS āĻ v-on attribute āĻ .once āĻ¨āĻžāĻŽā§ āĻāĻāĻāĻŋ modifiers āĻāĻā§ , āĻ¯āĻž āĻĻāĻŋāĻ¯āĻŧā§ āĻāĻĒāĻ¨āĻŋ āĻ¯ā§āĻā§āĻ¨ā§ event āĻā§ āĻļā§āĻ§ā§ āĻŽāĻžāĻ¤ā§āĻ° āĻāĻāĻŦāĻžāĻ° execute āĻāĻ°āĻ¤ā§ āĻĒāĻžāĻ°āĻŦā§āĻ¨āĨ¤ āĻ¨āĻŋāĻā§āĻ° āĻāĻĻāĻžāĻšāĻ°āĻŖāĻāĻŋ āĻĻā§āĻā§āĻ¨ :
<html>
<head>
<title>VueJs Event Modifieres</title>
<script type = "text/javascript" src = "https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<div id = "databinding">
<button v-on:click.once = "buttonclickedonce" v-bind:style = "styleobj">Click Once</button>
Output:{{clicknum}}
<br/><br/>
<button v-on:click = "buttonclicked" v-bind:style = "styleobj">Click Me</button>
Output:{{clicknum1}}
</div>
<script type = "text/javascript">
var vm = new Vue({
el: '#databinding',
data: {
clicknum : 0,
clicknum1 :0,
styleobj: {
backgroundColor: '#2196F3!important',
cursor: 'pointer',
padding: '8px 16px',
verticalAlign: 'middle',
}
},
methods : {
buttonclickedonce : function() {
this.clicknum++;
},
buttonclicked : function() {
this.clicknum1++;
}
}
});
</script>
</body>
</html>
Output
āĻ˛āĻā§āĻˇā§āĻ¯ āĻāĻ°āĻŦā§āĻ¨ click once āĻŦāĻžāĻāĻ¨ā§āĻ° āĻļā§āĻ§ā§ āĻāĻāĻŦāĻžāĻ° value āĻŦā§āĻĻā§āĻ§āĻŋ āĻĒāĻžāĻā§āĻā§, āĻāĻ° āĻ āĻ¨ā§āĻ¯ āĻŦāĻžāĻāĻ¨āĻāĻŋ āĻĒā§āĻ°āĻ¤āĻŋāĻŦāĻžāĻ°āĻ ā§§ āĻāĻ°ā§ āĻŦā§āĻĻā§āĻ§āĻŋ āĻĒāĻžāĻā§āĻā§āĨ¤
VueJS .prevent Event Modifiers
.prevent Event Modifier āĻŦā§āĻ¯āĻŦāĻšāĻžāĻ° āĻāĻ°ā§ , āĻāĻĒāĻ¨āĻŋ āĻ¯ā§āĻā§āĻ¨ā§ āĻāĻā§āĻ¨ā§āĻ āĻā§ prevent āĻāĻ°āĻ¤ā§ āĻĒāĻžāĻ°āĻŦā§āĻ¨āĨ¤ āĻ¤āĻžāĻšāĻ˛ā§ āĻāĻ˛ā§āĻ¨ āĻĒā§āĻ°āĻĨāĻŽā§ .prevent event modifier āĻŦā§āĻ¯āĻŦāĻšāĻžāĻ° āĻ¨āĻž āĻāĻ°ā§ āĻāĻāĻāĻž āĻāĻĻāĻžāĻšāĻ°āĻŖ āĻĻā§āĻāĻž āĻ¯āĻžāĻ:
<html>
<head>
<title>VueJs .prevent Modifier</title>
<script type = "text/javascript" src = "js/vue.js"></script>
</head>
<body>
<div id = "databinding">
<a href = "http://www.google.com" v-on:click = "clickme" target = "_blank" v-bind:style = "styleobj">Click Me</a>
</div>
<script type = "text/javascript">
var vm = new Vue({
el: '#databinding',
data: {
clicknum : 0,
clicknum1 :0,
styleobj: {
color: '#4CAF50',
marginLeft: '20px',
fontSize: '30px'
}
},
methods : {
clickme : function() {
alert("Anchor tag is clicked");
}
}
});
</script>
</body>
</html>
Output
āĻāĻāĻ¨ āĻāĻŽāĻ°āĻž āĻ¯āĻĻāĻŋ clickme āĻ˛āĻŋāĻāĻā§ āĻā§āĻ˛āĻŋāĻ āĻāĻ°āĻŋ , āĻ¤āĻžāĻšāĻ˛ā§ āĻāĻāĻŋ āĻāĻŽāĻžāĻĻā§āĻ°āĻā§ âAnchor tag is clickedâ āĻāĻāĻāĻž alert āĻĻāĻŋāĻŦā§ āĻāĻŦāĻ āĻ¨āĻ¤ā§āĻ¨ tab āĻ https://www.google.com site āĻ āĻ¯āĻžāĻŦā§āĨ¤ āĻ¨āĻŋāĻā§āĻ° screenshots āĻāĻŋ āĻĻā§āĻā§āĻ¨āĨ¤
āĻāĻāĻ¨ āĻāĻāĻŋ āĻāĻāĻāĻŋ āĻ¸āĻžāĻ§āĻžāĻ°āĻŖ āĻāĻĒāĻžāĻ¯āĻŧ āĻšāĻŋāĻ¸āĻžāĻŦā§ āĻāĻžāĻ āĻāĻ°ā§, āĻ āĻ°ā§āĻĨāĻžāĻ¤ā§ āĻ˛āĻŋāĻā§āĻāĻāĻŋ āĻāĻŽāĻ°āĻž āĻ¯ā§āĻāĻžāĻŦā§ āĻāĻžāĻāĻŦā§ āĻ¸ā§āĻāĻžāĻŦā§ āĻāĻŽāĻžāĻĻā§āĻ° āĻāĻ¨ā§āĻ¯ āĻā§āĻ˛ā§ āĨ¤ āĻāĻŽāĻ°āĻž āĻ˛āĻŋāĻā§āĻāĻāĻŋ āĻ¨āĻž āĻāĻĒā§āĻ¨ āĻāĻ°āĻ¤ā§ āĻāĻžāĻāĻ˛ā§, āĻ¨āĻŋāĻŽā§āĻ¨āĻ˛āĻŋāĻāĻŋāĻ¤ āĻā§āĻĄā§āĻ° āĻŽāĻ¤ā§ āĻāĻŽāĻžāĻĻā§āĻ° âprevent modifier āĻ¯ā§āĻā§āĻ¤ āĻāĻ°āĻ¤ā§ āĻšāĻŦā§āĨ¤
<a href = "http://www.google.com" v-on:click.prevent = "clickme" target = "_blank" v-bind:style = "styleobj">Click Me</a>
āĻāĻāĻ¨ āĻ¯āĻĻāĻŋ āĻāĻŽāĻ°āĻž āĻŦāĻžāĻāĻ¨ā§ āĻā§āĻ˛āĻŋāĻ āĻāĻ°āĻŋ , āĻāĻāĻŋ āĻāĻŽāĻžāĻĻā§āĻ°āĻā§ āĻāĻāĻāĻž āĻāĻ˛āĻžāĻ°ā§āĻ āĻŽā§āĻ¸ā§āĻ āĻĻāĻŋāĻŦā§, āĻāĻŋāĻ¨ā§āĻ¤ā§ āĻ˛āĻŋāĻāĻāĻāĻŋ āĻāĻĒā§āĻ¨ āĻšāĻŦā§āĻ¨āĻžāĨ¤ āĻāĻžāĻ°āĻŖ .prevent modifier āĻāĻŽāĻžāĻĻā§āĻ° āĻāĻ¨ā§āĻ¯ āĻ˛āĻŋāĻāĻāĻāĻŋ āĻāĻĒā§āĻ¨ āĻāĻ°āĻž prevent āĻāĻ°āĻŦā§āĨ¤
āĻ¤āĻžāĻšāĻ˛ā§ āĻāĻ˛ā§āĻ¨ āĻ¸āĻŽā§āĻĒā§āĻ°ā§āĻŖ āĻā§āĻĄāĻāĻŋ āĻĻā§āĻāĻž āĻ¯āĻžāĻ:
<html>
<head>
<title>VueJs .prevent Modifier</title>
<script type = "text/javascript" src = "js/vue.js"></script>
</head>
<body>
<div id = "databinding">
<a href = "http://www.google.com" v-on:click.prevent = "clickme" target = "_blank" v-bind:style = "styleobj">Click Me</a>
</div>
<script type = "text/javascript">
var vm = new Vue({
el: '#databinding',
data: {
clicknum : 0,
clicknum1 :0,
styleobj: {
color: '#4CAF50',
marginLeft: '20px',
fontSize: '30px'
}
},
methods : {
clickme : function() {
alert("Anchor tag is clicked");
}
}
});
</script>
</body>
</html>
Output
āĻāĻāĻ¨ āĻāĻĒāĻ¨āĻŋ āĻļā§āĻ§ā§ alert āĻāĻŋ āĻĻā§āĻāĻ¤ā§ āĻĒāĻžāĻŦā§āĻ¨ , āĻāĻŋāĻ¨ā§āĻ¤ā§ āĻĒā§āĻ āĻ°āĻŋāĻĄāĻžāĻāĻ°ā§āĻā§āĻ āĻšāĻŦā§āĻ¨āĻžāĨ¤
VueJS Key Event Modifiers
VueJS āĻ key modifier āĻĻāĻŋāĻ¯āĻŧā§ āĻāĻŽāĻ°āĻž event handling āĻā§ control āĻāĻ°āĻ¤ā§ āĻĒāĻžāĻ°āĻŋāĨ¤ āĻ§āĻ°ā§āĻ¨ āĻāĻŽāĻžāĻĻā§āĻ° āĻāĻāĻāĻž textbox āĻāĻā§ , āĻāĻŦāĻ āĻāĻŽāĻ°āĻž āĻ¯āĻĻāĻŋ āĻ¸ā§āĻ textbox āĻ āĻā§āĻ¨ā§ āĻāĻŋāĻā§ āĻ˛āĻŋāĻā§ āĻāĻ¨ā§āĻāĻžāĻ° āĻĻā§āĻ , āĻ¤āĻžāĻšāĻ˛ā§ āĻāĻāĻāĻž āĻŽā§āĻĨāĻĄ āĻāĻ˛ āĻšāĻŦā§āĨ¤ āĻāĻ° āĻāĻ āĻ§āĻ°āĻŖā§āĻ° āĻāĻžāĻā§āĻ° āĻāĻ¨ā§āĻ¯ā§ VueJS āĻ key modifier āĻā§āĻ˛ā§āĻā§ āĻŦā§āĻ¯āĻŦāĻšāĻžāĻ° āĻāĻ°āĻ¤ā§ āĻĒāĻžāĻ°āĻŋāĨ¤
VueJS āĻ key modifier āĻāĻ° syntax āĻ āĻŋāĻ āĻ¨āĻŋāĻā§āĻ° āĻŽāĻ¤ā§ āĻšāĻŦā§āĨ¤
1 | v-on.eventname.keyname |
āĻ¤āĻŦā§ āĻāĻĒāĻ¨āĻŋ āĻāĻžāĻāĻ˛ā§ āĻāĻāĻžāĻ§āĻŋāĻ key āĻ¯ā§āĻā§āĻ¤ āĻāĻ°āĻ¤ā§ āĻĒāĻžāĻ°ā§āĻ¨āĨ¤
1 | v-on.eventname.keyname.anotherkeyname |
āĻāĻ°ā§ āĻāĻžāĻ˛ā§ āĻāĻžāĻŦā§ āĻŦā§āĻāĻžāĻ° āĻāĻ¨ā§āĻ¯ āĻ¨āĻŋāĻā§āĻ° āĻā§āĻĄāĻāĻŋ āĻĻā§āĻā§āĻ¨ :
1 | <input type = "text" v-on:keyup.enter = "showinputvalue" /> |
āĻāĻāĻžāĻ§āĻŋāĻ key āĻ¯ā§āĻā§āĻ¤ āĻāĻĻāĻžāĻšāĻ°āĻŖ :
1 | <input type = "text" v-on:keyup.ctrl.enter = "showinputvalue" /> |
āĻāĻŦāĻžāĻ° āĻāĻāĻāĻž āĻĒāĻ°āĻŋāĻĒā§āĻ°ā§āĻ¨ āĻāĻĻāĻžāĻšāĻ°āĻŖ āĻĻā§āĻāĻž āĻ¯āĻžāĻ:
<html>
<head>
<title>VueJs .key Modifier</title>
<script type = "text/javascript" src = "https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<div id = "databinding">
<input type = "text" v-on:keyup.enter = "showinputvalue" v-bind:style = "styleobj" placeholder = "Enter your name"/>
<h3> {{name}}</h3>
</div>
<script type = "text/javascript">
var vm = new Vue({
el: '#databinding',
data: {
name:'',
styleobj: {
width: "30%",
padding: "12px 20px",
margin: "8px 0",
boxSizing: "border-box"
}
},
methods : {
showinputvalue : function(event) {
this.name=event.target.value;
}
}
});
</script>
</body>
</html>
Output
VueJS āĻ Form Input Bindings
VueJS āĻ form āĻāĻ° input, textarea, and select element āĻā§āĻ˛ā§āĻ¤ā§ two-way data bindings āĻāĻ° āĻāĻ¨ā§āĻ¯ā§ āĻāĻŽāĻ°āĻž v-model directive āĻāĻŋ āĻŦā§āĻ¯āĻŦāĻšāĻžāĻ° āĻāĻ°āĻ¤ā§ āĻĒāĻžāĻ°āĻŋāĨ¤ āĻāĻ˛ā§āĻ¨ āĻĒā§āĻ°āĻ¤ā§āĻ¯ā§āĻāĻāĻŋ form input āĻāĻ° āĻāĻ˛āĻžāĻĻāĻž āĻāĻĻāĻžāĻšāĻ°āĻŖ āĻĻāĻŋāĻ¯āĻŧā§ āĻŦāĻŋāĻˇāĻ¯āĻŧāĻāĻž āĻŦā§āĻā§ āĻ¨ā§āĻ¯āĻŧāĻž āĻ¯āĻžāĻ:
Text Input Example
<html>
<head>
<title>Form Input Bindings</title>
<script type = "text/javascript" src = "https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<div id="example-1">
<input v-model="message" placeholder="edit me">
<p>Message is: {{ message }}</p>
<script>
new Vue({
el: '#example-1',
data: {
message: ''
}
})
</script>
</body>
</html>
Output
textarea Input Example
<html>
<head>
<title>Form Input Bindings</title>
<script type = "text/javascript" src = "https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<div id="example-1">
<span>Multiline message is:</span>
<p style="white-space: pre-line;">{{ message }}</p>
<br>
<textarea v-model="message" placeholder="add multiple lines"></textarea>
</div>
<script>
new Vue({
el: '#example-1',
data: {
message: ''
}
})
</script>
</body>
</html>
Output
checkbox Input Example
<html>
<head>
<title>VueJs Form Input Bindings</title>
<script type = "text/javascript" src = "https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<div id="example-1">
<input type="checkbox" id="checkbox" v-model="checked">
<label for="checkbox">{{ checked }}</label>
</div>
<script>
new Vue({
el: '#example-1',
data: {
checked: false
}
})
</script>
</body>
</html>
Output
Multiple checkboxes Form input binding example
<html>
<head>
<title>VueJs Form Input Bindings</title>
<script type = "text/javascript" src = "https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<div id='example-1'>
<input type="checkbox" id="jack" value="Jack" v-model="checkedNames">
<label for="jack">Jack</label>
<input type="checkbox" id="john" value="John" v-model="checkedNames">
<label for="john">John</label>
<input type="checkbox" id="mike" value="Mike" v-model="checkedNames">
<label for="mike">Mike</label>
<br>
<span>Checked names: {{ checkedNames }}</span>
</div>
<script>
new Vue({
el: '#example-1',
data: {
checkedNames: []
}
})
</script>
</body>
</html>
Output
Multiple Radio Button Form input binding example
<html>
<head>
<title>VueJs Form Input Bindings</title>
<script type = "text/javascript" src = "https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<div id='example-1'>
<input type="radio" id="one" value="One" v-model="picked">
<label for="one">One</label>
<br>
<input type="radio" id="two" value="Two" v-model="picked">
<label for="two">Two</label>
<br>
<span>Picked: {{ picked }}</span>
</div>
<script>
new Vue({
el: '#example-1',
data: {
picked: ''
}
})
</script>
</body>
</html>
Output
Select Box Form input binding example
<html>
<head>
<title>VueJs Form Input Bindings</title>
<script type = "text/javascript" src = "https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<div id='example-1'>
<select v-model="selected">
<option disabled value="">Please select one</option>
<option>A</option>
<option>B</option>
<option>C</option>
</select>
<span>Selected: {{ selected }}</span>
</div>
<script>
new Vue({
el: '#example-1',
data: {
selected: ''
}
})
</script>
</body>
</html>
Output
Multiple Select Box Form input binding example
<html>
<head>
<title>VueJs Form Input Bindings</title>
<script type = "text/javascript" src = "https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<div id='example-1'>
<select v-model="selected" multiple>
<option>A</option>
<option>B</option>
<option>C</option>
</select>
<br>
<span>Selected: {{ selected }}</span>
</div>
<script>
new Vue({
el: '#example-1',
data: {
selected: ''
}
})
</script>
</body>
</html>
Output
VueJS āĻ Components āĻāĻŋ?
Components āĻšāĻā§āĻā§ VueJS āĻāĻ° āĻ āĻ¨ā§āĻ¯āĻ¤āĻŽ āĻā§āĻ°ā§āĻ¤ā§āĻŦāĻĒā§āĻ°ā§āĻŖ āĻāĻāĻāĻž features āĻ¯āĻž āĻĻāĻŋāĻ¯āĻŧā§ āĻāĻŽāĻ°āĻž custom element āĻā§āĻ˛ā§ āĻ¤ā§āĻ°āĻŋ āĻāĻ°āĻ¤ā§ āĻĒāĻžāĻ°āĻŋ āĻāĻŦāĻ āĻ¸ā§āĻāĻŋ HTML āĻ (reused) āĻŦāĻžāĻ°āĻŦāĻžāĻ° āĻāĻ°āĻ¤ā§ āĻĒāĻžāĻ°āĻŋāĨ¤
vueJS āĻ Component āĻ¤ā§āĻ°āĻŋ āĻāĻ°āĻ¤ā§ āĻšāĻ˛ā§ Vue.component('nameofthecomponent',{ // options});
āĻāĻ syntax āĻĻāĻŋāĻ¯āĻŧā§ āĻāĻ°āĻ¤ā§ āĻšāĻ¯āĻŧāĨ¤ āĻāĻ° āĻ¯āĻāĻ¨ āĻāĻāĻāĻŋ component āĻ¤ā§āĻ°āĻŋ āĻšāĻ¯āĻŧ , āĻ¤āĻāĻ¨ component āĻ¨āĻžāĻŽ āĻāĻŋ āĻāĻāĻāĻŋ Custom HTML Element āĻšāĻ¯āĻŧā§ āĻ¯āĻžāĻ¯āĻŧ , āĻāĻ° āĻ¸ā§āĻ Custom HTML Element āĻāĻŽāĻ°āĻž āĻĒāĻ°āĻŦāĻ°ā§āĻ¤ā§āĻ¤ā§ HTML āĻ (reused) āĻŦāĻžāĻ°āĻŦāĻžāĻ° āĻāĻ°āĻ¤ā§ āĻĒāĻžāĻ°āĻŋāĨ¤
āĻ¤āĻžāĻšāĻ˛ā§ āĻāĻ˛ā§āĻ¨ āĻāĻŽāĻ°āĻž component āĻĻāĻŋāĻ¯āĻŧā§ āĻāĻāĻāĻž sample code āĻāĻ°āĻŋ , āĻāĻ¤ā§ āĻāĻŽāĻ°āĻž VueJS āĻāĻ° components āĻ¸āĻŽā§āĻĒāĻ°ā§āĻā§ āĻāĻ°ā§ āĻŦāĻŋāĻ¸ā§āĻ¤āĻžāĻ°āĻŋāĻ¤ āĻāĻžāĻ¨āĻ¤ā§ āĻĒāĻžāĻ°āĻŦāĨ¤
<html>
<head>
<title>VueJs Components</title>
<script type = "text/javascript" src = "https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<div id = "component_test">
<testcomponent></testcomponent>
</div>
<div id = "component_test1">
<testcomponent></testcomponent>
</div>
<script type = "text/javascript">
Vue.component('testcomponent',{
template : '<div><h1>This is coming from component</h1></div>'
});
var vm = new Vue({
el: '#component_test'
});
var vm1 = new Vue({
el: '#component_test1'
});
</script>
</body>
</html>
āĻāĻāĻžāĻ¨ā§ āĻĒā§āĻ°āĻĨāĻŽā§ āĻāĻŽāĻ°āĻž component_test āĻāĻŦāĻ component_test1 āĻāĻāĻĄāĻŋ āĻ¸āĻš āĻĻā§āĻāĻŋ div āĻ¤ā§āĻ°āĻŋ āĻāĻ°ā§āĻāĻŋ , āĻ¤āĻžāĻ°āĻĒāĻ° āĻāĻŽāĻ°āĻž āĻ¨āĻŋāĻā§ JavaScript āĻ āĻāĻļā§ Vue Class āĻāĻ° component Method āĻĻāĻŋāĻ¯āĻŧā§ testcomponent āĻ¨āĻžāĻŽā§ āĻāĻāĻāĻž custom HTML āĻ¤ā§āĻ°āĻŋ āĻāĻ°āĻŋāĨ¤ āĻ¤āĻžāĻ°āĻĒāĻ° āĻāĻŽāĻ°āĻž āĻāĻŽāĻžāĻĻā§āĻ° āĻ¤ā§āĻ°ā§ āĻ¨āĻ¤ā§āĻ¨ custom html element āĻāĻŋ āĻĻā§āĻāĻŋ div āĻ āĻĒā§āĻ°āĻĻāĻ°ā§āĻļāĻ¨ā§āĻ° āĻāĻ¨ā§āĻ¯ āĻĻā§āĻāĻŋ vue instance āĻ¤ā§āĻ°ā§ āĻāĻ°āĻŋāĨ¤ āĻāĻāĻ¨ āĻāĻāĻŋ āĻ°āĻžāĻ¨ āĻāĻ°āĻ˛ā§ , āĻĢāĻ˛āĻžāĻĢāĻ˛ āĻ āĻŋāĻ āĻ¨āĻŋāĻā§āĻ° āĻŽāĻ¤ā§ āĻāĻ¸āĻŦā§āĨ¤
āĻāĻŦāĻžāĻ° āĻāĻ˛ā§āĻ¨ Vue Component āĻāĻ° āĻāĻ°ā§āĻāĻāĻŋ āĻāĻĻāĻžāĻšāĻ°āĻŖ āĻĻā§āĻāĻž āĻ¯āĻžāĻ:
<html>
<head>
<title>VueJs .key Modifier</title>
<script type = "text/javascript" src = "https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<div id="components-demo">
<button-counter></button-counter>
<button-counter></button-counter>
</div>
<script type = "text/javascript">
// Define a new component called button-counter
Vue.component('button-counter', {
data: function () {
return {
count: 0
}
},
template: '<button v-on:click="count++">You clicked me {{ count }} times.</button>'
})
new Vue({ el: '#components-demo' })
</script>
</body>
</html>
Output
VueJS āĻāĻ° component data āĻ āĻŦāĻ¸ā§āĻ¯āĻ āĻāĻāĻāĻž āĻĢāĻžāĻā§āĻāĻļāĻ¨ āĻšāĻ¤ā§ āĻšāĻŦā§āĨ¤ āĻāĻāĻžāĻā§ āĻ¸āĻ°āĻžāĻ¸āĻ°āĻŋ object āĻšāĻŋāĻ¸ā§āĻŦā§ āĻŦā§āĻ¯āĻŦāĻšāĻžāĻ° āĻāĻ°āĻž āĻ¯āĻžāĻŦā§āĻ¨āĻžāĨ¤ āĻ āĻ°ā§āĻĨāĻžā§ āĻ¨āĻŋāĻā§āĻ° āĻā§āĻĄā§āĻ° āĻŽāĻ¤ā§ āĻĻā§āĻāĻ¯āĻŧāĻž āĻ¯āĻžāĻŦā§āĻ¨āĻžāĨ¤
VueJS āĻāĻ° component data āĻ āĻŦāĻ¸ā§āĻ¯āĻ āĻāĻāĻāĻž āĻĢāĻžāĻā§āĻāĻļāĻ¨ āĻšāĻ¤ā§ āĻšāĻŦā§āĨ¤ āĻāĻāĻžāĻā§ āĻ¸āĻ°āĻžāĻ¸āĻ°āĻŋ object āĻšāĻŋāĻ¸ā§āĻŦā§ āĻŦā§āĻ¯āĻŦāĻšāĻžāĻ° āĻāĻ°āĻž āĻ¯āĻžāĻŦā§āĻ¨āĻžāĨ¤ āĻ āĻ°ā§āĻĨāĻžā§ āĻ¨āĻŋāĻā§āĻ° āĻā§āĻĄā§āĻ° āĻŽāĻ¤ā§ āĻĻā§āĻāĻ¯āĻŧāĻž āĻ¯āĻžāĻŦā§āĻ¨āĻžāĨ¤
123 | data: { count : 0 } |
āĻāĻĒāĻ¨āĻžāĻā§ āĻ āĻŋāĻ āĻ¨āĻŋāĻā§āĻ° āĻŽāĻ¤ā§ āĻāĻ°ā§ āĻ˛āĻŋāĻāĻ¤ā§ āĻšāĻŦā§āĨ¤
12345 | data: function () { return { count : 0 } } |
VueJS Components Organization
VueJS āĻ Components āĻā§āĻ˛ā§ Nested Tree āĻāĻāĻžāĻ°ā§ āĻĨāĻžāĻā§āĨ¤ āĻ§āĻ°ā§āĻ¨ āĻāĻĒāĻ¨āĻžāĻ° āĻāĻāĻāĻž āĻāĻ¯āĻŧā§āĻŦāĻ¸āĻžāĻāĻ , āĻ¯ā§āĻāĻžāĻ¨ā§ āĻāĻĒāĻ¨āĻžāĻ° header, sidebar āĻāĻŦāĻ content_area āĻāĻ° āĻŽāĻ¤ā§ āĻāĻŋāĻā§ component āĻ°āĻ¯āĻŧā§āĻā§āĨ¤ āĻāĻŦāĻ āĻāĻāĻ¸āĻŦ component āĻāĻ° āĻ āĻ§ā§āĻ¨ā§ āĻāĻā§ āĻāĻŦāĻžāĻ° āĻ¯āĻĨāĻžāĻā§āĻ°āĻŽā§ navigations, links, blog posts āĻāĻ āĻ¸āĻŦ components . āĻāĻ°ā§ āĻāĻžāĻ˛ā§ āĻāĻžāĻŦā§ āĻŦā§āĻāĻžāĻ° āĻāĻ¨ā§āĻ¯ āĻ¨āĻŋāĻā§āĻ° āĻĢā§āĻ˛ā§āĻāĻžāĻ°ā§āĻ āĻāĻŋ āĻĻā§āĻā§āĻ¨ :
VueJS āĻ slots āĻāĻ° āĻŽāĻžāĻ§ā§āĻ¯āĻŽā§ content distribution
VueJS āĻ slots āĻāĻ° āĻŽāĻžāĻ§ā§āĻ¯āĻŽā§ content distribution āĻāĻž āĻ āĻ¨ā§āĻāĻāĻž HTML Elements āĻāĻ° āĻŽāĻ¤ā§, āĻāĻāĻž āĻ¸āĻžāĻ§āĻžāĻ°āĻŖāĻ¤āĻ content āĻā§ component āĻ āĻĒāĻžāĻ¸ āĻāĻ°āĻžāĻ° āĻāĻ¨ā§āĻ¯ āĻā§āĻŦāĻ āĻĻāĻ°āĻāĻžāĻ°āĻŋāĨ¤ āĻ¨āĻŋāĻā§āĻ° āĻāĻĻāĻžāĻšāĻ°āĻŖāĻāĻŋ āĻĻā§āĻā§āĻ¨:
<html>
<head>
<title>VueJS content distribution</title>
<script type = "text/javascript" src = "https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<style>
.demo-alert-box {
padding: 10px 20px;
background: #f3beb8;
border: 1px solid #f09898;
}
</style>
</head>
<body>
<div id="slots-demo">
<alert-box>
Something bad happened.
</alert-box>
</div>
<script>
Vue.component('alert-box', {
template: `<div class="demo-alert-box">
<strong>Error!</strong>
<slot></slot>
</div>`
})
new Vue({ el: '#slots-demo' })
</script>
</body>
</html>
Output
VueJS āĻ āĻāĻ component āĻĨā§āĻā§ āĻ āĻ¨ā§āĻ¯ components āĻ switch
<html>
<head>
<title>VueJS content distribution</title>
<script type = "text/javascript" src = "https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<style>
.tab-button {
padding: 6px 10px;
border-top-left-radius: 3px;
border-top-right-radius: 3px;
border: 1px solid #ccc;
cursor: pointer;
background: #f0f0f0;
margin-bottom: -1px;
margin-right: -1px;
}
.tab-button:hover {
background: #e0e0e0;
}
.tab-button.active {
background: #e0e0e0;
}
.tab {
border: 1px solid #ccc;
padding: 10px;
}
</style>
</head>
<body>
<div id="dynamic-component-demo" class="demo">
<button
v-for="tab in tabs"
v-bind:key="tab"
v-bind:class="['tab-button', { active: currentTab === tab }]"
v-on:click="currentTab = tab"
>{{ tab }}</button>
<component
v-bind:is="currentTabComponent"
class="tab"
></component>
</div>
<script>
Vue.component('tab-home', {
template: '<div>Home component</div>'
})
Vue.component('tab-posts', {
template: '<div>Posts component</div>'
})
Vue.component('tab-archive', {
template: '<div>Archive component</div>'
})
new Vue({
el: '#dynamic-component-demo',
data: {
currentTab: 'Home',
tabs: ['Home', 'Posts', 'Archive']
},
computed: {
currentTabComponent: function () {
return 'tab-' + this.currentTab.toLowerCase()
}
}
})
</script>
</body>
</html>
Output
VueJS āĻ props āĻāĻŋ?
VueJS āĻ props āĻšāĻā§āĻā§ properties āĻļāĻŦā§āĻĻā§āĻ° āĻ¸āĻā§āĻˇāĻŋāĻĒā§āĻ¤ āĻ°ā§āĻĒāĨ¤ VueJS āĻ props āĻāĻ° āĻŽāĻžāĻ§ā§āĻ¯āĻŽā§ āĻ¯ā§āĻā§āĻ¨ā§ parent component āĻĨā§āĻā§ āĻ¤āĻžāĻ° child component āĻā§āĻ˛ā§āĻ¤ā§ data pass āĻāĻ°āĻžāĻ° āĻāĻāĻāĻž āĻŽāĻžāĻ§ā§āĻ¯āĻŽāĨ¤ āĻĒā§āĻ°āĻĨāĻŽā§ āĻāĻ˛ā§āĻ¨ VueJS āĻ Component āĻāĻ° āĻŽāĻ§ā§āĻ¯ā§ āĻāĻŋāĻāĻžāĻŦā§ prop āĻĄāĻŋāĻĢāĻžāĻāĻ¨ āĻāĻ°āĻž āĻšāĻ¯āĻŧ āĻ¤āĻž āĻĻā§āĻāĻž āĻ¯āĻžāĻ:
<html>
<head>
<title>VueJs Props</title>
<script type = "text/javascript" src = "https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<div id="students">
<full-name name="Masud"></full-name>
</div>
<br>
</div>
<script>
Vue.component('full-name', {
props: ['name'],
template: '<p>Hi {{ name}}!</p>'
})
new Vue({
el: '#students'
})
</script>
</body>
</html>
Output
Hi Masud
VueJS āĻ Props āĻāĻ° āĻ āĻ¨ā§āĻ custom attributes āĻĨāĻžāĻā§, āĻ¯ā§āĻā§āĻ˛ā§āĻā§ āĻāĻĒāĻ¨āĻŋ component register āĻāĻ°āĻ¤ā§ āĻĒāĻžāĻ°ā§āĻ¨āĨ¤ āĻ¯āĻāĻ¨ āĻā§āĻ¨ā§ value āĻā§āĻ¨ā§ āĻāĻāĻāĻž attribute āĻ pass āĻšāĻ¯āĻŧ, āĻ¤āĻāĻ¨ āĻāĻāĻŋ āĻ¸ā§āĻ component object āĻāĻ° āĻāĻāĻāĻž property āĻšāĻ¯āĻŧā§ āĻ¯āĻžāĻ¯āĻŧāĨ¤ āĻ§āĻ°ā§āĻ¨ āĻāĻŽāĻ°āĻž blog posts component āĻ¤ā§āĻ°āĻŋ āĻāĻ°āĻŦāĨ¤ āĻāĻāĻ¨ āĻ¯āĻĻāĻŋ āĻāĻŽāĻ°āĻž āĻāĻŽāĻžāĻĻā§āĻ° blog post component āĻāĻ° āĻāĻ¨ā§āĻ¯ āĻā§āĻ¨ā§ title āĻā§ pass āĻāĻ°āĻ¤ā§ āĻāĻžāĻ , āĻ¤āĻžāĻšāĻ˛ā§ āĻāĻŽāĻ°āĻž āĻāĻ title āĻā§ props āĻ˛āĻŋāĻ¸ā§āĻā§ include āĻāĻ°āĻ¤ā§ āĻĒāĻžāĻ°āĻŋ āĻ¨āĻŋāĻŽā§āĻ¨ā§āĻā§āĻ¤ props āĻ āĻĒāĻļāĻ¨āĻ¸ āĻā§āĻ˛ā§āĻ° āĻŽāĻžāĻ§āĻŽā§ :
Vue.component('blog-post', {
props: ['title'],
template: '<h3>{{ title }}</h3>'
})
āĻāĻāĻāĻž component āĻ āĻāĻĒāĻ¨āĻŋ āĻ¯āĻ¤ āĻŦā§āĻļāĻŋ āĻāĻā§āĻāĻž āĻāĻĒāĻ¨āĻžāĻ° āĻāĻžāĻšāĻŋāĻĻāĻž āĻ āĻ¨ā§āĻ¯āĻžāĻ¯āĻŧā§ props āĻ¨āĻŋāĻ¤ā§ āĻĒāĻžāĻ°ā§āĻ¨āĨ¤ āĻ¯ā§āĻā§āĻ¨ā§ value āĻā§ āĻāĻĒāĻ¨āĻŋ āĻāĻžāĻāĻ˛ā§ āĻ¯ā§āĻā§āĻ¨ā§ props āĻ pass āĻāĻ°āĻ¤ā§ āĻĒāĻžāĻ°ā§āĻ¨āĨ¤ āĻāĻĒāĻ°ā§āĻ° āĻā§āĻĄā§āĻ° āĻŽāĻ§ā§āĻ¯ā§ , template āĻ āĻ¯ā§āĻ value āĻāĻā§ , component instance āĻāĻ° āĻŽāĻžāĻ§ā§āĻ¯āĻŽā§ āĻ¤āĻžāĻ¤ā§ āĻāĻŽāĻ°āĻž access āĻāĻ°āĻ¤ā§ āĻĒāĻžāĻ°āĻŦāĨ¤ āĻ āĻ¨ā§āĻāĻāĻž data āĻāĻ° āĻŽāĻ¤ā§āĨ¤
āĻāĻ° āĻ¯āĻāĻ¨ prop registered āĻšāĻ¯āĻŧā§ āĻ¯āĻžāĻŦā§āĨ¤ āĻ¤āĻāĻ¨ āĻāĻĒāĻ¨āĻŋ āĻĄāĻžāĻāĻž āĻā§ āĻ¤āĻžāĻ° custom attribute āĻ āĻĒāĻžāĻ¸ āĻāĻ°āĻ¤ā§ āĻĒāĻžāĻ°āĻŦā§āĻ¨āĨ¤ āĻ āĻŋāĻ āĻ¨āĻŋāĻā§āĻ° āĻā§āĻĄā§āĻ° āĻŽāĻ¤ā§ :
<blog-post title="My journey with Vue"></blog-post>
<blog-post title="Blogging with Vue"></blog-post>
<blog-post title="Why Vue is so fun"></blog-post>
āĻāĻŦāĻžāĻ° āĻāĻ˛ā§āĻ¨ āĻ¸āĻŽā§āĻĒā§āĻ°ā§āĻŖ āĻā§āĻĄāĻāĻŋ āĻāĻāĻ¸āĻžāĻĨā§ āĻĻā§āĻāĻž āĻ¯āĻžāĻ:
<html>
<head>
<title>VueJs Form Input Bindings</title>
<script type = "text/javascript" src = "https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<div id="blog-post-demo">
<blog-post title="My journey with Vue"></blog-post>
<blog-post title="Blogging with Vue"></blog-post>
<blog-post title="Why Vue is so fun"></blog-post>
</div>
<br>
</div>
<script>
Vue.component('blog-post', {
props: ['title'],
template: '<h3>{{ title }}</h3>'
})
new Vue({ el: '#blog-post-demo' })
</script>
</body>
</html>
Output
VueJS āĻ āĻāĻāĻžāĻ§āĻŋāĻ props āĻĄāĻŋāĻĢāĻžāĻāĻ¨
VueJS āĻ āĻāĻĒāĻ¨āĻŋ āĻāĻžāĻāĻ˛ā§ āĻāĻāĻžāĻ§āĻŋāĻ props āĻĄāĻŋāĻĢāĻžāĻāĻ¨ āĻāĻ°āĻ¤ā§ āĻĒāĻžāĻ°ā§āĻ¨āĨ¤ āĻ¨āĻŋāĻā§āĻ° āĻāĻĻāĻžāĻšāĻ°āĻŖāĻāĻŋ āĻĻā§āĻā§āĻ¨:
<html>
<head>
<title>VueJs Multiple Props</title>
<script type = "text/javascript" src = "https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<div id="students">
<full-name first-name="Masud" last-name="Alam"></full-name>
<full-name first-name="Sohel" last-name="Rana"></full-name>
</div>
<br>
</div>
<script>
Vue.component('full-name', {
props: ['first-name','last-name'],
template: '<p>Hi {{ firstName }} {{lastName}}!</p>'
})
new Vue({
el: '#students'
})
</script>
</body>
</html>