Vue.js is a progressive JavaScript framework for building user interfaces and sophisticated Single-Page Applications, easy to pick up and integrate with other libraries or existing projects.

Installation

To use Vue in your website you must include the vue.js code in your page, with:
<script src='//cdn.jsdelivr.net/npm/vue'></script>
- Or, you can copy the JavaScript code from that address, save it into a .js file on your server, then include that file in your page.

Vue.js Template and Directives

Vue js use a template syntax with double braces {{ }} as place-holders for data, that is linked to the DOM.

With Vue.js you can extend HTML with HTML attributes called directives. They are HTML attributes with the prefix v-, and offers functionality to HTML applications.
Vue.js provides built-in directives and user defined directives.


Examples:

A new Vue object is created with new Vue(). A property el: binds the new Vue object to the HTML element with the ID added to el:.
The property data: contains an object with data for the template structure.
<div id='app'>
<h1>{{ message }}</h1>
</div>

<script>
var vue_ob = new Vue({
 el: '#app',
 data: {message: 'Hello Vue!'}
})
</script>

Binding Vue JS with HTML element

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>
<button id='btn'>Click</button>

<script>
var vue_ob = new Vue({
 el: '#app',
 data: {message: 'Hello Vue!'}
})

//When click on the #btn element, change message text
document.getElementById('btn').addEventListener('click', (ev)=>{
 vue_ob.message ='MarPlo - CoursesWeb';
});
</script>

Two-way binding

The v-model directive binds the value of HTML elements to application data.
<div id='app'>
 <p>{{ msg }}</p>
 Add some text in this input:<br>
 <input v-model='msg'>
</div>

<script>
var vue_ob = new Vue({
 el: '#app',
 data: {msg: 'Hello Vue!'}
})
</script>

Vue Loop binding

With the v-for directive you can bind an array of Vue objects to an "array" of HTML element; for example to create a list (LI):
<div id='app'>
List created with Vue JS.
<ul>
 <li v-for='li in list'>{{ li }}</li>
</ul>
</div>

<script>
var vue_ob = new Vue({
 el: '#app',
 data: {
 list: ['Learn JavaScript', 'Learn Vue.js', 'Build Something Awesome']
 }
})
</script>

Daily Test with Code Example

HTML
CSS
JavaScript
PHP-MySQL
Which type of <input> creates a date input control, such as a pop-up calendar?
type="text" type="date" type="button"
<input type="date" name="set_date" value="2012-10-15" />
Which CSS property adds shadow effects to the text of an element?
font-style color text-shadow
h2 {
  text-shadow: 2px 3px 3px #a0a1fe;
}
Click on the function that adds new elements to the end of an array.
pop() shift() push()
var pags = ["lessons", "courses"];
pags.push("download", "tutorials");
alert(pags[2]);            // download
Which function sorts an array by key, in ascending order, maintaining key to data correlations?
asort() ksort() sort()
$lang =[10=>"PHP", 20=>"JavaScript", "site"=>"coursesweb.net");
ksort($lang);
var_export($lang);     // array ("site"=>"coursesweb.net", 10=>"PHP", 20=>"JavaScript")
Vue JS - Short presentation

Last accessed pages

  1. PHP Unzipper - Extract Zip, Rar Archives (5872)
  2. innerHTML and outerHTML to Get and Replace HTML content (24744)
  3. JavaScript trim, rtrim and ltrim (6822)
  4. HTML Symbol Entities (943)
  5. PHP Simple HTML DOM Parser (9928)

Popular pages this month

  1. Courses Web: PHP-MySQL JavaScript Node.js Ajax HTML CSS (149)
  2. Register and show online users and visitors (95)
  3. PHP-MySQL free course, online tutorials PHP MySQL code (88)
  4. Read Excel file data in PHP - PhpExcelReader (87)
  5. JavaScript Course - Free lessons (73)