demo(vue): update

Author: farfromrefug

demo-snippets/vue/BottomNavigation.vue

@@ -28,29 +28,29 @@
 
                 <!-- The number of MDTabContentItem components should corespond to the number of MDTabStripItem components -->
                 <MDTabContentItem>
-                    <Frame id="test" backgroundColor="transparent">
+                    <Frame id="test" backgroundColor="transparent" @loaded="onLoaded('first')" @unloaded="onUnloaded('first')"  @selected="onSelected('first')" @unselected="onUnselected('first')">
                         <Page backgroundColor="transparent">
-                            <GridLayout backgroundColor="transparent" @loaded="onLoaded('red')">
+                            <GridLayout backgroundColor="transparent">
                                 <Label text="First Page" class="h2 text-center" @tap="navigateToTabsSample"></Label>
                                 <Button text="show alert" @tap="showTestAlert" verticalAlignment="center"></Button>
                             </GridLayout>
                         </Page>
                     </Frame>
                 </MDTabContentItem>
                 <MDTabContentItem>
-                    <GridLayout backgroundColor="transparent" @loaded="onLoaded('green')">
+                    <GridLayout backgroundColor="transparent" @loaded="onLoaded('second')" @unloaded="onUnloaded('second')" @selected="onSelected('second')" @unselected="onUnselected('second')">
                         <Label text="Second Page" class="h2 text-center"></Label>
                     </GridLayout>
                 </MDTabContentItem>
                 <MDTabContentItem>
-                    <GridLayout backgroundColor="yellow" @loaded="onLoaded('yellow')">
+                    <GridLayout backgroundColor="yellow" @loaded="onLoaded('third')" @unloaded="onUnloaded('third')" @selected="onSelected('third')" @unselected="onUnselected('third')">
                         <Label text="Third Page" class="h2 text-center"></Label>
                     </GridLayout>
                 </MDTabContentItem>
                 <MDTabContentItem>
-                    <Frame id="test2">
+                    <Frame id="test2" @loaded="onLoaded('fourth')" @unloaded="onUnloaded('fourth')" @selected="onSelected('fourth')" @unselected="onUnselected('fourth')">
                         <Page>
-                            <GridLayout backgroundColor="transparent" @loaded="onLoaded('red')">
+                            <GridLayout backgroundColor="transparent">
                                 <Label text="Fourth Page" class="h2 text-center" @tap="navigateToTabsSample"></Label>
                                 <Button text="show alert" @tap="showTestAlert" verticalAlignment="center"></Button>
                             </GridLayout>
@@ -85,6 +85,15 @@ export default Vue.extend({
         onLoaded(name) {
             console.log('BN onTabLoaded', name);
         },
+        onUnloaded(name) {
+            console.log('BN onTabUnloaded', name);
+        },
+        onSelected(name) {
+            console.log('BN onSelected', name);
+        },
+        onUnselected(name) {
+            console.log('BN onUnselected', name);
+        },
         navigateToTabsSample() {
             this.$navigateTo(Tabs);
         },