Differences

This shows you the differences between two versions of the page.

Link to this comparison view

Next revision 		Previous revision
vue [2020/09/24 03:32]
paul created 		vue [2020/11/14 19:34] (current)
Line 4: Line 4:
  
 I'm learning Vue while also learning javascript.  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 ===== ===== 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. [[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
  
  • vue.txt
  • Last modified: 2020/11/14 19:34
  • (external edit)