vue [Paul's Wiki]

This page is read only. You can view the source, but not change it. Ask your administrator if you think this is wrong.
====== Vue ======

Vue is a javascript framework for creating single page web apps.

I'm learning Vue while also learning javascript. 

The following tutorial has a really nice complete vue with rest api and vue
router example.

[[https://www.youtube.com/watch?v=vaCrzaeC-RE&list=PLPwpWyfm6JADRf8x1Jc0Da8R71WJyt-Jn&ab_channel=VueScreencasts|link]]

===== Directives =====

[[https://012.vuejs.org/api/directives.html#Empty_Directives|Directives]] bind a vue object to an HTML element and allow you to do stuff like update text or show an element.

==== v-bind ====

''v-bind'' allows you to programmatically define classes for an html tag.

[[https://vueschool.io/lessons/vuejs-dynamic-classes?friend=vuejs|Here's a good tutorial for this.]]

===== Vue Object =====

In the new Vue object, there seems to be a list of parameters you can pass in.

<code javascript>
new Vue({
    el: '#app',
    data:{
        price: 100,
        taxRate: 0.10,
    },

    computed: {
        tax: function() {
            return this.price * this.taxRate;
        }
    }
});
</code>

==== Computer Properties ====

Computer properties are just like properties but they are computed based on a
function. You then can use them just like a property in the template section.

<code javascript>
computer: {
  tax: function() {
    return this.price * this.taxRate;
  }
}
</code>

==== Methods ====

Methods are your functions in Vue. They take in parameters and can return
anything.

==== Slots ====

Slots 

Here's a [[https://stackoverflow.com/questions/55188478/meaning-of-v-slotactivator-on|decent explanation]].
===== Components =====

Components in Vue allow you to create html like elements that you custom make.
You need to pass in a template to build them. In the template you need to have
only one root element, so wrap everything in a ''div''.

<code javascript>
Vue.component('accordian', {
    props: ['item'],
    template: `
    <div>
        <hr>
        <p>{{ item.title }}</p>
        <button @click="item.details = !item.details">Show details</button>
        <p v-if="item.details">Details:</p>
        <p v-if="item.details">{{ item.description }}</p>
    </div>
    `,
});
</code>

Child components can communicate to parent components by using ''emit''.

Much easier to use Vuex which allows for a state store that you can access from
any component.

===== Vue CLI =====

Bunch of tooling for scaffolding a Vue project. Purty cool.

[[https://cli.vuejs.org/|Link]].

===== Firebase authentication =====

You can set up authentication through firebase by installing firebase in your project, setting it up using a firebase.js file and then setting up the router to guard routes that need to be authorized.

===== Vuetify =====

I am trying out Vuetify for a frontend because it looks to have more support
than Bulma (Beufy based front end). 

I added vue by doing ''vue add veutify''.

''<v-app>'' is the root tag for vueitfy. It needs to be there in every template.

You can use props on tags to modify them. They can be just one word on the html
tag.

Here's a sampling of stuff you can do to tags:

<code html>
<p class="pink lighten-4 red--text text--darken-4">
</code>

==== Extras ====

You can use fontawesome and icon materials with vuetify. You can add them to the
vuetify.js file.

<code js>
import '@fortawesome/fontawesome-free/css/all.css' // Ensure you are using css-loader
import '@mdi/font/css/materialdesignicons.css' // Ensure you are using css-loader
import Vue from 'vue'
import Vuetify from 'vuetify'

Vue.use(Vuetify, {
 iconfont: 'fa'
})
</code>

==== Grid ====

Learning how to use Vueitfy grid.

All grid elements go inside a ''v-container'' tag.

The tags that go in ''v-container'' used to be called ''v-layout'' and
''v-flex'' but were changed to ''v-row'' and ''v-col'' in 2.x.

==== Input validation ====

You can run rules inside a debounce function very easily if you follow this
syntax:

https://codepen.io/bviala/pen/WYeVyP

==== Watch ====

To run code whenever a variable changes use watch functions. To watch data that
is nested in other data you can follow this:

https://stackoverflow.com/questions/42133894/vue-js-how-to-properly-watch-for-nested-data

==== Data Tables ====

https://www.youtube.com/watch?v=lv-KHdoeSoI&ab_channel=VueScreencasts