coltborg

#!/bin/sh

search_dir="/Users/alexgonzalez/Desktop/Code/form-flow/src/test/resources/templates"

# for each file in search directory and subdirectories, do the following
find "$search_dir" -type f -name "*.html" | while read file; do
    sed -n '
        /\(fragments.*\)"/ {
            s/\(fragments.*\)"/~{\1}"/g
            p

coltborg

<template>
  <div>
    Search for <input v-model="searchInput" />
    <div>
      <p>Loading: {{ getEvents.loading }}</p>
      <p>Error: {{ getEvents.error }}</p>
      <p>Number of events: {{ getEvents.results }}</p>
    </div>
  </div>
</template>

coltborg

<template>
  <div>
    Search for <input v-model="searchInput" />
    <div>
      <p>Number of events: {{ results }}</p>
    </div>
  </div>
</template>

<script>

coltborg

<script>
import { onBeforeMount, onMounted } from "vue";

export default {
  setup() {
    onBeforeMount(() => {
      console.log("Before mount!");
    });
    
    onMounted(() => {

coltborg

<template>
  <p>
    Spaces left: {{ spacesLeft }} out of {{ capacity }}
  </p>
  <button @click="increaseCapacity">Increase Capacity</button>
  <h2>Attending</h2>
  <ul>
    <li
      v-for="(name, index) in attending"
      :key="index"

coltborg

<template>
  <p>
    Spaces left: {{ spacesLeft }} out of {{ capacity }}
  </p>
  <button @click="increaseCapacity">Increase Capacity</button>
  <h2>Attending</h2>
  <ul>
    <li
      v-for="(name, index) in attending"
      :key="index"

coltborg

<template>
  <p>
    Spaces left: {{ spacesLeft }} out of {{ capacity }}
  </p>
  <button @click="increaseCapacity">Increase Capacity</button>
  <h2>Attending</h2>
  <ul>
    <li
      v-for="(name, index) in attending"
      :key="index"

coltborg

<template>
  <div>Capacity: {{ capacity }}</div>
  <button @click="increaseCapacity">Increase Capacity</button>
</template>

<script>
import { ref } from "vue";

export default {
  setup() {

coltborg

<template>
  <div>Capacity: {{ capacity }}</div>
</template>

<script>
import { ref } from 'vue';

export default {
  setup() {
    const capacity = ref(3); // Ref is used to wrap a primitive (number) inside of a reactive reference (object)

coltborg

CSS Basics

---

Agenda

• Basics
• The Cascade
• Specificity
• Box Model