-
Notifications
You must be signed in to change notification settings - Fork 0
Vue vs. Razor
JessicaOPRD edited this page Jun 30, 2023
·
21 revisions
Razor Pages vs. Razor Components
| Description | Vue | Razor | Notes |
|---|---|---|---|
| Manifest file | package.json |
ProjectName.cfproj |
| Description | Vue | Razor | Notes |
|---|---|---|---|
| Global imports | main.js |
_Imports.razor |
| Description | Vue | Razor | Notes |
|---|---|---|---|
Layout including <head>
|
index.html |
_Host.cshtml |
|
| Default base layout | MainLayout.razor |
Wraps all Pages
|
| Description | Vue | Razor | Notes |
|---|---|---|---|
| Automated build/bundling | Relatively easy to set up with Webpack using a generator or official tutorials | ||
Can use <style lang="sass">
|
Yes |
| Description | Vue | Razor | Notes |
|---|---|---|---|
| File type | *.vue |
*.razor |
|
Uses <template> tag |
Yes | No | |
Uses <style> tag for styles |
Yes | Yes | |
| Supports scoped styles |
Yes <style scoped>
|
Yes (*.razor.css) |
Note that scoped styles can be confusing to work with, because they don't follow some of the expected CSS conventions (best used for true styles limited to the component and not its children). Vue and Razor both support custom pseudo-selectors like ::deep to access child component properties. Razor also allows a [ScopedCss] attribute at the component class definition? |
| Attribute Bindings | <component :hidden="isHidden"></component> |
<component hidden="@IsHidden"></component> |
To preserve type — not using the colon in Vue results in basic string without interpolation |
| Set Event Handlers | <component @click="onClick()"></component> |
<Component @onclick="OnClick"></Component> |
I prefer the parens because it suggests invocation and not passing a function as an argument |
| Access Component API |
<component ref="myName"></component> this.$refs.myName.open()
|
<component @ref="myName"></component> myName?.Open()
|
Note that the API is not necessarily available yet depending on where in the lifecycle the method is called. |
| Slots |
<slot name="title"></slot> in component maps to <template #title></template in instance use |
RenderFragment property name in component maps to matching tag name in instance use (<Body></Body>) |
It is more difficult to know a slot from a component in Blazor, so I will adopt a convention that seems popular — slots should be appended with Content, such as BodyContent
|
| Attribute "Splatting" | <button v-bind="$attrs"></button> |
Yes <button @attributes="DefaultAttributes></button>
|
Splatting as defined by Microsoft. Allows attributes to be applied from a defined object instead of manually. |
| Dynamic Boolean-driven Classes | <component class="my-component__panel" :class="{ 'my-component__panel--outlined': outlined }"></component> |
<component class='my-component__panel @(Outlined ? "outlined" : "")'></component> |
Razor method is borderline unacceptable. Double quotes can be used for class attribute, but syntax highlighting gets confused. Cannot use single quotes inside attribute because it's reserved for characters in the C# context. Better method may be to use attribute splatting. |
| Description | Vue | Razor | Notes |
|---|---|---|---|
| Text Interpolation | {{ value }} |
@Value |
|
| Expressions | {{ message.split('').reverse().join('') }} |
@( ) |
|
| Template Literals (String Templates) | <component :id=[backtick]modal-${computedId}[backtick]"></component> |
<Component id="modal-@computedId"></Component> |
Testing what this does?