<aside> 💡 Debrief:
Vue.js is a JavaScript framework for building user interfaces. The component is divided into three sections: <template>, <script>, and <style>.
1. <template>: This section contains the HTML markup. It describes the structure of the Vue component and how it will be rendered in the DOM.
2. <script>: This section contains the JavaScript code that controls the behavior of the Vue component. It's where you define data, methods, computed properties, lifecycle hooks, etc.
3. <style>: This section contains the CSS styles that are applied to the Vue component.
</aside>
<aside> 💡 helpful lifecycle diagram: https://vuejs.org/guide/essentials/lifecycle.html
</aside>
uses file-based routing system
Can add in components like <Archived_Jobs />, and that functions like any other html component like <h1>
<template> tag covers all html/ui components
<script> tag covers all javascript stuff
{{ }} in the <div> allows you to print variables from below
v-for lets you iterate from a list (like a for loop)
<div
v-for="whatever in example_list"
@click="print_example(whatever)"
class="bg-red-50 border-b-2 border-black"
>
v-if is another vue feature (if statement!)
<p v-if="display">This will only display when display is true</p>variables defined in the return statement need to be referenced using “this.variableName” syntax (using “this”)
options API syntax:
mounted: This is a lifecycle hook in Vue.js. The mounted function is called after the instance has been mounted, where element, passed to el option, is replaced by newly created vm.$el. If the root instance is mounted to an in-document element, vm.$el will also be in-document when mounted is called. It's often used for operations that require access to the DOM, like fetching data from an API.
The mounted lifecycle hook in Vue.js is a good place to perform initial setup that requires access to the DOM. Here are some common use cases:
Fetching Data: If your component needs to fetch data from an API, you can do it in the mounted hook. This is because the component has been inserted into the DOM, and you can safely update the component's data with the fetched data.
Setting Up Event Listeners: If your component needs to listen for events, such as scroll events or keyboard events, you can set up the event listeners in the mounted hook.
Initializing Third-Party Libraries: If your component uses a third-party library that requires access to the DOM, you can initialize the library in the mounted hook.
Performing One-Time Operations: If your component needs to perform a one-time operation after it has been inserted into the DOM, you can do it in the mounted hook.
Remember, the mounted hook is only called once when the component is first inserted into the DOM. If you need to perform an operation every time the component is updated, you should use the updated hook.
computed: This is a Vue.js feature that allows you to define a property that is used the same way as data, but can also have some internal logic. In other words, computed properties are values that are derived from other data properties. The benefit of using a computed property is that Vue.js can cache the results and only recompute the values if the dependencies change. This makes computed properties efficient. In your code, hidden_opps_full_details and filteredOpportunities are computed properties.