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.

Daily Test with Code Example

HTML
CSS
JavaScript
PHP-MySQL
Which HTML5 tag defines marked text? (can be used to highlight parts of text)
<mark> <embed> <span>
<p>Free corses: <mark>coursesweb.net</mark> for Web Development.</p>
Which CSS pseudo-class adds a style to an element when the mouse is over it?
:focus :hover :active
a:hover {
  font-weight: bold;
  color: #00da01;
}
Click on the function which returns a string value that represents the number rounded to the x digits after the decimal point.
toPrecision(x) toFixed(x) floor(x)
var num = 12.34567;
num = num.toFixed(2);
alert(num);       // 12.35
Indicate the PHP function which reads an entire file into an array.
[) file() readfile()
$arr = file("a_file.txt", FILE_IGNORE_NEW_LINES | FILE_SKIP_EMPTY_LINES);
var_export($arr);
The Vue Instance

Last accessed pages

  1. PHP PDO - Select query, fetch (22273)
  2. Simple arithmetic calculator in PHP (448)
  3. PHP MySQL - using MySQLi (8670)
  4. Get Attribute (ID, Class, Name, Title, Src) with jQuery (62115)
  5. Display UL bullets and OL numbers on the right side (2725)

Popular pages this month

  1. Making DIV Contents Scroll Horizontally, with multiple Div`s inside (1269)
  2. Courses Web: PHP-MySQL JavaScript Node.js Ajax HTML CSS (1241)
  3. Tabs effect with CSS (1226)
  4. Contact page - CoursesWeb (1224)
  5. Insert, Select and Update NULL value in MySQL (729)