ashx3s

Vue V-for Syntax

The v-for directive is used for rendering lists. It is able to take multiple arguments, and can be used in child or parent components.

Syntax

• Template Syntax

<div v-for="item in :key="item.id">
  <!-- content -->items" 

ashx3s

Vue Conditionals

Conditional rendering is really easy in vue

• use v-if/v-else-if/v-else for content rendering conditionals
• use v-show for display and css rendering conditionals

v-if/v-else

• This example will change a message based on a specific value in the data function
• Template Tag

ashx3s

Nuxt Config File Setup & Debugging

Vetur

If your html in your template is not auto completing, make sure this is in your vetur settings

"vetur.validation.template": true,

ashx3s

Vue v-on syntax

• The v-on directive follows this logic:

v-on:event="method"

• You can also use the shorthand syntax like

@event="method"

ashx3s

Vue v-model

Basic Info & Uses

• v-model is for two way data binding on form, input, textarea, and select.
• It is primarily for updating data when users' enter information.
• v-model ignores initial attributes on form elements. Instead, it looks for initial attributes in data().

Syntax

• v-model syntax is used like this:

ashx3s

Todo App Feature Plan

Basic Functionality

• Add a todo item
• Show all tasks
• Delete a todo item

Basic Features

• Todo title & description fields
• Two ways of deleting:

ashx3s

Javascript this

this is a javascript keyword that is used to reference the object that the function it is in belongs to. It can be used in global and function contexts.

• Review the MDN article on this
  • For use in vue methods, pay particular attention to the As a DOM Event Handler section closer to the bottom of the article.

Basic Rules of how this works

• It is determined by it's context
  • When declared inside of a function, the function is the context; when it is used outside of a function - it refers to the global context.

ashx3s

<template>
<input type="text"
  v-bind:inputValue="value" v-on:input="$emit('input', $event.target.value)"
</template>
<script>
  export default {
    props: 'inputValue'
  }
</script>

ashx3s

Custom Components

Tailwind gives you a few ways to organize your components. Check out this file

• Add them to a css file in a layer
• Add them to the tailwind.config.css file
• Create custom classes in your vue components
• Make sure to have added any css files that you are using to your nuxt config.
  • Also create an assets/ directory at the root of your project to store the css files.
• nuxt.config.js css declaration

ashx3s

<template>
  <form v-on:submit.prevent="onSubmit">
    <fieldset>
      <legend><h2>Add a new Task</h2></legend>
      <!-- title input -->
      <label for="title">Title</label>
      <input type="text" name="title" v-model="dataGroup.title" />
      <!-- description input -->
      <label for="description">Description</label>
      <input type="text" name="description" v-model="dataGroup.description" />