Tech notes

# VueJS Tips

1. VueJS component contains 3 parts: - template: html view - script: logics - style: css styling (scoped: meaning style only works for this component)

2. data(): contains all the data (eg API returns) for the component

3. methods: a place to write all customized functions

4. Vue LifeCycle methods:

  • beforeCreate(): before template get ready
  • created(): able to get data() attributes value for this component
  • beforeMount(): runs before initial render after template or render functions have been compiled
  • mounted(): component finish rendered [proves that component has finished load process (we can shw some data after mounted)]
  • beforeUpdate(): get running after data changed and before DOM re-rendered
  • updated(): trigger DOM re-render
  • beforeDestroy(): reset some values before component vanished
  • destroyed(): destroyed component

beforeCreate && created -> initialization beforeMount && mounted -> render beforeUpdate && updated -> re-render beforeDestroy && destroyed -> teardown

reference here

5. common directives:

  • v-once: only the first time variable setup value get rendered, eg: you set variable X value at data() function as 1, and mounted() set X to 2, so now, only 1 get rendered !!
  • v-html: render html pieces of code which is set inside data() function
  • v-for: loop array of elements, eg below:
  <li v-bind:key="greeting.content" v-for="(greeting, index) in greetings">
    {{ index + 1 }} - {{ greeting.content }}
  </li>
  • v-on:click: trigger clicks event, define method inside methods object [another syntax sugar: @click]
  • v-bind:value: bind the value with data() function value [another syntax sugar: :value]
  • @input="handleChange($event)": 2 way data binding, example below:
  <input type="text" :value="textString" @input="handleChange($event)" />
  or simpler solution: using `v-model`:
  <input type="text" v-model="textString" />
  • @keyup.enter: try to trigger event when we click Enter key on keyboard

6. Command vue ui is so cool, which allows developer to create a project visually and also able to run build process and so easily check with the code performance !!!!!!!!!!

7. computed vs methods:

  • computed:
    • when we need to filter or transform the data, we consider to use computed property
    • computed values are cached for avoiding repetitive calculations (very important)
    • in html, no need parentheses ()
  • method:
    • just like normal js method,
    • normally don't use arrow function, because not able to read this value
    • in html, needs parentheses ()

*** Difference example: addToA() and addToB() methods put inside methods and computed, which results are different (see here)

8. watch: used for handling expensive operations like frequently data change -> ask user input and make an API request call and get its response [Example - here]

  • here is the difference between computed and watch.

  • computed: create a new property & do re-calculation if any dependent properties get updated, cannot pass any arguments

  • watch: does NOT create new property, watch changes only for one specific property and has arguments new and old

9. Vue Reactivity concept: simple word, when we change a element data value, the page will reflect the changes and get value updated as latest value !!!! This video is like must watch!!

10. $emit: trigger an event and also allows to pass data from child to parent level, example:

// child component
// method:
onClickButton() {
  this.$emit('clicked', 'aloha');
}
// trigger:
<div><button @click="onClickButton">pass child data to parent component</button></div>

// parent component
// method:
onClickChild(value) {
  console.log('value from child pass to parent: ', value);
  this.childText = value;
}
// trigger:
<Child @clicked="onClickChild($event)" />
<p>Text from child: {{ childText }}</p>

11. event bus: allow to pass data between components, example: Reference lazy today ~~~

12. mixins: is similar concept with sass mixin functions, basically just make code DRY!!! Example:

// create a mixin function (extract same function block code out to an independent file)
export default {
  computed: {
    ... ...
  }
}
// Then, call mixin from each component:
import mixinFunction from './relative/path/from/codebase';
export default {
  data() {
    ...
  },
  methods: ...,
  mixins: [mixinFunction]
}
// now your code no longer repeated!!

13. dynamic component: change component view based on condition, 2 key words:

  • component: is the <component :is="condition ? componentName : anotherComponent"></component>
  • keep-alive: make sure previous component contents still there, like fulfilled form, contents kept !!!

Example:

<keep-alive>
  <component :is="currentComponent"></component>
</keep-alive>
<v-btn @click="currentComponent = 'AppDynamicComponentTwo'">
  Switch To AppDynamicComponentTwo
</v-btn>
<v-btn @click="currentComponent = 'AppDynamicComponentOne'">
  Switch To AppDynamicComponentOne
</v-btn>

14.

Please send to me by email to correct me here if it's wrong

← VueX 101 →