Vue.js: Difference between revisions

Revision as of 15:37, 29 March 2017

Revision as of 17:46, 29 March 2017

Line 94:

=== AngularJS ===

Some of Vue’s syntax draws from the AngularJS library including the concept of "directives" (a term denoting a way to dress up standard HTML markup with library specific syntax with a special meaning to how (and/or whether) something is rendered in HTML) and "double-binding" (a term denoting: that rendering will be influenced by two things either 1) User Action or 2) Data Coming in from APIs or other sources) because there are a lot of things Angular did right that add for a richer easier to use Front End Development experience.

Some of Vue’s syntax will look very similar to AngularJS (e.g. <code>v-if</code> vs <code>ng-if</code>). This is because there were a lot of things that AngularJS got right and these were an inspiration for Vue very early in its development. There are also many pains that come with AngularJS however, where Vue has attempted to offer a significant improvement.

For example, both Vue and Angular have baked-in directive of <code>v-if=(CONDITION)</code> in VueJS or <code>ng-if=(CONDITION)</code> in AngularJS which are ways to tell the respective libraries to render some HTML markup if and only if it meets the condition passed to it during Live runtime). Because of the Angular-introduced concept of ''Double Binding'', a condition could become true when a user for instance checks a box [x] (then become false when they uncheck that box) or it could meet the condition as soon as an API call is completed: for example:

In Vue:<br/>

<code>

<input type="checkbox" id="checkbox" v-model="checked"> <!-- Note: v-model is a double-bound javascript variable within a template --><br />

<label for="checkbox"><nowiki>{{ checked }}</nowiki></label><br />

<nowiki><span v-if="finishedLoading && checked"></nowiki><br /> <!-- In Vue the use of ng-if as an "Attribute" directive -->

<nowiki><ul v-if="checked && todosLoaded"></nowiki><br/>

<nowiki><li v-for="todo in todos"></nowiki><br/>

<nowiki>{{ todo }}</nowiki><br/>

<nowiki></li></nowiki><br/>

<nowiki></ul></nowiki><br/>

<nowiki></span></nowiki><br />

<nowiki><span v-else-if="checked && !todosLoaded"></nowiki><br/>

<nowiki><span class='fa fa-spin fa-spin'></span></nowiki> <!-- displays [[fontawesome]] Loading Icon --><br/>

<nowiki></span></nowiki><br />

<nowiki><span v-else></nowiki><br/>

<nowiki>Click on checkbox to display Your Todos <!-- displays [[fontawesome]] Loading Icon --><br/>

<nowiki></span></nowiki><br />

</code>

In Angular:

<code>

<input type="checkbox" id="checkbox" ng-model="checked"> <!-- Note: ng-model is a double-bound javascript variable within a template --><br />

<label for="checkbox"><nowiki>{{ checked }}</nowiki></label><br />

<nowiki><span ng-if="finishedLoading && checked"></nowiki><br /> <!-- In Angular the use of ng-if as an "Attribute" directive -->

<nowiki><ul></nowiki><br/>

<nowiki><li ng-repeat="todo in todos"></nowiki><br/>

<nowiki>{{ todo }}</nowiki><br/>

<nowiki></li></nowiki><br/>

<nowiki></ul></nowiki><br/>

<nowiki></span></nowiki><br/>

<nowiki><span ng-if="!finishedLoading && checked"></nowiki><br /> <!-- In Angular the use of ng-if as an "Attribute" directive -->

<nowiki><span class='fa fa-spin fa-spin'></span></nowiki><br />

<nowiki></span></nowiki><br/>

<nowiki><span ng-if="!checked"></nowiki><br /> <!-- In Angular the use of ng-if as an "Attribute" directive -->

<nowiki>Click on checkbox to display Your Todos</nowiki><br />

<nowiki></span></nowiki><br/>

</code>

=== Ember.js ===