Vuejs Course


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 tag adds a new line into a paragraph?
<b> <br> <p>
First line ...<br>
Other line...
Which CSS property can be used to add space between letters?
text-size word-spacing letter-spacing
#id {
  letter-spacing: 2px;
}
What JavaScript function can be used to get access to HTML element with a specified ID?
getElementById() getElementsByTagName() createElement()
var elm = document.getElementById("theID");
var content = elm.innerHTML;
alert(content);
Click on the "echo" correct instruction.
echo "CoursesWeb.net" echo "CoursesWeb.net"; echo ""CoursesWeb.net";
echo "Address URL: http://CoursesWeb.net";
Vue JS - Short presentation

Last accessed pages

  1. Detect when ScrollBar reaches the bottom of the page (4384)
  2. JQZoom Image Magnifier (12996)
  3. Simple arithmetic calculator in PHP (2104)
  4. querySelector and querySelectorAll (30064)
  5. array_map and array_search in JavaScript (4059)

Popular pages this month

  1. Courses Web: PHP-MySQL JavaScript Node.js Ajax HTML CSS (326)
  2. PHP Unzipper - Extract Zip, Rar Archives (86)
  3. Read Excel file data in PHP - PhpExcelReader (82)
  4. The Mastery of Love (78)
  5. PHP-MySQL free course, online tutorials PHP MySQL code (65)