diff --git a/links.md b/links.md new file mode 100644 index 0000000..2bea4ef --- /dev/null +++ b/links.md @@ -0,0 +1,31 @@ +Vue resources/references + +Awesome Vue +https://github.com/ais-one/vue-crud-x + +Real time data-table editing in Vue: +https://www.freecodecamp.org/news/how-to-build-a-real-time-editable-data-table-in-vue-js-46b7f0b11684/ + +Integrating a datetime into a datatable CRUD: +https://www.reddit.com/r/vuejs/comments/apdm4u/how_to_integrate_a_datepicker_like_this_in/ + +Vuetify CRUD datatables: +https://github.com/ais-one/vue-crud-x + +Loading bar component for top of page: +https://medium.com/js-dojo/how-to-visualize-application-loading-state-in-vuetify-44f0f0242094 +https://gist.github.com/AlexeyIsavnin/c24d7ae75bfdb599907bd36d6bfc0344 + +Using AJAX and rate limiting with lodash: +https://vuejs.org/v2/guide/computed.html#Watchers + +Composition API in Vue3: +https://css-tricks.com/an-early-look-at-the-vue-3-composition-api-in-the-wild/?ref=madewithvuejs.com + +Libraries that work with Vue: + +JS library to simplify working with arrays, numbers, objects, strings, etc. + +- Iterating arrays, objects, & strings +- Manipulating & testing values +- Creating composite functions diff --git a/notes.md b/notes.md new file mode 100644 index 0000000..5f3ba5e --- /dev/null +++ b/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 ``. `lazy-validation` will set this to true unless there are visible validation errors. + +`` + +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 ` + +``` + +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 ` diff --git a/src/views/SignUpConfirm.vue b/src/views/SignUpConfirm.vue new file mode 100644 index 0000000..986dd89 --- /dev/null +++ b/src/views/SignUpConfirm.vue @@ -0,0 +1,60 @@ + + + + +