What is Vue.js?
Vue.js lets you extend HTML with HTML attributes called directives
Vue.js directives offers functionality to HTML applications
Vue.js provides built-in directives and user defined directives
Vue.js Directives
Vue.js uses double braces {{ }} as place-holders for data.
Vue.js directives are HTML attributes with the prefix v-
Vue Example
In the example below, a new Vue object is created with new Vue().
The property el: binds the new Vue object to the HTML element with id="app".
Example
<div id="app">
<h1>{{ message }}</h1>
</div>
<script>
var myObject = new Vue({
el: '#app',
data: {message: 'Hello Vue!'}
})
</script>
Vue.js Binding
When a Vue object is bound to an HTML element, the HTML element will change when the Vue object changes:
Example
<div id="app">
{{ message }}
</div>
<script>
var myObject = new Vue({
el: '#app',
data: {message: 'Hello Vue!'}
})
function
myFunction() {
myObject.message = "John Doe";
}
</script>
Vue.js Two-Way Binding
The v-model directive binds the value of HTML elements to application data.
This is called two-way binding:
Example
<div id="app">
<p>{{ message }}</p>
<p><input v-model="message"></p>
</div>
<script>
var myObject = new Vue({
el: '#app',
data: {message: 'Hello Vue!'}
})
</script>
Vue.js Loop Binding
Using the v-for directive to bind
an array of Vue objects to an "array" of HTML element:
Example
<div id="app">
<ul>
<li v-for="x in todos">
{{
x.text }}
</li>
</ul>
</div>
<script>
myObject =
new Vue({
el: '#app',
data: {
todos: [
{ text: 'Learn
JavaScript' },
{ text: 'Learn
Vue.js' },
{ text: 'Build
Something Awesome' }
]
}
})
</script>
