Home - News ( United States | United Kingdom | Italy | Germany ) - Football scores

Showing content from https://www.w3schools.com/whatis/whatis_vue.asp below:

Website Navigation

• Tutorials
• Exercises
• Certificates
• Services

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

For a full Vue.js tutorial:

Vue.js uses double braces {{ }} as place-holders for data.

Vue.js directives are HTML attributes with the prefix v-

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".

<div id="app">

<h1>{{ message }}</h1>

</div>

<script>

var myObject = new Vue({
    el: '#app',
    data: {message: 'Hello Vue!'}
})

</script>

Try it Yourself »

When a Vue object is bound to an HTML element, the HTML element will change when the Vue object changes:

<div id="app">

{{ message }}

</div>

<script>

var myObject = new Vue({

el: '#app',

data: {message: 'Hello Vue!'}

})

function myFunction() {

myObject.message = "John Doe";

}

</script>

Try it Yourself »

The v-model directive binds the value of HTML elements to application data.

This is called two-way binding:

<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>

Try it Yourself »

Using the v-for directive to bind an array of Vue objects to an "array" of HTML element:

<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>

Try it Yourself »

Track your progress - it's free!

RetroSearch is an open source project built by @garambo | Open a GitHub Issue

Search and Browse the WWW like it's 1997 | Search results from DuckDuckGo

HTML: 3.2 | Encoding: UTF-8 | Version: 0.7.4