Articles translated from

• Vue.js を 100 時間 勉強 し て 分 か っ た こ と

Reference source

• Vue.js: 複数 の ク ラ ス を バ イ ン デ ィ ン グ す る 場合 ど の よ う な 書 き 方 が あ る か
• The difference between COMPUTED and METHODS in Vue.js
• vuejs.org

The learning content includes:

• Vue JS 2 – The Complete Guide course (incl. Vue Router & Vuex) on Udemy (85h)
• Code practice (15h)

Levels required before starting, have knowledge of javascipt, jquery. Previously learned about Reactjs

Basic syntax of Vue.js

Basic Syntax of Vuejs ## Vue.js instance Vue.js instance is initialized in following syntax

app.js is imported with the vue.js file into the html template file

{{}}

The above syntax is used to call the properties of the Vue instance

v-bind

When you want to assign dynamic values ​​to attributes of html tags

v-one

Written inside html tag, used to print fixed value (no possibility to change, print out 1 time at component load)

v-html

Used when printing the value in html

v-on

Register the event handler function

v-on:click=“counter++” Can write js code inline, in code, not if or for Also can be written as v-on:keyup.enter.space (when press enter ??)

v-model

Used to bind data to html tags that refer to the properties of the vue instance

@

Short spelling of v-on: @click="link" Instead of v-bind : can also write : ##: class Assign dynamic class attribute for html tag

You can use an array to assign multiple class names

There is also a way of writing

Use conditional math

: style

Assign dynamically style html element

Css attribute names are written in cameCase

computed

The computed object property of the Vuejs instance is almost identical to the method, but different from the method it will be used when it is necessary to determine when the property in the data is saved. Another difference is that when calls to computed calls are not needed ()

Result

• When the computed button is pressed, the printTextComputed and printTextMethod functions both execute
• When the button method is pressed, only the printTextMethod function is executed

Reason

• methods Do not know when the value used in the function changes, so it runs continuously to check (Any time there is an event)
• computed properties Determines the value used in the variable function, so it is not necessary to run continuously (Only events related to handling the property value of the data it is referencing)

See the difference between COMPUTED and METHODS in Vue.js at The difference between COMPUTED and METHODS

watch

An object type property of the Vuejs instance, used for defining the behavior when the value of a particular property changes. Not only data properties, computed properties can also be watched

v-if, v-else

Determines whether the html tag is rendered in the DOM

v-show

Determines whether the html tag is displayed or not ( display: none; )

v-for

Render array elements

When needing index

Can be used for object type. The second argument is the key, the third is the index

TODO: explanation

Lifecycle

The life cycle of a vue instance includes the following hooks. Depending on the purpose can write more processing at the desired time.

• beforeCreate
• Created
• beforeMount
• mounted
• (Render DOM)
• (DOM Changed)
• beforeUpdate
• updated
• (this. $ destroy ();)
• beforeDestroy
• Destroyed

Vue component

props

Use when receiving data from another component

Parent Component -> Child Component

Passed quite simply from parent to child using v-bin: