Angular and Vue: add named/non-named template examples (DevExpress#7179) (DevExpress#7181)

Author: vladaskorohodova

includes/custom-templates.md

@@ -207,8 +207,6 @@ Collection UI components are components that include the **items** property. The
 
 ##### Angular
 
-Declare **named** templates within the component's markup but outside the templated element. **Non-named** templates should be declared inside the templated element.
-
     <!-- tab: app.component.html -->
     <dx-list>
         <dxi-item>
@@ -246,10 +244,34 @@ Declare **named** templates within the component's markup but outside the templa
     })
     export class AppModule { }
 
-##### Vue
-
 Declare **named** templates within the component's markup but outside the templated element. **Non-named** templates should be declared inside the templated element.
 
+    <!-- tab: app.component.html -->
+    <!-- Named template (the name is 'pictureCellTemplate'): -->
+    <dx-data-grid ... >
+        <dxi-column
+            dataField="Picture"
+            [width]="100"
+            [allowFiltering]="false"
+            [allowSorting]="false"
+            cellTemplate="pictureCellTemplate"
+        ></dxi-column>
+        <div *dxTemplate="let data of 'pictureCellTemplate'">
+            <img [src]="data.value" />
+        </div>
+    </dx-data-grid>
+
+    <!-- Non-named template -->
+    <dx-toolbar>
+        <dxi-item location="center" locateInMenu="never">
+            <div *dxTemplate>
+                <div class="toolbar-label"><b>Tom's Club</b> Products</div>
+            </div>
+        </dxi-item>
+    </dx-toolbar>
+
+##### Vue
+
     <!-- tab: App.vue -->
     <template>
         <DxList>
@@ -291,6 +313,38 @@ Declare **named** templates within the component's markup but outside the templa
     }
     </script>
 
+Declare **named** templates within the component's markup but outside the templated element. **Non-named** templates should be declared inside the templated element.
+
+    <!-- tab: App.vue -->
+    <!-- Named template (the name is 'pictureCellTemplate'): -->
+    <template>
+        <DxDataGrid ... >
+            <DxColumn
+                :width="100"
+                :allow-sorting="false"
+                data-field="Picture"
+                cell-template="pictureCellTemplate"
+            />
+            <template #pictureCellTemplate="{ data }">
+                <img :src="data.value" />
+            </template>
+        </DxDataGrid>
+    </template>
+
+    <!-- Non-named template -->
+    <template>
+        <DxToolbar>
+            <DxItem
+                location="center"
+                locate-in-menu="never"
+            >
+                <template #default>
+                    <div class="toolbar-label"><b>Tom's Club</b> Products</div>
+                </template>
+            </DxItem>
+        </DxToolbar>
+    </template>
+
 ##### React
 
     <!-- tab: App.js -->