adding latest tutorial

notes.md

@@ -0,0 +1,173 @@
+To Do:
+
+Organise Trilium with the Vue development
+
+- Have a note for tutorials
+- Have a note for references (grouped by category)
+
+Once done with this, go through this and the auth0 tutorial and pick out any vue/javascript snippets into their own trilium note.
+
+Notes
+
+Vuetify
+
+Forms
+https://vuetifyjs.com/en/components/forms
+
+To make a form you define a `v-model` of valid in the `<v-form>`. `lazy-validation` will set this to true unless there are visible validation errors.
+
+`<v-form v-model="valid" ref="form" lazy-validation="">`
+
+The `v-form` component has three functions that can be access by setting a `ref` on the component.
+
+- this.\$refs.form.validate()
+- this.\$refs.form.reset()
+- this.\$refs.form.resetValidation()
+
+Validation is easy: https://vuetifyjs.com/en/components/forms/#usage
+
+Custom rules can be done: https://vuetifyjs.com/en/components/forms/#creating-rules
+
+When the `submit()` event is made, `this.$refs.form.validate()` will check the form.
+
+`v-model` is used to bind data 2 ways to the form and the data instance in vue.
+
+https://vuejs.org/v2/guide/forms.html
+
+`v-text-fields` are used to render inputs in a form.
+
+https://vuetifyjs.com/en/components/text-fields/
+
+Using `:` before a prop means that the prop is dynamic and the value of it contains javascript.
+
+`:append-icon="passwordVisible ? 'visibility' : 'visibility_off'"`
+
+Here this is saying that `append-icon` takes a dynamic value. We are using the `? :` syntax - conditional ternary operator. This is short for a if then else.
+
+Available icons are (with `mdi-` prefix) https://materialdesignicons.com/ or https://material.io/resources/icons/?style=baseline
+
+Double bang notation
+
+The notation `!!variable` is double bang notation
+https://medium.com/better-programming/javascript-bang-bang-i-shot-you-down-use-of-double-bangs-in-javascript-7c9d94446054
+
+It returns the `variable` _truthy_ value. I.e if it's a string with a value it will be true. This is similar to doing `variable.__bool__` in python.
+
+When writing inputs you can create custom rules.
+
+For example: (in the `computed`)
+
+```
+passwordRules() {
+    return {
+    required: value => !!value || 'Required.',
+    min: v => v.length >= 8 || 'Min 8 characters',
+    emailMatch: () => ('The email and password you entered don\'t match'),
+    }
+},
+```
+
+For a `<v-text-field`:
+
+```html
+<v-text-field
+  v-model="password"
+  :append-icon="passwordVisible ? 'visibility' : 'visibility_off'"
+  :rules="[passwordRules.required, passwordRules.min]"
+>
+</v-text-field>
+```
+
+The value of the field will be passed to the method `passwordRules()` and passed into the function inside it. This way, we can verify that the value exists (using double bang notation) and that it has a minimum length.
+
+Events on the input can be defined using the following syntax:
+`@click:append="passwordVisible = !passwordVisible"`
+This event (each event is documented in the Vuetify docs) will trigger when you click on the append icon you defined.
+
+You can write regex in javascript by placing it between two slash's.
+They are useful with arrow notation to check if something matches a regex.
+`v => /.+@.+/.test(v) || 'E-mail must be valid.'`
+
+Backtick strings is javascript's version of f-strings in python. You can then access variables with `${}` notation:
+
+```
+console.log(
+          `SIGN UP username: ${this.username}, password: ${this.password}, email: ${this.username}`
+        )
+```
+
+You can write an if block like you would a function:
+
+```javascript
+if (this.$refs.form.validate()) {
+}
+```
+
+You can also follow this with an else (aligned with the end of the if block)
+
+```javascript
+if (condition) {
+  //  block of code to be executed if the condition is true
+} else {
+  //  block of code to be executed if the condition is false
+}
+```
+
+You can also use the conditional ternary notation of
+`condition ? true_action : false_action`
+
+Computed (properties and watchers)
+https://stackoverflow.com/a/44350932
+
+With computed you are creating getters/setters. You do this by writing the function in the `computed` directive.
+Here we have written a computed property for `emailRules()` - we are using this function to check input on a form is correct.
+
+The main difference between `computed` and a `method` is that `computed` will cache automatically. It will only update, if the value updates. Everytime you call it it will use its cache. Expensive operations can be done this way.
+
+Remember: anything in `data` you can access in the `<script>` with `$this.var`. In the html you can access the var name directly `{{var}}`
+
+Watchers
+https://vuejs.org/v2/guide/computed.html#Watchers
+
+The watch directive can be used to watc variables in the component. You create a function that is the same name as the variable you want to watch. This function should take two arguments: new and old. (You can use this to compare inputs for exmaple).
+
+There is a good example of using this functionality to do an ajax call (with rate limiting) in the documentation for watches above.
+
+
+
+Sending form data to an api
+
+You can check the form is in a valid state by doing `this.$refs.form.validate()`
+
+You can then access each component of the form to the variable you defined in the `v-model` attribute.
+
+`<v-text-field v-model="username" />` can be accessed with `this.username`.
+
+Remember that the variable defined in the `v-model` has to be defined in the `data`.
+
+
+Usage of `$this`
+
+The following (under the "No separate this" header) explains well.
+https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions/Arrow_functions
+
+When you write a function and define a variable, you might want to write another function inside. If you use `$this` inside the second function, you will find it is bound to the global scope, not the parent function! 
+
+To fix this behaviour, you should _close over_ the variable `$this`:
+
+```javascript
+function Person() {
+  var that = this;
+  that.age = 0;
+
+  setInterval(function growUp() {
+    // The callback refers to the `that` variable of which
+    // the value is the expected object.
+    that.age++;
+  }, 1000);
+}
+```
+
+This is similar to "closure" in python.
+
+