Vuejs Course

A watcher allows you to "watch" a property of the component data, and run a function when that property value changes.
In the watch object add a method with the same name as the property data you want to "watch".

Syntax:
var vm = new Vue({
 el: 'css_selector',
 data: {
 prop_name: 'value'
 }.
 watch: {
 prop_name: function(newVal, oldVal{
 //code and value to return
 }
 }
});

The function assigned to watch.prop_name can optionally accept 2 parameters. The first is the new property value (newVal). The second is the old property value.

Here is a practical example with the watch property in vue.js. Add the diameter of a circle into an input field, then it is displayed the perimeter and area:
<div id='demo'>
 Diameter circle: <input type='number' value='0' v-model='diameter'/><br>
 Perimeter: {{perimeter}}<br>
 Area: {{area}}
</div>

<script>
var vm = new Vue({
 el:'#demo',
 data: {
 diameter: 0,
 perimeter:0,
 area:0
 },
 watch: {
 diameter: function(val){
 this.perimeter = 3.14*val;
 this.area = 3.14*(val*val)/4;
 }
 }
});
</script>

Daily Test with Code Example

HTML
CSS
JavaScript
PHP-MySQL
Which tag is used to add lists into <ul> and <ol> elements?
<dt> <dd> <li>
<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
Watch Property

Last accessed pages

  1. innerHTML in PHP (12156)
  2. Making DIV Contents Scroll Horizontally, with multiple Div`s inside (57517)
  3. PHP Unzipper - Extract Zip, Rar Archives (12588)
  4. SBMD - Simple Backup MySQL Database (4276)
  5. Node.js Move and Copy file (22675)

Popular pages this month

  1. Courses Web: PHP-MySQL JavaScript Node.js Ajax HTML CSS (716)
  2. SHA256 Encrypt hash in JavaScript (569)
  3. PHP Unzipper - Extract Zip, Rar Archives (552)
  4. Read Excel file data in PHP - PhpExcelReader (541)
  5. Create simple Website with PHP (456)