1. sudo npm install -g @vue/cli
2. vue create my-app
3. cd my-app
4. npm run serve or yarn serve

1. Options:
   • Options is an object: Uses Data, Method and Mounted keys
   • No <script> tag surrounds Options. Just export the options object
   • Good for smaller apps and class based apps -- can use this component instance
2. Composition
   • Uses <script> tag for javascript code
   • use <script setup> so you do not have to explicitly export vars

1. In App.js:
   

   import { createApp } from 'vue';
   
   const app = createApp({
       data() {
       return {
           count: 0
       }
       }
   });
   
   app.mount('#app')
   

2. In the markup section:
   

   <div id="app">
    
   <button @click="count++">{{ count }} </button>
   </div>

3. Then, after all setup is done, mount the application, using a "container" arg or an element id:
   app.mount('#app');

A directive is a special attribute that extends HTML elements with added functionality. They offer a way to manipulate the DOM directly from Vue templates

1. v-model: two way binding on form elements
2. v-if, v-else-if, v-else
3. v-on (shorthand @): Attach event listeners
4. v-bind (shorthand :) Dynamically bind attributes eg: v-bind:class="{ active: isActive" }
5. v-show: Toggle element visibility using CSS display property
6. v-html: Render HTML content:
   

   const myHTML = const myHTML = '<span style="color: red">Red</span>'
   <!-- eslint-disable-next-line vue/no-v-html -->
   <div v-html="myHTML"></div> // renders Red
   

7. v-text: Render text content
8. v-once: Render the element and component once
9. v-pre: Skip compilation for this element and its children
10. v-cloak: This directive will remain on the element until the associated Vue instance finishes compilation.
11. v-<CustomDirective>

Just use the double mustache: {{ rawHtml }}

// Prints the actual html:  <span style="color: red">Red</span>

Prints: Red

Object or array; No primitives;

reactive = Object or array;
ref() for primitives other non objects or non array types.

const count = ref(0)

Use the ref() method, passing in the value. This creates an object with value key.

Either deconstruct the object's key for the value or explicitly give the path to the nested value.

    <template>
        <div>{{ deepObj.first.second.second_level }}</div>
    </template>

myArray[1] = 123

myRef must use .value in the script block:
myRef.value

Providing myRef is not a deeply nested object, or you've dereferenced it down to the last nest you do not need to use .value
{{ myRef }}

No! myRef is a constant. You cannot change a constant value. You MUST use myRef.value = 'I have changed'

A reactive state declared in the < script setup > block. e.g.:

<script setup>
    const myReactive = { foo: 'bar' }
    const myRef = ref('fooBar')
</script>

<template>
    <h1>{{ myReactive.foo }}<h1>
    <h1>{{ myRef }}<h1>
</template>

Use either vbind: or the shorthand : inside the element.

<div v-bind:id="dynamicId"></div>

myArray.push(4)

myArray.value.push({id: id++, text: 'Second'})

myArray.push({id: id++, text: 'Second'})

Yes! With ref()'s you must use .value.
myRef.value.push({id: id++, text: 'Second'})

No! With reactive vars you only use .push -- not .value!
myReactive.push({id: id++, text: 'Second'})

<div :id="dynamicId"></div>

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

<button @click="increment">Increment</button>

use :value="varName" @input="inputFunctionName" in your input element;

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

const varName = ref('')

function inputFunctionName(e) {
    varName.value = e.target.value
}
</script>

<template>
    <input :value="varName" @input="inputFunctionName" placeholder="Type here">
    <p>{{ varName }}</p>
</template>

:

< input :="text">

@

< input @click="onClickMethod"

<input v-model="text">

There is no longer the need for the @input="onInput" function or :value="text" as v-model will directly change the value of your variable "text".value using v-model="text"

Before:

%lt;script setup>
    import { ref } from 'vue'
    
    const text = ref('')
    
   function onInput(e) { 
      text.value = e.target.value
   }
    </script>
    
    <template>
      <input :value="text" @input="onInput" placeholder="Type here">
      <p>{{ text }}</p>
    </template>

After, using v-model

<script setup>
    import { ref } from 'vue'
    
    const text = ref('')
    </script>
    
    <template>
      <input v-model="text" placeholder="Type here">
      <p>{{ text }}</p>
    </template>

use "v-if="

<h1 v-if="truthyVar">Print if truthy!!!</h1>
<h1 v-else>Print this if not truthy!!!</h1>

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

    const awesome = ref(true);
    
    function toggle() {
        awesome.value = !awesome.value
        }
