The Vue Instance

Creating a Vue Instance Object

Every Vue application starts by creating a new Vue instance with the new Vue() syntax; passing an options object:

var vm = new Vue({
 // options
})

Data and Methods

The options object can contain properties and methods (functions). The most used properties in the Vue object are data and el.

<div id='app'>
<h1>{{ title }}</h1>
</div>

<script>
var vue_ob = new Vue({
 el: '#app',
 data: {title: 'Vue Tutorial'}
})
</script>

- el: is for the html element/s which reffers, it can be a CSS selector, class, id.
- data is an object with data. When the values of those properties change, the view will "react", and vice-versa, updating to match the new values.

Code example

var data = { a: 1 } // Our data object

// The object is added to a Vue instance
var vm = new Vue({
 data: data
})

// Setting the property on the instance
// also affects the original data
vm.a = 2;
console.log(data.a); // 2

// ... and vice-versa
data.a = 3;
console.log(vm.a); // 3

Properties in data are only reactive if they existed when the instance was created.
If you know you'll need a property later, but it starts out empty or non-existent, you'll need to set some initial value. For example:

var data ={
 a:1,
 b:'',
 ar:[]
}

In addition to data properties, Vue instances expose a number of useful instance properties and methods. These are prefixed with $ to differentiate them from user-defined properties.
For example:

var data = { a: 12 } // Our data object

// The object is added to a Vue instance
var vm = new Vue({
 data: data
})

console.log(vm.$data); // { a: 12 }

// $watch is an instance method
vm.$watch('a', (newValue, oldValue)=>{
 // This callback will be called when vm.a changes
 console.log('old-value:'+oldValue, 'new-value:'+newValue);
})

//changing the value of vm.a, it will triger vm.$match()
vm.a = 8;

You can consult the Vue API reference for a full list of instance properties and methods.

Custom Methods

Custom methods can be defined in the methods: properties.

var vm = new Vue({
 methods:{
 methodName:function(ev){
 //code..
 }
 }
})

Example, when click on a button it calls a custom method defined in Vue:

<div id='app'>
<div>{{ str }}</div>
<button @click='newStr'>Click</button>
</div>

<script>
var vm = new Vue({
 el: '#app',
 data: {str: 'Be Yourself.'},
 methods:{
 newStr:function(ev){
 this.str ='Love the Life';
 }
 }
})
</script>

Instance Lifecycle Hooks

Each Vue instance goes through a series of initialization steps when it's created, it also runs functions called lifecycle hooks, giving users the opportunity to add their own code at specific stages.

For example, the created hook can be used to run code after an instance is created:

var vm = new Vue({
 data: { a: 1 },
 created: function(){
 // `this` points to the vm instance
 console.log('a is: ' + this.a)
 }
})

//Results in console: a is: 1

There are also other hooks which will be called at different stages of the instance's lifecycle, such as mounted, updated, and destroyed. All lifecycle hooks are called with their this context.

<<-Vue JS - Short .. -- Template Syntax->>

Daily Test with Code Example

HTML

CSS

JavaScript

PHP-MySQL

Which meta tag provides a short description of the page?

<meta name="description" content="70-160 characters that describes the content of the page" />

Which CSS property is used to stop the wrapping effect of the "float"?

clear text-align position

#some_id {
  clear: both;
}

Click on the method which gets an array with all the elements in the document that have a specified tag name.

getElementsByName() getElementById() getElementsByTagName()

var divs = document.getElementsByTagName("div");
var nr_divs = divs.length;
alert(nr_divs);

Indicate the PHP function which returns the number of elements in array.

is_[) count() strlen()

$arr =[7, 8, "abc", 10);
$nri = count($arr);
echo $nri;        // 4