• TUESDAY: make an example with Vue and Express-vue to show images according to selected option dynamically in front-end without reloading the whole page.

• Finished routes and models for Nhan project

• WEDNESDAY

• AUTHENTICATION:

Tools: Passportjs has many hundreds of strategies to help authentication with other external websites e.g. facebook, google, spotify, etc.

HTTPs requests are stateless so requests are one-time thing. Session allows us to help states with https requests

• VUE:

A new vue instance binded to a html element -> all data and methods are only applied to this element

Vue has several directives:

v-bind:src='link' -> v-bind binds data to an attribute

v-html applies full html structure -> since Vue in default only parses text to existing html structure

v-on:click='function' -> v-on binds events

Vue has a default 'event' object

event.stopPropagation() -> stops the event to move up and execute parent events, only executes this event

.stop -> event modifier

:class="{someClass: condition}" allows you to specify under which condition someClass should be added to this element.

:class="someClass" on the other hand allows you to dynamically bind to some object working in the same way as in the first example (so you basically removed the logic from the template and put it into your JS code).

:class="[someClass, anotherClass]" allows you to add multiple classes to an element. Here,someClass CAN also be an object with thename: condition mapping but it can also just be a class name (which then is always added, since it doesn't have a condition)

:style is used to apply inline CSS -> can set the CSS attribute name directly or bind an object of CSS attributes

:class is used to dynamically bind classes depending on conditions

Conditional with v-if and v-show: v-if will completely remove the DOM elements while with v-show, elements are not detached and their style is updated with "display: none"

Keep track of elements when using v-for with :key

• Multiple Instances

You can use multiple Vue instances refering to different block of HTML elements in the same file.

We can set

var vm1 = new Vue ({ el: '#app1', data: {...},......})
var vm2 = new Vue({ el: '#app2', data {....},........}) // inside vm2, you can access vm1 properties with vm1.dataName

In each Vue instance, Vue keeps track and manages the instance data and methods with proxy so when changes applies to these data and methods, Vue can update them if required. However out of the Vue instance, if we add new property likevm1.newProp = "new data is not tracked!"

This newProp is added to vm1 but it's not tracked and Vue won't handle the newProp the same way as other data and methods in the instance

• $el: refers the HTML template that the Vue instance mounts to
• $data: holds the data object of the instance -> E.g. vm1.dataProp = vm1.$data.dataProp

• $ref: can add attribute ref="myRef" to any html element and then access them with Vue by this.$ref.myRef

• $mount: instead of use el: '#app1', we can set vm1.$mount('#app1')