Vue.Js Binding Syntax
Vue.Js Data Binding Syntax:– Vue.Js templates are parsable into virtual Dom that is the main reason which makes Vue.js working faster and performant.
Here in this tutorial we will learn all about template binding which is very easy in this framework.
Let us have look in below example.
Vue.Js Data Binding Syntax | Interpolation | Example
The very basic method for rendering of model’s data into view is to make use of double curly braces representation i.e mustache tag
Below code snippet shows the very basic and simple syntax of data binding in Vue.Js.
Below first example shows that double curly braces renders dat only in text format rather we can use triple curly braces tag to render model’data into html form.
<p>: Template Syntax : {{ message }}</p>
One Way Data Binding | Example
One way data binding does not permit to change value of view according to data object. You can understand it by below suitable example.
Example
<html>
<head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.3.0/vue.js"></script>
<!--<script src="https://unpkg.com/vue"></script>-->
</head>
<body>
<div id="app">
<p> {{ message }}</p>
</div>
<script>
var myapp = new Vue({
el: '#app',
data: {
message: 'Vue.JS Demo Example'
}
})
</script>
</body>
</html>
|
Explanation of Program | Execution
In below example you will see no change can be made on view according to javascript template “message”
Raw Html Binding | Example
Now we can use triple curly braces to render data into html format on view using v-html directive. Here is the best suitable example where you can teach yourself.
Example
<html>
<head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.3.0/vue.js"></script>
<!--<script src="https://unpkg.com/vue"></script>-->
</head>
<body>
<div id="app">
<p v-html="message"></p>
</div>
<script>
var myapp = new Vue({
el: '#app',
data: {
message: '<h1>Vue.JS Demo Example</h1>'
}
})
</script>
</body>
</html>
|
Explanation of Program | Execution
We can display html template instead of text template on view by using some html tag in javascript object.
Attributes Binding | Example
To bind data together with view we use v-bind directive followed by the attribute name to which you want to bind the data. We demonstrates a very easy example of this scenario.
Example
<html>
<head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.3.0/vue.js"></script>
<!--<script src="https://unpkg.com/vue"></script>-->
</head>
<body>
<div id="app">
<p>Click to learn all advanced web development tutorials <a v-bind:href="url">{{ url }}</a></p>
</div>
<script>
var myapp = new Vue({
el: '#app',
data: {
url: 'http://www.tutorialsplane.com'
}
})
</script>
</body>
</html
|
Explanation of Program | Execution
Attribute binding simply means to attach html attributes with v-bind directive to render them on view.
JavaScript Expressions Binding | Example
In below example you can see how an javascript expression is evaluated using interpolation approach.
Example
<html>
<head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.3.0/vue.js"></script>
<!--<script src="https://unpkg.com/vue"></script>-->
</head>
<body>
<div id="app">
{{ string + ' ' + isTrue}}
</div>
<script>
var myapp = new Vue({
el: '#app',
data() {
return {
text: 'Hey Vue.Js!',
isTrue: true,
string: 'Hello man'
}
}
})
</script>
</body>
</html>
|
Explanation of Program | Execution
Javacsript expressions generates some defined pattern in order to it in a string for searching results in many programming scenarios.
Directive | Example
Directives are special attribute which are used to make changes in view depending upon data model.
Below examples shows v-bind directive function how does it toggle the given template.
You can try one important thing here to verify the output of v-if directive . Now open your browser console by clicking on inspect element and type app-2.value=false then you will see a quick change on your screen i.e disappearing the template's all three contents.
You will see the output equivalent to below screenshot if you run below mentioned template.
v-if | Example
<html>
<head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.3.0/vue.js"></script>
<script>
var myModel={name:"Vue.Js", rank:2};
</script>
</head>
<body>
<div id="app-2">
<template v-if="value">
<h1>Title</h1>
<p>Paragraph 1</p>
<p>Paragraph 2</p>
</template>
</div>
<script>
var app2 = new Vue({
el: '#app-2',
data: {
value:true
}
})
</script>
</body>
</html>
|
Directve with Argument | Example
In Vue.Js we are familiar with directives name which are started with v- followed by directive name. Some of directive have argument name associated with their name. For example v-bind title demonstrates the mouse hover property which is justified in below given example.
v-bind | Example
<html>
<head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.3.0/vue.js"></script>
<script>
var myModel={name:"Vue.Js", rank:2};
</script>
</head>
<body>
<div id="app-2">
<p v-bind:title="message">Are you a liable person?</p>
</div>
<script>
var app2 = new Vue({
el: '#app-2',
data: {
message:'The Best and Largest web development tutorials'
}
})
</script>
</body>
</html>
|
Advertisements
