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 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";
Watch Property

Last accessed pages

  1. Calling Function and Class Method with Name from String (5792)
  2. Working with HTML attributes in PHP (13579)
  3. Get Mime Type of file or string content in PHP (6148)
  4. Disable button and Enable it after specified time (17416)
  5. Redirects (4874)

Popular pages this month

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