Vuejs Course


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 tag is used to add lists into <ul> and <ol> elements?
<dt> <dd> <li>
<ul>
 <li>http://coursesweb.net/html/</li>
 <li>http://coursesweb.net/css/</li>
</ul>
Which value of the "display" property creates a block box for the content and ads a bullet marker?
block list-item inline-block
.some_class {
  display: list-item;
}
Which instruction converts a JavaScript object into a JSON string.
JSON.parse() JSON.stringify eval()
var obj = {
 "courses": ["php", "javascript", "ajax"]
};
var jsonstr = JSON.stringify(obj);
alert(jsonstr);    // {"courses":["php","javascript","ajax"]}
Indicate the PHP class used to work with HTML and XML content in PHP.
stdClass PDO DOMDocument
$strhtml = '<body><div id="dv1">CoursesWeb.net</div></body>';
$dochtml = new DOMDocument();
$dochtml->loadHTML($strhtml);
$elm = $dochtml->getElementById("dv1");
echo $elm->nodeValue;    // CoursesWeb.net
The Vue Instance

Last accessed pages

  1. Create and Use in PHP a Simple Template Page (3306)
  2. Common PHP Errors and Solutions (9771)
  3. PHP getElementById and getElementsByTagName (49471)
  4. Mysql SELECT JOIN tables on two different Databases (4498)
  5. jQuery UI draggable - Drag elements (11448)

Popular pages this month

  1. Courses Web: PHP-MySQL JavaScript Node.js Ajax HTML CSS (523)
  2. The Mastery of Love (65)
  3. CSS cursor property - Custom Cursors (62)
  4. Read Excel file data in PHP - PhpExcelReader (59)
  5. PHP-MySQL free course, online tutorials PHP MySQL code (44)