I don't have any experience with vue, how would the vue if/else example look if you had multiple if/else statements in the template? (i.e. how do you specify that a particular else statement pairs with an if statement?)
In Vue, it's implied by the order of the blocks, the else needs to follow a v-if block (or v-else-if). So you would do something like this:
<templatev-if="someCondition"><p>Some text</p><button>An action</button></template><templatev-else-if="someOtherCondition"><p>Some other text</p><button>A different action</button></template><templatev-else><p>Another different text</p><button>Another different action</button></template><templatev-if="anotherSetOfConditions"><p>Some more text</p></template><templatev-else><p>Etc</p></template>
Ah, well that's certainly intuitive! And that's definitely a better if/else syntax than what Angular has.
Again, not to invalidate the point of your article (but rather to explain why I think Angular is the way it is):
In Angular both ngIf and ngFor are simply standard structural directives which are shipped in CommonModule (and hence optional in an app). They rely on the same API that anyone can use to customize Angular. The limitations of that API (which is really pretty simple) are what create the wonky syntax. Personally, ngIf and ngFor (specifically) are so common that I think Angular would benefit if the framework gave them special treatment (which could improve the API for devs). Though I can see value in having complete consistency within the framework.
Edit I suppose making ngIf and ngFor special also might make them non-removable. And that would clash with Angular's goal of reducing the minimum framework size below 2kb (important for custom elements).
In Vue, is it possible to create a custom structural directive (or whatever Vue would call it) with similar functionality to v-if / v-else? e.g. is it possible to create a custom v-unless structural directive (which would also pair with v-else) for an app?
It is possible to create custom directives with Vue vuejs.org/v2/guide/custom-directiv... I never tried it, but since the hooks have access to the element el to manipulate the DOM, I guess you could create a simple v-unless that prevents it from rendering based on the binding.value. But it would be a standalone directive, I can't think of a way to pair it with an v-else or any other directive.
For further actions, you may consider blocking this person and/or reporting abuse
We're a place where coders share, stay up-to-date and grow their careers.
Not that this invalidates your point, but FYI this example
can be simplified to
Or alternatively to
I don't have any experience with vue, how would the vue if/else example look if you had multiple if/else statements in the template? (i.e. how do you specify that a particular
else
statement pairs with anif
statement?)Right! Thanks for your input.
In Vue, it's implied by the order of the blocks, the
else
needs to follow av-if
block (orv-else-if
). So you would do something like this:If you did something like this:
It would raise an error
v-else used on element <div> without corresponding v-if.
Ah, well that's certainly intuitive! And that's definitely a better
if/else
syntax than what Angular has.Again, not to invalidate the point of your article (but rather to explain why I think Angular is the way it is):
In Angular both
ngIf
andngFor
are simply standard structural directives which are shipped inCommonModule
(and hence optional in an app). They rely on the same API that anyone can use to customize Angular. The limitations of that API (which is really pretty simple) are what create the wonky syntax. Personally,ngIf
andngFor
(specifically) are so common that I think Angular would benefit if the framework gave them special treatment (which could improve the API for devs). Though I can see value in having complete consistency within the framework.ngIf
andngFor
special also might make them non-removable. And that would clash with Angular's goal of reducing the minimum framework size below 2kb (important for custom elements).In Vue, is it possible to create a custom structural directive (or whatever Vue would call it) with similar functionality to
v-if
/v-else
? e.g. is it possible to create a customv-unless
structural directive (which would also pair withv-else
) for an app?Good to know, that's illuminating! :)
It is possible to create custom directives with Vue vuejs.org/v2/guide/custom-directiv... I never tried it, but since the hooks have access to the element
el
to manipulate the DOM, I guess you could create a simplev-unless
that prevents it from rendering based on thebinding.value
. But it would be a standalone directive, I can't think of a way to pair it with anv-else
or any other directive.