` is where Vue mounts — everything inside it becomes a Vue template. - Use `vue.global.js` (not `vue.esm-browser.js`) for script-tag usage. --- ## 2. Creating an App ### Minimal app ```js // js/app.js const app = Vue.createApp({ data() { return { message: "Hello, Vue!", }; }, }); app.mount("#app"); ``` ```html

``` ### Options explained | Option | Purpose | |--------|---------| | `data()` | Returns an object of reactive state. Must be a function. | | `methods` | Object of functions the template can call. | | `computed` | Object of derived values that update automatically. | | `watch` | Object of functions that run when a data property changes. | | `mounted()` | Lifecycle hook — runs after the app is inserted into the page. | --- ## 3. Template Basics ### Text interpolation ```html

``` Double curly braces `{{ }}` output the value of a JavaScript expression. The expression is reactive — the page updates automatically when the data changes. ### Attribute binding — `v-bind` (shorthand `:`) ```html Link Link ``` Use `:` to bind any HTML attribute to a data property. ### Conditional rendering — `v-if` / `v-else-if` / `v-else` ```html

No items yet.

One item.

{{ items.length }} items.

``` `v-if` removes or adds elements from the DOM. Use `v-show` instead if you need to toggle visibility frequently (it uses CSS `display: none`). ### List rendering — `v-for` ```html

{{ item.name }}

``` **Always provide a `:key`** — Vue uses it to track which items changed. Use a unique identifier, not the array index. ### Two-way binding — `v-model` ```html

You typed: {{ searchQuery }}

``` `v-model` syncs an input's value with a data property. Works on ``, `

`, `<select>`, and checkboxes.

---

## 4. Event Handling

### Basic events — `v-on` (shorthand `@`)

```html

<button v-on:click="increment">+1</button>

<button @click="increment">+1</button>
```

```js
const app = Vue.createApp({
  data() {
    return { count: 0 };
  },
  methods: {
    increment() {
      this.count++;
    },
  },
});
```

### Passing arguments

```html
<button @click="addItem('apple')">Add Apple</button>
```

### Event modifiers

```html

<form @submit.prevent="handleSubmit">
  <input v-model="name" />
  <button type="submit">Save</button>
</form>

<button @click.once="initialize">Start</button>
```

Common modifiers: `.prevent`, `.stop`, `.once`, `.enter` (for keyboard events).

---

## 5. Computed Properties and Watchers

### Computed properties

Use computed for values derived from data. They cache their result and only recalculate when dependencies change.

```js
const app = Vue.createApp({
  data() {
    return {
      items: [
        { name: "Milk", done: false },
        { name: "Bread", done: true },
      ],
    };
  },
  computed: {
    remainingCount() {
      return this.items.filter((item) => !item.done).length;
    },
  },
});
```

```html
<p>{{ remainingCount }} items left</p>
```

**Computed vs methods:** Use computed when you are deriving a value from existing data. Use a method when you are performing an action (handling a click, submitting a form).

### Watchers

Use watchers when you need to perform a side effect in response to data changing (e.g. making an API call when a search query changes).

```js
const app = Vue.createApp({
  data() {
    return { searchQuery: "" };
  },
  watch: {
    searchQuery(newValue, oldValue) {
      console.log(`Search changed from "${oldValue}" to "${newValue}"`);
      // e.g. fetch search results here
    },
  },
});
```

Watchers are for side effects. If you just need a derived value, use computed instead.

---

## 6. Components

Without a build process, components are plain JavaScript objects registered on the app.

### Defining a component

```js
// js/app.js
const TodoItem = {
  props: ["item"],
  template: `
    <li>
      <input type="checkbox" :checked="item.done" @change="$emit('toggle', item.id)" />
      {{ item.name }}
    </li>
  `,
};

app.mount("#app");
```

```html
<div id="app">
  <ul>
    <todo-item
      v-for="item in items"
      :key="item.id"
      :item="item"
      @toggle="toggleItem"
    ></todo-item>
  </ul>
</div>
```

### Key concepts

- **Props** flow data *down* from parent to child. Declare them in the `props` array (or object for validation).
- **Events** flow *up* from child to parent. Use `$emit('event-name', payload)` in the child, `@event-name="handler"` in the parent.
- **Templates** are inline strings in the component object (backtick template literals work well for multi-line).

### Props with validation

```js
const UserCard = {
  props: {
    name: {
      type: String,
      required: true,
    },
    role: {
      type: String,
      default: "viewer",
    },
  },
  template: `
    <div class="user-card">
      <h3>{{ name }}</h3>
      <span>{{ role }}</span>
    </div>
  `,
};
```

### Slots

Slots let a parent pass content into a child component's template.

```js
const Card = {
  template: `
    <div class="card">
      <slot></slot>
    </div>
  `,
};
```

```html
<card>
  <h2>Title</h2>
  <p>Any content can go here.</p>
</card>
```

---

## 7. Fetching Data

Use `fetch()` in the `mounted()` lifecycle hook to load data when the page loads.

```js
const app = Vue.createApp({
  data() {
    return {
      users: [],
      loading: true,
      error: null,
    };
  },
  async mounted() {
    try {
      const response = await fetch("/api/users");
      if (!response.ok) {
        throw new Error(`HTTP ${response.status}`);
      }
      this.users = await response.json();
    } catch (err) {
      this.error = err.message;
    } finally {
      this.loading = false;
    }
  },
});
```

```html
<div id="app">
  <p v-if="loading">Loading...</p>
  <p v-else-if="error">Error: {{ error }}</p>
  <ul v-else>
    <li v-for="user in users" :key="user.id">{{ user.name }}</li>
  </ul>
</div>
```

Always handle three states: **loading**, **error**, and **success**.

---

## 8. Best Practices Checklist

- [ ] **No build process** — Vue and all libraries loaded via `<script>` tags.
- [ ] **Formatted with prettier** — consistent indentation, quotes, and semicolons.
- [ ] **Semantic HTML** — use `<button>`, `<nav>`, `<main>`, `<header>`, `<form>` instead of `<div>` for everything.
- [ ] **`:key` on every `v-for`** — use a unique ID, not the array index.
- [ ] **Props down, events up** — children never modify props directly; they emit events.
- [ ] **Data is a function** — `data()` must return a new object, never a shared reference.
- [ ] **Components are small** — if a component template is longer than ~50 lines, consider splitting it.
- [ ] **Loading and error states** — every data fetch handles loading, error, and success.
- [ ] **No inline styles** — use CSS classes in `style.css`.
- [ ] **Accessible** — form inputs have `<label>` elements, images have `alt` attributes, buttons have descriptive text.