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".

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}}

var vm = new Vue({
 data: {
 diameter: 0,
 watch: {
 diameter: function(val){
 this.perimeter = 3.14*val;
 this.area = 3.14*(val*val)/4;

Daily Test with Code Example

Which tag can be used to create input text field in web page?
<form> <input> <div>
<input type="text" name="a_name" value="val" />
Which CSS property displays the text in a small-caps font?
display font-variant font-style
h3 {
  font-variant: small-caps;
What instruction displays a notice box with a message inside it, in JavaScript?
for() Date() alert()
var msg = "Visit";
Indicate the PHP code used to get the users IP.
echo $ip;
Watch Property

Last accessed pages

  1. SHA512 Encrypt hash in JavaScript (23097)
  2. Get Duration of Audio /Video file before Upload (14303)
  3. Star shapes with CSS (10465)
  4. setTimeout and this with bind() method in JavaScript class (4304)
  5. PHP-MySQL free course, online tutorials PHP MySQL code (67646)

Popular pages this month

  1. PHP Unzipper - Extract Zip, Rar Archives (807)
  2. Courses Web: PHP-MySQL JavaScript Node.js Ajax HTML CSS (565)
  3. SHA1 Encrypt data in JavaScript (433)
  4. Create simple Website with PHP (398)
  5. Read Excel file data in PHP - PhpExcelReader (392)