</script>
        
<template>
    <button @click="toggle">Toggle</button>
    <h1 v-if="awesome">Vue is awesome!</h1>
    <h1 v-else>Oh no 😢</h1>
</template>
    

v-if, v-else-if, v-else

    <li v-for="todo in todos" :key="todo.id">
        {{ todo.text }}
        <button @click="removeTodo(todo)">X</button>
    </li>

v-bind:key=, or shorthand: :key=

let awesome = ref(true);

function toggle() {
    awesome.value = !awesome.value;
}

:key=todo.id

<li v-for="todo in todos" :key="todo.id">
     {{ todo.text}}
</li>

<template>
    <li v-for="todo in todos" :key="todo.id">
       {{todo.text}}
    </li>
</template>

1. Assign directives strings, so v-for="todo in todos"
2. Todos is an array of objects, so you need to dereference id and text as todo.text or todo.id
3. Todos, although a ref, does not need ".value" within the template area. The interpolation will handle extracting that.

The entire array: {0: {...}, 1: {...}, 2: {...}}

undefined. A ref must be accessed through the .value key. That is where the array of objects resides.

todos.value.push( {id: id++, text: newTodo.value } );

newTodo is a ref(''), so it will have a value key.

todos has a value key which represents (amongst other things) the array of todos.

todos.value:  
    Proxy(Array) {0: {…}, 1: {…}, 2: {…}}
    [[Handler]]:MutableReactiveHandler
    [[Target]]: Array(4)
    0: {id: 0, text: 'Learn HTML'}
    1: {id: 1, text: 'Learn JavaScript'}
    2: {id: 2, text: 'Learn Vue'}
    3: {id: 3, text: 'Learn C++'}
    length: 4
    [[Prototype]]: Array(0)
    [[IsRevoked]]: false

1. Define the variable as a computed() that takes an arrow function, and sets the variables based on your conditions.
   e.g.:
   

   const filteredTodos = computed(() => {
       return hideCompleted.value 
          ? todos.value.filter((t) => !t.done)
          : todos.value
   })
   

2. Then create a button where you can set the variable hideCompleted, used in your computed() function callback, that will either hide completed or show all:
   

   <button @click="hideCompleted = !hideCompleted">
       {{ hideCompleted ? 'Show all' : 'Hide completed' }}
   </button>
   

1. import { ref, onMounted } from 'vue'
2. Declare a var a null ref: const pElementRef = ref(null) because the ref must be null as it will not exist until the component is mounted.
3. In your element, use ref="pElementRef"
4. In your onMounted callback function you can set the value initially. eg:
   

   onMounted( () => {
       pElementRef.value.textContent = 'mounted!';
   });
   

<script setup>
    import { ref, onMounted } from 'vue'
    
    const pElementRef = ref(null)
    
    onMounted(() => {
      pElementRef.value.textContent = 'mounted!'
    })
    </script>
    
    <template>
      <p ref="pElementRef">Hello</p>
    </template>

In the script block, to access the value of count, you must use count.value.

In the template block, the value may be displayed within double mustaches {{ count }}

The count is 0

Like angular, strings are evaluated only once during onMount.

const count = ref(0);
function incrementCount() { count.value += 1 };

watch(count, (newCount) => {
    console.log(`Count has been updated.  newCount is:  ${newCount}`);
})

incrementCount();
incrementCount();

The console log will be printed twice -- once for each call to incrementCount, as count has changed.

The same way as svelte:

<script setup>
    import AnotherComponent from 'AnotherComponent.vue';
    const parentMessage = "Message from parent"
    const parentCount = ref(0)
</script>
<template>
    <AnotherComponent :msg="parentMessage" :count="parentCount" />
</template>

In the child component, use defineProps. Then define the incoming variable in the child component.

<script setup>
    const props = defineProps({
        msg: String  // parent component has defined msg.  This lets child component know about the var.
        count: number
    });
<script>
<template>
    <h2>{{ msg }}, {{count}}</h2>

1. In the parent component, in the script section, set a responsive var you will use to set the response from the child component. In this case, we will call it the childMsg, and set it to a default value to display until the child component responds.
   

   <script setup>
       import ChildComponent from './ChildComponent.vue';
   
       const childMsg = ref('Hi from parent component');  // This will change when the child responds.
   </script>
   

