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
What attribute makes a radio button or checkbox input selected?
checked="checked" selected="selected" disabled="disabled"
<input type="checkbox" name="a_name" value="value" checked="checked" />
What CSS value scales the background image to the largest size contained within the element?
repeat-x contain linear-gradient
#id {
  background:url("path_to_image.png");
  background-size:contain;
  background-repeat:no-repeat;
}
What operator is used to determine the rest of the division of two numbers?
% * /
var rest8_7 = 8 % 7;
alert(rest8_7);
Indicate the PHP function that rounds a number up to the next highest integer.
floor() ceil() abs()
$nr = ceil(3.5);
echo $nr;        // 4
The Vue Instance

Last accessed pages

  1. CSS3 2D transforms (820)
  2. How to get JSON data from JavaScript to PHP (617)
  3. Add /Delete rows in HTML table with JavaScript (4298)
  4. $_GET, $_POST and $_REQUEST Variables (33850)
  5. Get Attribute (ID, Class, Name, Title, Src) with jQuery (74525)

Popular pages this month

  1. Courses Web: PHP-MySQL JavaScript Node.js Ajax HTML CSS (55)
  2. The Mastery of Love (9)
  3. CSS cursor property - Custom Cursors (9)
  4. CSS3 2D transforms (7)
  5. Read Excel file data in PHP - PhpExcelReader (7)