Vue.Js Components

Testing how components work in Vue.Js

Simple Example: https://jsfiddle.net/4v6khn77/

var Testing_Component = Vue.extend({
template: 'Hello World'
});

var mainViewModel = new Vue({
el: '#myApp',
components: {
'testing-component': Testing_Component
}
});

Component inside list Example: https://jsfiddle.net/3d91z7pe/


var Person_Component = Vue.extend({
template: '
	<li style="color:{{ color }}">{{ foreName }} {{ lastName }}</li>
'
});

var listOfPeople = [{
foreName: 'Wade',
lastName: 'Wilson',
color: 'red'
}, {
foreName: 'Peter',
lastName: 'Parker',
color: 'blue'
}];

var mainViewModel = new Vue({
el: '#myApp',
data: {
peopleList: listOfPeople
},
components: {
'person-component': Person_Component
},
template: '
<ul><person-component v-repeat="peopleList"></person-component></ul>
'
});
Advertisements

Experiment with JSON date format.

(by AXDS)

I have found out that the JSON standard for date is in this format: ‘yyyy-MM-ddTHH:mm:ssZ’. This format is the preferred way to handle dates inside a JSON object.

For example, 21st March 2016 at 17:04:33, would be, 2016-03-21T17:04:33.000Z.

In order to convert a JavaScript Date into the JSON standard format, toJSON() can be called on this date. toISOString() is another function that can be used to convert a Date into this format.

There is no real functional difference between these functions, in fact, toJSON() will call toISOString(). The main difference is that toJSON() is included in JS 1.8.5, while toISOString() is included in JS 1.8. This makes toJSON() preferable for converting Date to JSON’s standard date format.

This JSON date format can be parsed into milliseconds using the usual Date.parse() function.

JSFiddle: https://jsfiddle.net/3e0sj0mm/