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 create a highlighted bolded text?
<q> <strong> <em>
<p>Address: <strong>http://CoursesWeb.net/</strong> - Tutorials.</p>
Which of these CSS codes displays the text bolded?
text-size: 18px; font-style: italic; font-weight: 800;
#id {
  font-weight: 800;
}
What JavaScript function can be used to call another function multiple times, to a specified time interval?
setInterval() setTimeout() push()
function someFunction() { alert("CoursesWeb.net"); }
setInterval("someFunction()", 2000);
Click on the correctly defined variable in PHP.
var vname = 8; $vname = 8; $vname == 8;
$vname = 8;
echo $vname;
Vue JS - Short presentation

Last accessed pages

  1. Get Attribute (ID, Class, Name, Title, Src) with jQuery (74116)
  2. Classic Tween - Flash Animation (6016)
  3. Convert BBCode to HTML and HTML to BBCode with JavaScript (8980)
  4. Convert XML to JSON in JavaScript (33302)
  5. Detect when ScrollBar reaches the bottom of the page (4268)

Popular pages this month

  1. Courses Web: PHP-MySQL JavaScript Node.js Ajax HTML CSS (382)
  2. SHA1 Encrypt data in JavaScript (292)
  3. PHP Unzipper - Extract Zip, Rar Archives (275)
  4. SHA256 Encrypt hash in JavaScript (264)
  5. Read Excel file data in PHP - PhpExcelReader (245)