The Vue.js equivalent to AngularJS’s ‘ng-cloak’

ng-cloak removes the ‘flashing’ of hidden elements on runtime. It’s not a feature of Vue.js but can be added easily by adding this to your CSS:

<style>
[v-cloak] { display:none; }
</style>

Usage example: 

<div v-show="appLoaded" v-cloak> Blah blah blah</div>

Differences in syntax between AngularJS, Angular2, React, and Vue.js

(by AXDS)

Here’s some examples showing the differences in syntax between AngularJS, Angular2, React, and Vue.js  🙂

All of these examples are doing pretty much the same thing:

AngularJS: https://jsfiddle.net/g7bk9Lk5/

Angular2: https://jsfiddle.net/pt5ox9mp/

React: https://jsfiddle.net/ma9bg0gt/

Vue.js: https://jsfiddle.net/2ojtoaxx/

 

 

 

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>
'
});