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 type of <input> creates a date input control, such as a pop-up calendar?
type="text" type="date" type="button"
<input type="date" name="set_date" value="2012-10-15" />
Which CSS property adds shadow effects to the text of an element?
font-style color text-shadow
h2 {
  text-shadow: 2px 3px 3px #a0a1fe;
}
Click on the function that adds new elements to the end of an array.
pop() shift() push()
var pags = ["lessons", "courses"];
pags.push("download", "tutorials");
alert(pags[2]);            // download
Which function sorts an array by key, in ascending order, maintaining key to data correlations?
asort() ksort() sort()
$lang =[10=>"PHP", 20=>"JavaScript", "site"=>"coursesweb.net");
ksort($lang);
var_export($lang);     // array ("site"=>"coursesweb.net", 10=>"PHP", 20=>"JavaScript")
The Vue Instance

Last accessed pages

  1. Add /Delete rows in HTML table with JavaScript (1432)
  2. Courses Web: PHP-MySQL JavaScript Node.js Ajax HTML CSS (105476)
  3. Animating in Flash - Frame-by-Frame Animation (2107)
  4. Replace JavaScript variable name from string with its value (2015)
  5. PHP Unzipper - Extract Zip, Rar Archives (5872)

Popular pages this month

  1. Courses Web: PHP-MySQL JavaScript Node.js Ajax HTML CSS (150)
  2. Register and show online users and visitors (95)
  3. PHP-MySQL free course, online tutorials PHP MySQL code (88)
  4. Read Excel file data in PHP - PhpExcelReader (87)
  5. JavaScript Course - Free lessons (73)