learn Built-in Directives in VUE JS. That includes v-text, v-html, v-modal, v-on etc. I have worked with Vue for a good few years and there are still things I am learning. These are my notes from the first few lessons. Hope it helps someone else learn something they didn't already know.

1. Learning Vue Directives
This is taken from Sara Drasner's course on Frontend Masters. I did the original one
when I was just learning Vue for the first time. Since then I have worked with Vue
for a good few years and there are still things I am learning. These are my notes
from the first few lessons. Hope it helps someone else learn something they didn't
already know.
v-text
v-text works by setting the element's textContent property, so it will overwrite any existing
content inside the element. If you need to update the part of textContent, you should use
mustache interpolations instead.
<span v-text="msg"></span>
<!-- same as -->
<span>{{msg}}</span>
v-html
Contents of v-html are inserted as plain HTML - Vue template syntax will not be processed.
If you find yourself trying to compose templates using v-html, try to rethink the solution by
using components instead.
<div v-html="html"></div>
v-show
Toggle the element's visibility based on the truthy-ness of the expression value.
v-show works by setting the display CSS property via inline styles, and will try to respect
the initial display value when the element is visible. It also triggers transitions when its
condition changes.

2. v-if
Conditionally render an element or a template fragment based on the truthy-ness of the
expression value.
When a v-if element is toggled, the element and its contained directives / components are
destroyed and re-constructed. If the initial condition is falsy, then the inner content won't be
rendered at all.
Can be used on <template> to denote a conditional block containing only text or multiple
elements.
This directive triggers transitions when its condition changes.
When used together, v-if has a higher priority than v-for. We don't recommend using these
two directives together on one element — see the list rendering guide for details.
v-else
Denote the "else block" for v-if or a v-if / v-else-if chain.
○ Restriction: previous sibling element must have v-if or v-else-if.
○ Can be used on <template> to denote a conditional block containing only
text or multiple elements.
Example
<div v-if="Math.random() > 0.5">
Now you see me
</div>
<div v-else>
Now you don't
</div>
v-else-if
Denote the "else if block" for v-if. Can be chained.
○ Restriction: previous sibling element must have v-if or v-else-if.

3. ○ Can be used on <template> to denote a conditional block containing only
text or multiple elements.
● Example
<div v-if="type === 'A'">
A
</div>
<div v-else-if="type === 'B'">
B
</div>
<div v-else-if="type === 'C'">
C
</div>
<div v-else>
Not A/B/C
</div>
Lazy Models
v-model.lazy for when you don't want it to be always watching for changes and
only modify the DOM when you click something for example when you type and
then click and it appears on the page only when you click and not as you type.
<input v-model.lazy="msg" />
Trimming your Models
v-modal-trim will automatically trim whitespace in your inputs.
<input v-model.trim="msg" />
Making your Models a Number

4. v-model-number will convert any string to a number. We can use type="number"
but the value of HTML input elements will always return a string and if it can't be
parsed with parseFloat() the original value is returned. Therefore using
v-model-number ensures our input is of type Number.
<input v-model.number="age" type="number" />
Only show your Element Once
v-once is used to show things only once. If you modify the input text you will not
see the results change. The v-once will remain to show the same text. When the
page re-renders, the element/component and all its children will be treated as static
content and skipped.
<span v-once>This will never be updated: {{msg}}</span>
V-pre for Documenting
V-pre will not evaluate any text that adds moustache syntax, for example, and will
show it exactly as it is written.
<span v-pre>{{ this will not be compiled }}</span>
tag with $data

5. <pre> tag can be used with {{$data}} inside it and it will show you all the data you
have in your data property of that file/component.
Click and Mouse Events
v-on is the same as @ symbol and is great for binding events like click and
mouseenter.
<button v-on:click="counter += 1">Add 1</button>
You can use a ternary operator inside a click event which is good for showing
making sure a counter doesn't go below 0, for example.
<button @click="counter > 0 ? counter -=1 : 0">Add 1</button>
You can do multiple bindings which are ideal for games such as mouseup and
mousedown doing different things.
@mousemove.stop is comparable to e.stopPropagation().
@mousemove.prevent is like e.preventDefault().
@submit.prevent will stop the page from refreshing when submitting.
@click.once this click event will be triggered once not to be confused with v-once.
The click event will only be triggered once as opposed to v-once where the text
will be only rendered once. Good for when you want to stop something from
submitting multiple times or something to be clicked and then you don't want the
user to be able to keep on clicking, they can but it doesn't keep submitting or doing
what it has probably already done
@click.native so you can listen to native events in the DOM.
Key Codes
You can use key codes but this is changing in vue 3 to only use names same as
HTML spec.
Rendering HTML

6. v-html is not recommended if coming from an external source.
<div v-html="html"></div>
Rendering Text
v-text is the same as using the moustache templates, {{}}, and if you want to
dynamically update then it is recommended to use moustache templates and not
v-text
Read more on programming tutorials and download cheat sheets