2. In the parent component, in the template section, setup the variable name which will be the emitter variable. In this case, we will emit to the child's response variable, receiving a message and assigning it to our childMsg variable:

   
   
   <template>     
       <ChildComponent @response="(msg) => childMsg = msg" />  
       <h2>childMsg</h2>
   </template>
   

3. In the child component, define an emitter that will use the parent component's variable:
   

   <script setup>
       const emit = defineEmits(['response'])  // parent components var name 'response' which will be observed for the new value.
   
       emit('response', 'hello from child'); // pass 'hellofrom child' through the response variable to the parent.
   </script>
   

1. Just like <h2>, <div> - just pass in the data between the beginning element and end element.
   

   <ChildComponent>This is the content of the slot for the child.</>

2. In the child component, set the default of the slot, if there is any:
   

   <slot>Fallback content</slot>

   
   This way if no incoming content for the component, the Fallback content string will be printed where the slot exists.

If the falsy value is anything other than empty string " "

Njo. This is not an expression. This is a statement.

This flow control statement won't work. Use a ternary : ok ? message : null

Yes

There are the standard key references in javascript: [focus] or focus in the following examples:

1. <a @[focus]="doSomething">
2. <a v-on:focus="doSomething"

{}> will evaluate to false, because the empty object gets reassigned to a reactive object. Two different spaces in memory:

raw = {};
reactive(raw) =
      Proxy(Array) 0: {...}, 1: {...}
           [[Handler]]: MutableReactiveHandler
           [[Target]]: Array(2)
           [[IsRevoked]]

1. The new variable value will be placed in a buffer queued for re-render.
2. Each tick the buffer is emptied and the new values are updated in the DOM

Call the tick() function.

nextTick()

state.count will = 0. You've lost the reactive nature of count when you deconstructed this.

count + 1 = 1
object.id + 1 = <will not compile>

You need to dereference the value in object.id as object.id.value + 1 because it was declared as a ref(1) in the object. As such, it won't get automatically unwrapped by the interpolater.

In the script area, import computed. Then create a const called computedChars = ( () => return newItem.value.length); Then create a p tag under the input box for displaying: <p>{{ computedChars }}/200</p>

.reverse will mutate items.value array. You may not want to mutate the array. For instance, this will interrupt the reactivity of the original array.

Spread the array, then call reverse on it: return [...items.value].reverse()

<div :class="{active: isActive }"></div>

Yes! And you use them just like any other object with <div :class="classObject"></div>

<div class="active"></div>

Only the the truthy classes will appear in devtools.

Yes. We need to return the object with the attributes in an object; then use the computedConstVar name in bind;

const isActive = ref(true)
const error = ref(null)

const classObject = computed(() => ({
    active: isActive.value && !error.value,   // remember, isActive and error are declared as ref's, so you need to access as .value
    'text-danger': error.value && error.value.type === 'fatal'
}))

<div :class="classObject"></div>

Yes! Remember the ref nature of values within interpolation. No need to access them with ".value"

    const isActive = ref(true)
    const error = ref(null)

Yes. You can use ternaries in conjunction with other boolean classes

eg:

<template>
    <div>
         <h1>Hello from this component!</h1>
         <p>From this component here's some text.</p>
    </div>

The <div> is considered the root element.

Define the template as functional: <template functional>. Then you can have no root elements. However, they lack their own state, if that's important.

• Explicit root elements, like <div> shown in the example above.
• Functional root elements, like <template functional> but they do now carry their own state.
• Fragment Root (Vue3): Compoonents can have multiple root nodes (like <h1>, <p>)but attributes and events can get twisted unless you're very careful.
• Dynamic Root Elements : Like <component :is="rootElement">

Use <p :class=&attrs.class">Hi!</p> in your child class after passing it down from your parent component: <ParentComponent class="baz"/>

A "fallthrough attribute" is an attribute or v-on event listener that is passed to a component, but is not explicitly declared in the receiving component's props or emits. Common examples of this include class, style, and id attributes.

If there is only one root element, and the attribute was not declared as an accepted prop, then this is called a "fallthrough" attribute and the class is applied to the root element of the child automatically.

<MyButton class="large" />
// child class button's root element
<button class="large">Click Me</button> // class is applied automatically to root element.

Yes. However, there are caveats with v-on and attributes declared as props or events. If you see this behavior, reference Vue Page on Attributes

Yes, in the defineOptions object:

<script setup> 
    defineOptions({
        inheritAttrs: false
    })
</script>

In the $attrsobject: <span>Fallthrough attributes: {{ $attrs }}</span>