MoodyBones/Vue-3-Studies

Vue 3 Studies

• 🚌   Course on Frontend Masters
• 👩‍🏫   Taught by Sarah Drasner
• 📓   Notes by Mel Jones
• 📎   Link to GitHub Starter Docs & Slides
• 🔮   Start date: 2020/11/04 - yikes what a day to be alive!

Quick Folder Links

• Directives / Modifiers / Data rendering
• Methods / Computed / Watchers / Reactivity
• Components, Props, Slots
• App Development / Nuxt / Vue CLI

I have created a Vue 3 Directives cheatsheet on CodePen

• v-model

• v-if/v-show

• v-if/v-else-if

• v-bind or :

• v-for - static number

• v-for - object

• v-once & v-pre

• v-on or @

• v-html

• v-text

• Directives Exercise

• and a bunch more pens!!

Codepen links to ALL my Vue 3 Collections

• Directives
• Exercises/Challenges
• Methods

Introduction & Resources

Why

• Declarative / setting a few things and little the computer do the hard work
• Legible
• Easy to maintain
• Powerful
• A collection of the best of the best / other frameworks
• Elegant
• Gives me what I want when I need it, and gets out of my way
• A way to be really productive

Comparison with other frameworks

• A virtual DOM
• Reactive components that offer the View layer only.Like Angular, not React.
• Props and a centralized state management stor similar to React
• Conditional rendering, and services, similar to Angular
• Inspired by Polymer for simplicity and performance. Vue offers a similar development style as HTML, styles and JavaScript are composed in tandem
• Scoped styles - similar to styled components in React

New Features in Vue 3

• conditional API

Vue Instance

• use id because you only want one instance

Vanilla JS vs Vue

Vanilla JS

const items = ['thingie', 'another thingie', 'something else', 'bla blah']

function listOfStuff() {
  const full_list = items.map((el) => `<li> ${el} </li>`)

  const contain = document.querySelector('#container')
  contain.innerHTML = `<ul> ${full_list} </ul>`
}

listOfStuff()

Vue

• it's very declarative
• we are holding the state and telling the DOM what to do with it.
• can write semantic html
• reactive - responding to changes in state

const App = {
  data() {
    return {
      items: ['thingie', 'another thingie', 'something else', 'bla blah'],
    }
  },
}

<div id="#app">
  <ul>
    <li v-for"item in items">
      {{ item }}
    </li>
  </ul>
</div>

Huge thanks to Sarah Drasner & the Frontend Masters Team.