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:

[v-cloak] { display:none; }

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:








Vue.Js Components

Testing how components work in Vue.Js

Simple Example:

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

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

Component inside list Example:

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>