vue3 creates a vue instance using createApp()

Dynamic parameter expression spaces and quotation marks are invalid in HTML attribute name; The browser will force all attribute names to lowercase

<a v-bind:['foo' + bar]="value"> ... </a> //report errors

<a v-bind:[someAttr]="value"> ... </a> //Convert to v-bind:[someattr]

ref is created as a rendering result and does not exist at the time of initial rendering

Changing the method of the following array will trigger the view update

push(),pop(),shift(),unshift(),splice(),sort(),reverse()

Replacing the original array with an array containing the same elements is a very efficient operation

Binding events access the original DOM events

@click="handle($event)"

Event modifier

Concatenation of multiple modifiers is affected by order

. stop: prevent click event from continuing propagation
. prevent: submit events without reloading pages
. capture: capture mode
. self: the function can only be triggered by binding the element of the event, and the child element cannot be triggered
. once: the event is triggered only once
. passive: do not block the default behavior of events, but directly execute the default behavior (such as scrolling behavior) to improve page performance

v-model principle:

input event listener and value binding

<input :value="test" @input="test = $event.target.value">

v-model modifier

. lazy: updated when the change event is triggered
. number: automatically converts the input value to type number. If this modifier is not added, a string will be returned
. trim: automatically remove the first and last blank characters entered

Component global registration

const app = Vue.createApp({})
app.component('my-component-name', {
  // ...  Options
})

The property on the element does not use v-bind binding to represent strings, but v-bind to represent JavaScript expressions

/*Represents a string*/
<template title="My journey with Vue"></template>

/*Representation variable*/
<template :title="titVal"></template>

/*Represents a number*/
<template :title="10"></template>

/*Represents a Boolean value*/
<template :title="true"></template>

/*Pass in multiple properties*/
post: {
  id: 1,
  title: 'My Journey with Vue'
}

<template v-bind="post"></template>
/*Equivalent to*/
<template v-bind:id="post.id" v-bind:title="post.title"></template>

Prop case naming

The prop name of hump nomenclature needs to be changed to its equivalent dash delimited name in HTML

If a string template is used, this restriction does not exist

/*data*/
 props: ['postTitle']
 /*Template*/
<template post-title="post"></template>

setup is used to solve the separation of concerns

setup is between the lifecycle functions beforeCreate and Created

The name of the life cycle hook registered in setup is the same as that of the optional API, but the prefix is on: that is, mounted will look like onMounted

To create a responsive variable in setup, you need to use the ref function

//The 'num' data of the view is not updated
  setup (props) {
    let num = 5
    setTimeout(() => { num ++ } ,3000)
    return { num }
  }
  
  //View's' num 'data update
  setup (props) {
    let num = ref(5) // Printed out is an object
    setTimeout(() => { num.value ++ } ,3000)
    return { num }
  },

To listen to variables in setup, you need to import the watch function from Vue

watch(num, (newV, oldV) => {
  console.log(`${oldV} Change to ${newV}`)
 })

props in the setup function is responsive

this in the setup function is undefined

Provide / Inject can be used for communication between multi-level nested components. Data is unresponsive. You can add responsiveness with ref or reactive

const num= reactive({
  value: 0
})

Report: render child nodes to DOM nodes outside the parent component

<teleport to="body">
	Vue Render the content as body Child of label
</teleport>