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>
Advertisements

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

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/

SQL Server Table to JSON Object Array


using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.Data.SqlClient;
using System.Configuration;
using System.Data;
using System.Diagnostics;
using System.Web.Script.Serialization;
using System.IO;
using System.Text;
using System.Web.Services;
using System.Text.RegularExpressions;
using System.Collections;

private static string databaseTableToJsonArrayObject()
{
string CONNECTIONSTRING_KEY_NAME = "Your_ConnectionStrings_Name_Attribute";
string TABLE_TO_CONNECT_TO = "Your_Tables_Name";
string SELECT = "DISTINCT *"; //string SELECT = "SELECT id"
string WHERE = ""; //string WHERE = "WHERE id = 1"
string ORDERBY = ""; //string ORDERBY = "ORDER BY id ASC|DESC"

DataTable dt = new DataTable();
using (SqlConnection conString = new SqlConnection(ConfigurationManager.ConnectionStrings[CONNECTIONSTRING_KEY_NAME].ConnectionString))
{

using (SqlCommand sqlCmd = new SqlCommand("SELECT " + SELECT + " FROM " + TABLE_TO_CONNECT_TO + WHERE + ORDERBY, conString))
{
conString.Open();
SqlDataAdapter da = new SqlDataAdapter(sqlCmd);
da.Fill(dt);
System.Web.Script.Serialization.JavaScriptSerializer serializer = new System.Web.Script.Serialization.JavaScriptSerializer();
List<Dictionary<string, object>> rows = new List<Dictionary<string, object>>();
Dictionary<string, object> row;
foreach (DataRow dr in dt.Rows)
{
row = new Dictionary<string, object>();

int columnCount = 0;
foreach (DataColumn col in dt.Columns)
{
row.Add(columnCount.ToString(), dr[col]);
columnCount++;
}
rows.Add(row);
}
conString.Close();
return serializer.Serialize(rows);

}
}

}