Add vue notes

ledongthuc · Jan 1, 2021 · 6e25480 · 6e25480
1 parent 23e2bba
commit 6e25480
Show file tree

Hide file tree

Showing 15 changed files with 939 additions and 0 deletions.
diff --git a/vue/animation/cssanimate.html b/vue/animation/cssanimate.html
@@ -0,0 +1,62 @@
+<!doctype html>
+
+<html lang="en">
+  <head>
+    <meta charset="utf-8">
+    <script src="https://unpkg.com/vue@next"></script>
+    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/axios.min.js"></script>
+    <style type="text/css">
+      .shake {
+        animation: shake 0.82s cubic-bezier(0.36, 0.07, 0.19, 0.97) both;
+        transform: translate3d(0, 0, 0);
+        backface-visibility: hidden;
+        perspective: 1000px;
+      }
+      @keyframes shake {
+        10%,
+        90% {
+          transform: translate3d(-1px, 0, 0);
+        }
+
+        20%,
+        80% {
+          transform: translate3d(2px, 0, 0);
+        }
+
+        30%,
+        50%,
+        70% {
+          transform: translate3d(-4px, 0, 0);
+        }
+
+        40%,
+        60% {
+          transform: translate3d(4px, 0, 0);
+        }
+      }
+
+    </style>
+  </head>
+
+  <body>
+    <div id="app">
+      Push this button to do something you shouldn't be doing:<br />
+
+      <div :class="{ shake: noActivated }">
+        <button @click="noActivated = true">Click me</button>
+        <span v-if="noActivated">Oh no!</span>
+      </div>
+    </div>
+    <script>
+      const RootComponent = {
+        data() {
+          return {
+            noActivated: false
+          }
+        }
+      }
+      const app = Vue.createApp(RootComponent)
+      const vm = app.mount('#app');
+    </script>
+  </body>
+</html>
diff --git a/vue/animation/enterleave.html b/vue/animation/enterleave.html
@@ -0,0 +1,39 @@
+<!doctype html>
+
+<html lang="en">
+  <head>
+    <meta charset="utf-8">
+    <script src="https://unpkg.com/vue@next"></script>
+    <style type="text/css">
+      .fade-enter-active,
+      .fade-leave-active {
+        transition: opacity 0.5s ease;
+      }
+
+      .fade-enter-from,
+      .fade-leave-to {
+        opacity: 0;
+      }
+    </style>
+  </head>
+
+  <body>
+    <div id="app">
+      <transition name="fade">
+        <div v-if="show">Panel</div>
+      </transition>
+      <button @click="show = !show">Toggle</button>
+    </div>
+    <script>
+      const RootComponent = {
+        data() {
+          return {
+            show: true,
+          }
+        }
+      }
+      const app = Vue.createApp(RootComponent)
+      const vm = app.mount('#app');
+    </script>
+  </body>
+</html>
diff --git a/vue/component/index.html b/vue/component/index.html
@@ -0,0 +1,163 @@
+<!doctype html>
+
+<html lang="en">
+<head>
+  <meta charset="utf-8">
+  <script src="https://unpkg.com/vue@next"></script>
+  <style type="text/css">
+    .foo {
+      color: red;
+    }
+    .bar {
+      background-color: green;
+    }
+    .baz {
+      font-weight: bold;
+    }
+    .active {
+      text-decoration: underline;
+    }
+  </style>
+</head>
+
+<body>
+  <div id="app">
+    <div>Count: {{ count }}</div>
+    <div><button v-on:click="increase">Increase</button></div>
+    <div><my-component title="Test inheritance" class="baz"></my-component></div>
+    <div><my-component :class="{ active: true }"></my-component></div>
+    <div><my-component-multi-roots :class="{ active: true }" @increasechild="increaseN"></my-component-multi-roots></div>
+    <div><custom-input v-model="searchText" @testEmitValidation="console.log($event);" ></custom-input> - {{ searchText }}</div>
+    <div><notice>hello</notice></div>
+    <div>
+      <div><component :is="currentComponent"></component></div>
+      <select v-model="currentComponent">
+        <option v-for="component in possibleComponents" :value="component">{{component}}</option>
+      </select>
+    </div>
+  </div>
+  <script>
+    const RootComponent = {
+      data() {
+        console.log('data()');
+        return {
+          count: 4,
+          searchText: 'Default text',
+          currentComponent: "my-component",
+          possibleComponents: ["my-component","my-component-multi-roots","custom-input","notice"],
+        };
+      },
+      provide: {
+        user: 'Thuc Le',
+      },
+      beforeCreate() {
+        console.log('beforeCreate(): count is: ' + this.count);
+      },
+      created() {
+        console.log('created(): count is: ' + this.count);
+      },
+      beforeMount() {
+        console.log('beforeMount(): count is: ' + this.count);
+      },
+      mounted() {
+        console.log('mounted(): count is: ' + this.count);
+      },
+      beforeUpdate() {
+        console.log('beforeUpdate(): count is: ' + this.count);
+      },
+      updated() {
+        console.log('updated(): count is: ' + this.count);
+      },
+      beforeUnmount() {
+        console.log('beforeUnmount(): count is: ' + this.count);
+      },
+      unmounted() {
+        console.log('unmounted(): count is: ' + this.count);
+      },
+      methods: {
+        increase() {
+          this.count++;
+        },
+        increaseN(n) {
+          this.count += n;
+        },
+      },
+    }
+    const app = Vue.createApp(RootComponent)
+
+    app.component('my-component', {
+      // inheritAttrs: false,
+      template: `<p class="foo bar">Hi!</p>`
+    });
+
+    app.component('my-component-multi-roots', {
+      inject: ['user'],
+      template: `
+    <p class="foo bar" :class="$attrs.class">Hi!</p>
+    <span>This is a child component with inject {{ user }}</span>
+    <button @click="$emit('increasechild', 10)">Child button</button>
+  `
+    });
+
+    app.component('custom-input', {
+      props: ['modelValue'],
+      emits: {
+        'update:modelValue': null,
+        'testEmitValidation': function() {
+          return false;
+        },
+      },
+      template: `
+        <input
+          :value="modelValue"
+          @input="$emit('update:modelValue', $event.target.value)"
+          @change="$emit('testEmitValidation')"
+        >
+      `
+    });
+
+    const subComponent = {
+      props: {
+        text: [String, Number],
+        text2: {
+          type: [String, Number],
+          required: true,
+          default: 100,
+        },
+        text3: {
+          type: Number,
+          default: function() {
+            return 100
+          },
+          validator: function(value) {
+            return value > 0;
+          },
+        },
+        number: Number,
+        list: Array,
+        obj: Object,
+      },
+      template: `
+        <div>
+          <span>{{ text }} - {{ number }} - {{ obj.text }}</span>
+          <p v-for="item in list">{{ item }}</p>
+        </div>
+      `,
+    }
+
+    app.component('notice', {
+      components: {
+        'sub-component': subComponent,
+      },
+      template: `
+        <div style="background-color: red; padding: 10px;">
+          <div style="background-color: green"><slot></slot> - 
+          <sub-component text="text from sub-component" text2="a" :number="3" :list="[1,2,3]" :obj="{text: 'Object field'}" /></div>
+        </div>
+      `
+    });
+
+    const vm = app.mount('#app')
+  </script>
+</body>
+</html>
diff --git a/vue/component/slot.html b/vue/component/slot.html
@@ -0,0 +1,39 @@
+<!doctype html>
+
+<html lang="en">
+<head>
+  <meta charset="utf-8">
+  <script src="https://unpkg.com/vue@next"></script>
+</head>
+
+<body>
+  <div id="app">
+    <my-component>
+    </my-component>
+  </div>
+  <script>
+    const RootComponent = {
+      data() {
+        return {
+          count: 4,
+        };
+      },
+    }
+    const app = Vue.createApp(RootComponent)
+
+    app.component('my-component', {
+      data() {
+        return {
+          internalCount: 5,
+        };
+      },
+      template: `
+<div>
+  <slot>10</slot> -- {{ internalCount }} -- <slot name="second"></slot> -- <slot name="third" :bind="internalCount"></slot>
+</div>`,
+    });
+
+    const vm = app.mount('#app')
+  </script>
+</body>
+</html>
diff --git a/vue/computed_property/index.html b/vue/computed_property/index.html
@@ -0,0 +1,60 @@
+<!doctype html>
+
+<html lang="en">
+  <head>
+    <meta charset="utf-8">
+    <script src="https://unpkg.com/vue@next"></script>
+  </head>
+
+  <body>
+    <div id="app">
+      <div>
+        <p>Has published books:</p>
+        <span>{{ publishedBooksMessage }} {{ now }}</span>
+      </div>
+      <div>Full name: {{ fullName }}</div>
+      <div>First name: {{ firstName }}</div>
+      <div>Last name: {{ lastName }}</div>
+    </div>
+    <script>
+      const RootComponent = {
+        data() {
+          return {
+            author: {
+              name: 'John Doe',
+              books: [
+                'Vue 2 - Advanced Guide',
+                'Vue 3 - Basic Guide',
+                'Vue 4 - The Mystery',
+              ],
+            },
+            firstName: 'Thuc',
+            lastName: 'Le',
+          };
+        },
+        computed: {
+          publishedBooksMessage() {
+            return this.author.books.length > 0 ? 'Yes' : 'No';
+          },
+          now() {
+            return Date.now();
+          },
+          fullName: {
+            get() {
+              return this.firstName + ' ' + this.lastName;
+            },
+            set(newValue) {
+              const names = newValue.split(' ')
+              this.firstName = names[0]
+              this.lastName = names[names.length - 1]
+            },
+          },
+        },
+      }
+      const app = Vue.createApp(RootComponent)
+      const vm = app.mount('#app');
+
+      vm.fullName = 'John Doe'
+    </script>
+  </body>
+</html>