Nguyễn Khánk's Wiki

# Maybe you don't know these tricks

# Cheatsheet

# Watchers

# Watch nested data

Useful when data is Arrays or Objects




 







export default {
  watch: {
    test: {
      deep: true, 
      handler(newVal, oldVal){
          // your code
      }
    }
  }
}

# Triggered on initilization

A watcher will only fire when the prop's value changes, but we often need it to fire once on startup as well.




 







export default {
  watch: {
    test: {
      immediate: true, 
      handler(newVal, oldVal){
          // your code
      }
    }
  }
}

# A Vue Template Have Multiple Root

Got error when try to do this!

<template>
  <input type="text" v-model="message">
  <span>{{ message }}</span>
</template>

Solution: Fragments In Vue (opens new window)

  • Download package: npm i -S vue-fragment
  • Install Plugin
import { Plugin } from 'vue-fragment';
Vue.use(Plugin);
  • Component
<fragment>
  <input type="text" v-model="message">
  <span>{{ message }}</span>
</fragment>

# VueTypes

A library that help you save time on writing code =))

npm i vue-types --save

# Atom - File Structure

atoms/
  button/
    index.js
    button.vue    
    button.stories.js
    button.spec.js
    button.scss
  ...
molecules/
  product-thumb/
    product-thumb.js
    product-thumb.vue
    product-thumb.stories.js
    product-thumb.spec.js
    product-thumb.scss
  ...
organisms/
  product-featured/
    product-featured.js
    product-featured.vue
    product-featured.stories.js
    product-featured.spec.js
    product-featured.scss
    product-featured.graphql
  ...
templates/
  store/
    product/
      product.js
      produc.vue
      product.stories.js
      product.spec.js
      product.scss
  ...
pages/
  store/
    product/
      product.js
      product.vue
      product.stories.js
      product.spec.js
      product.scss
      product.graphql
  ...

# Atoms (nguyên tử)

  • They are the smallest undividable components.
  • Think generic. They have no logic for reusability.
  • they can have variations.
  • They have 1 folder level

# Molecules (phân tử)

  • They are a combination of atoms and molecules.
  • Think generic. They also have no logic.
  • They have variations.
  • They have slots
  • They have 1 folder level

# Organisms (sinh vật)

  • They are a combination of atoms and molecules and organisms.
  • Specific. They start to have logic, and by logic, I mean app-related logic.
  • They can pull data via GraphQL.
  • They have variations.
  • They have slots.
  • They have 1 folder levels.

# Templates (mẫu)

  • They are the final combination of atoms, molecules, and organisms nicely put together to present the final layout of a page, yet without the data.
  • They have no data.
  • They have logic.
  • They have 2 folder levels. ( the extra level helps segment components based on their app logic)

# Pages

  • They define the list of pages our app will have.
  • They have data from GraphQL.
  • They have little to no logic.
  • They have 2 folder levels.

Finding the perfect component file structure for our VueJS App. (opens new window)

# 26 time saving tips

Read this article (opens new window)

← Vuepress →