Vue JS - Short presentation

Binding Vue JS with HTML element

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>

The Vue Instance->>

Daily Test with Code Example

HTML

CSS

JavaScript

PHP-MySQL

Which tag is used to add lists into <ul> and <ol> elements?

<ul>
 <li>http://coursesweb.net/html/</li>
 <li>http://coursesweb.net/css/</li>
</ul>

Which value of the "display" property creates a block box for the content and ads a bullet marker?

block list-item inline-block

.some_class {
  display: list-item;
}

Which instruction converts a JavaScript object into a JSON string.

JSON.parse() JSON.stringify eval()

var obj = {
 "courses": ["php", "javascript", "ajax"]
};
var jsonstr = JSON.stringify(obj);
alert(jsonstr);    // {"courses":["php","javascript","ajax"]}

Indicate the PHP class used to work with HTML and XML content in PHP.

stdClass PDO DOMDocument

$strhtml = '<body><div id="dv1">CoursesWeb.net</div></body>';
$dochtml = new DOMDocument();
$dochtml->loadHTML($strhtml);
$elm = $dochtml->getElementById("dv1");
echo $elm->nodeValue;    // CoursesWeb.net