This article is suitable for Vue beginners, or Vue2 migration, of course, or suggest a complete review of Vue3 official website. Not suitable for master principle, source code bigwigs.

Two vscode plug-ins are recommended

Volar

First of all, I recommend Volar. Anyone who uses vscode to develop Vue projects must know that Vetur is a magic plug-in. With it, we can develop like a fish in water. So Volar can be understood as the Vue3 version of Vetur, with code highlighting, syntax hints, and basically everything Vetur has.

features

Of course, as a new plug-in out of the mountain, there must be its unique function.

Multiple root editors do not report errors

Vue3 allows us to have multiple root nodes, but if we use Vetur we get an error, it doesn’t affect the operation, but it looks annoying. So when we go to Volar then we don’t have this problem.

Editor separation

Even though the componentized development of Vue can greatly reduce the code length of a single file, it can still be hundreds or even thousands of lines. There are plugins that can navigate directly to CSS, but you can’t go back. So this feature is just too human.

Once you’ve installed Volar, open a.vue file and look at the top right corner of vscode. There’s this icon. Click on it.

It will automatically divide you into three pages, one for template, one for script, and one for style, which is very comfortable.

Vue 3 Snippets

The second recommended plug-in is called Vue 3 Snippets, which also has its own version of Vue2. So what does it do, if you look at this graph down here, I just typed “v3,” and it has a lot of hints, so let’s go ahead and select V3computed, and hit Enter.

Then it automatically writes us the following code

Isn’t it super easy? The fishing time has increased again! There are more interesting ways to use, friends to explore it.

Create a Vue3 project

So let’s start learning Vue3 by creating a project.

Create it using vue-CLI

Enter the following command and select the configuration items to install. Note that vuE-CLI must be later than 4.5.0

// Install or upgrade NPM install -g@vue /cli // Check the version. Ensure that the CLI version of vue is later than 4.5.0. Vue --version // Create a project // Then follow the instructions step by step fool operation will do...Copy the code

Create using Vite

Vue3.0 and Vite2 are said to be more compatible, various optimizations, various fast, but they do not belong to the content of this article, the purpose of this article we only need to know it is particularly good, how to use it. Here, I chose TS, and each line has a comment, which is clear at a glance.

// Initialize the viete project NPM init vite-app <project-name> // go to the project folder CD <project-name> // Install dependency NPM install // Start project NPM run devCopy the code

Once created, let’s first look at the entry file main.ts

Import {createApp} from 'vue'; import {createApp} from 'vue'; // Import app from './ app.vue '; CreateApp (app).mount('#app');Copy the code

Then look at the root component app.vue

<img Alt ="Vue logo" SRC ="./assets/logo.png"> <! <HelloWorld MSG ="Welcome to Your Vue. Js + TypeScript App" /> </template> <script lang="ts" Import {defineComponent} from 'vue'; // defineComponent. / / into the child components import HelloWorld from '. / components/HelloWorld. Vue '; Export default defineComponent({// Current component name: 'App', // register component components: {// Register a child component HelloWorld,},}); </script>Copy the code

Composition API

Next comes the highlight, Vue3’s signature feature, the Composition API

Composition apis make it easier to extract common logic, but don’t worry too much about reusing logic code. Extracting code by function is also an idea.

By the way, Vue3 is compatible with most of the Vue2 syntax, so it’s ok to write Vue2 syntax in Vue3 (with the exception of the deprecated ones), but since we’ve upgraded Vue3, mixing is not recommended, except for some large special project that requires compatibility with both versions.

setup

Setup is the entry function in the Composition API and the first function to be used.

Setup is executed only once during initialization, and all Composition API functions are used here.

Setup () {console.log(' I executed ') // I executed},Copy the code

You can see from console.log that setup is performed before the beforeCreate life cycle (only once)

BeforeCreate () {console.log('beforeCreate executed '); }, setup() {console.log('setup executed '); return {}; }, //setup executed //beforeCreate executedCopy the code

Setup of execution time can be deduced from this, the component object has not been created, and is not available for this component instance objects, at the moment this is undefined, cannot access to the data/computed by this/the methods/props.

Properties of the returned object are merged with properties of the returned object of the data function to become properties of the component object. Methods of the returned object are merged with methods of the successful component object. If the same name exists, setup takes precedence. Since this is not available in Setup, methods can access properties and methods provided by Setup, but data and methods cannot be accessed in setup methods, so mixing is not recommended.

The setup function can be used directly in a template if it returns an object, property or method in the object

//templete
<div>{{number}}</div>

//JS
setup() {
  const number = 18;
  return {
    number,
  };
}, 
Copy the code

Note that setup cannot be an async function: since the return value is no longer a return object, but a promise, the data from the return object cannot be used in the template.

Setup parameters (props,context) ‘

Props: is an object that holds the data passed by the parent component to the child component and all properties received by the child component using props

Context: a context object that can be deconstructed using es6 syntax setup(props, {attrs, slots, emit})

• attrs: Gets all failed entries on the current component labelpropsReceive properties of the object equivalent tothis.$attrs
• slots: An object containing the contents of all incoming slots, equivalent tothis.$slots
• emit: a function used to distribute custom events, equivalent tothis.$emit

Demonstrate attrs and props

// parent component <template> <child: MSG =" MSG "msg2=' hahaha '/> </template> <script lang='ts'> import {defineComponent, ref } from 'vue'; // Import Child from './components/ child.vue '; export default defineComponent({ name: 'App', components: { Child, }, setup() { const msg = ref('hello,vue3'); return { msg, }; }}); </script> // subcomponent <template> <h2> <h3> MSG :{{MSG}}</h3> </template> <script lang='ts'> import {defineComponent}  from 'vue'; export default defineComponent({ name: 'Child', props: ['msg'], setup(props, {attrs, slots, emit}) { console.log('props:', props); //msg: "hello,vue3" console.log('attrs:', attrs); //msg2: "hahaha" return {}; }}); </script>Copy the code

Demo emit

// Parent <template> <child @show="show" /> </template> <script lang='ts'> setup() {const show= () => { console.log('name:', 'hzw'); }; return { show, }; }, </script> // child component <template> <button> Event distribution </button> </template> <script lang='ts'> import {defineComponent} from 'vue'; export default defineComponent({ name: 'Child', setup(props, { emit }) { const emitFn = () => { emit('show'); }; return { emitFn, }; }}); </script>Copy the code

ref

role

Define a reactive data (typically used to define a basic type of reactive data Undefined, Null, Boolean, Number, and String)

grammar

const xxx = ref(initValue): 
Copy the code

Note: XXX. Value is used to manipulate data in script, but. Value is not needed in templates

Use an example to demonstrate: implement a button that can be clicked to increase the number

<template> <div>{{count}}</div> < button@click ='updateCount'> Add </button> </template>Copy the code

In Vue2

data() { return { conunt: 0, }; }, methods: { updateCount() { this.conunt++; }},Copy the code

In Vue3

Setup () {const count = ref(0); const count = ref(0); const count = ref(0); function updateCount() { count.value++; } return { count, updateCount, }; },Copy the code

In Vue2 we get the DOM node through this.$refs, and in Vue3 we get the dom node through ref

You need to add ref=’ XXX ‘to the label, and then setup a ref type with an initial value of null and a name that matches the label’s ref attribute

const xxx = ref(null) 
Copy the code

Note: Be sure to return in the setup return, otherwise an error will be reported.

As an example, let the input box automatically get focus

<template> <h2>App</h2> <input type="text">--- <input type="text" ref="inputRef"> </template> <script lang="ts"> import {onMounted, ref} from 'vue' /* ref Let the input box to automatically focus * / export default {the setup () {const inputRef = ref < HTMLElement | null > (null) onMounted (() = > {inputRef. Value && inputRef.value.focus() }) return { inputRef } }, } </script>Copy the code

reactive

grammar

const proxy = reactive(obj) 
Copy the code

role

Define a reactive Proxy object that takes a common object and returns that common object. The reactive transformation is “deep” : it affects all nested properties inside the object, and all data is reactive.

Code demo

< the template > < h3 > name: {{user. The name}} < / h3 > < h3 > age: {{user. Age}} < / h3 > < h3 > the wife: {{user. The wife}} < / h3 > < button @click="updateUser"> </button> </template> setup() {const user = reactive({name: 'HZW ', age: 18, wife: {name:' HZW '); 'xioaohong, age: 18, books: [' little red book', 'design patterns',' algorithms and data structures'],,}}); Const updateUser = () => {user.name = 'updateUser '; user.age += 2; User.tuxedo. Books [0] = 'tuxedo '; }; return { user, updateUser, }; },Copy the code

The computed function:

Consistent with computed configuration in Vue2, an object of type REF is returned

A function that evaluates a property that passes only one callback represents a GET operation

import { computed } from 'vue'; Const user = reactive({firstName: ' ', lastName: ' ',}); const fullName1 = computed(() => { return user.firstName + user.lastName; }); return { user, fullName1, };Copy the code

A function that evaluates a property can pass in an object that contains set and GET functions to read and modify it

const fullName2 = computed({ get() { return user.firstName + '_' + user.lastName; }, set(val: string) { const names = val.split('_'); user.firstName = names[0]; user.lastName = names[1]; }}); return { user, fullName2, };Copy the code

Watch functions:

The configuration function is consistent with that of Watch in Vue2.

• Parameter 1: Data to listen on
• Parameter 2: callback function
• Parameter 3: Configuration

role

Monitors one or more specified reactive data and automatically executes monitoring callbacks whenever the data changes

By default, the initial callback is not executed. However, you can specify that the initial callback is executed immediately by setting immediate to true

Deep monitoring is specified by setting deep to true

import { watch, ref } from 'vue'; Const user = reactive({firstName: ' ', lastName: ' ',}); const fullName3 = ref(''); watch( user, ({ firstName, lastName }) => { fullName3.value = firstName + '_' + lastName; }, { immediate: true, deep: true } ); return { user, fullName3, };Copy the code

Watch listens for multiple data, using arrays

The watch listens for non-responsive data in the form of a callback function

Watch ([() = > user. FirstName, () = > user. The lastName, fullName3], () = > {the console. The log (' I performed ')})Copy the code

WatchEffect function:

role

Callbacks are executed when monitoring data changes. Instead of specifying the data to be monitored directly, the reactive data used in the callback function is monitored for the first time, by default, so that the data to be monitored can be collected.

import { watchEffect, ref } from 'vue'; Const user = reactive({firstName: ' ', lastName: ' ',}); const fullName4 = ref(''); watchEffect(() => { fullName4.value = user.firstName + '_' + user.lastName; }); return { user, fullName4, }; WatchEffect (() => {const names = fullname3.value.split ('_'); user.firstName = names[0]; user.lastName = names[1]; });Copy the code

Life cycle comparison:

Note: Lifecycle hooks in 3.0 are faster than the same lifecycle hooks in 2.x

The Composition API also adds the following debug hook functions: but not very often

• onRenderTracked
• onRenderTriggered

Code demo

setup() {

  onBeforeMount(() => {
    console.log('--onBeforeMount')
  })

  onMounted(() => {
    console.log('--onMounted')
  })

  onBeforeUpdate(() => {
    console.log('--onBeforeUpdate')
  })

  onUpdated(() => {
    console.log('--onUpdated')
  })

  onBeforeUnmount(() => {
    console.log('--onBeforeUnmount')
  })

  onUnmounted(() => {
    console.log('--onUnmounted')
  })
} 
Copy the code

toRefs

role

Convert a reactive object into a normal object where each attribute is a ref

application

Objects created by Reactive need to be in the form of XXX. XXX if they are to be used in a template, which is cumbersome, but will become unresponsive when deconstructed using ES6. ToRefs allows you to convert all raw properties of a reactive object to reactive REF properties. Of course, friends can develop more application scenarios by themselves.

Code demo

<template> <div> name:{{name}} </div> </template> <script lang='ts'> import { defineComponent, reactive, toRefs } from 'vue'; export default defineComponent({ name: '', setup() { const state = reactive({ name: 'hzw', }); const state2 = toRefs(state); setInterval(() => { state.name += '==='; }, 1000); Return {// Objects returned by toRefs are destructively reactive... state2, }; }}); </script>Copy the code

Dojo.provide and inject

role

Realize communication between components (grandparent and grandchild) across hierarchies

Code demo

The parent component

<template> <h1> Parent component </h1> <p> Current color: {{color}} < / p > < button @ click = "" color = 'red' > red < / button > < button @ click =" "color = 'yellow'" > yellow < / button > < button @click="color='blue'"> blue </button> <hr> <Son /> </template> <script lang="ts"> import {provide, ref } from 'vue' import Son from './Son.vue' export default { name: 'ProvideInject', components: { Son }, setup() { const color = ref('red') provide('color', color) return { color } } } </script>Copy the code

Child components

<template> <div> < H2 > child component </h2> < HR > <GrandSon /> </div> </template> <script lang="ts"> import GrandSon from './GrandSon.vue' export default { components: { GrandSon }, } </script>Copy the code

The grandson components

<template> <h3 :style="{color}"> {{color}}</h3> </template> <script lang="ts"> import { inject } from 'vue' export default { setup() { const color = inject('color') return { color } } } </script>Copy the code

Other features

Teleport shift (a)

role

Teleport provides a clean way for a component’s HTML to be displayed outside the parent component’s interface under a specific tag (probably body). In other words, you can insert child components or DOM nodes wherever you want.

grammar

Use selectors inside to attribute quotes

 <teleport to="body">
  </teleport> 
Copy the code

Code demo

// Parent component <template> <div class="father"> <h2>App</h2> <modal-button></modal-button> </div> </template> <script lang="ts"> import ModalButton from './components/ModalButton.vue' export default { setup() { return {} }, components: { ModalButton, }, </script> // subcomponent <template> <div class="son"> < button@click ="modalOpen = true"> <div v-if="modalOpen" class="looklook"> <button @click="modalOpen = false"> </teleport> </div> </template> <script> import { ref } from 'vue' export default { name: 'modal-button', setup() { const modalOpen = ref(false) return { modalOpen, } }, } </script>Copy the code

You can see that the looklook element in the child component runs under the body, with two lines of comment in its place by default

Girl (uncertain)

role

They allow our application to render some back-up content while waiting for asynchronous components, allowing us to create a smooth user experience

grammar

<Suspense> <template v-slot:default> <! -- Asynchronous components --> <AsyncComp /> </template> <template V-slot :fallback> <! --> <h1>LOADING... </h1> </template> </Suspense>Copy the code

How to introduce asynchronous components in VUE3

const AsyncComp = defineAsyncComponent(() => import('./AsyncComp.vue')) 
Copy the code

Code demo

The parent component

<template> <Suspense> <! <template v-slot:default> <AsyncComp/> </template> <template v-slot:fallback> <h1>LOADING... </h1> </template> </Suspense> </template> <script lang="ts"> import { defineAsyncComponent } from 'vue' const AsyncComp = defineAsyncComponent(() => import('./AsyncComp.vue')) export default { setup() { return { } }, components: { AsyncComp, } } </script>Copy the code

Child components

<template>
  <h2>AsyncComp22</h2>
  <p>{{msg}}</p>
</template>

<script lang="ts"> export default {
  name: 'AsyncComp',
  setup () {
     return new Promise((resolve, reject) => {
       setTimeout(() => {
         resolve({
           msg: 'abc'
         })
       }, 2000)
     })
  }
} </script> 
Copy the code

The following figure shows the contents of the Fallback before the asynchronous component is loaded

Judgment of responsive data

role

• isRef: Checks whether a value is onerefobject
• isReactive: Checks whether an object is created byreactiveCreate a responsive proxy
• isReadonly: Checks whether an object is created byreadonlyThe read-only agent created
• isProxy: Checks whether an object is created byreactiveorreadonlyMethod to create an agent

Code demo

setup() { const state1 = ref(1); console.log('isref:', isRef(state1)); //isref: true const state2 = reactive({}); console.log('isReactive:', isReactive(state2)); //isReactive: true const state3 = readonly({}); console.log('isReadonly:', isReadonly(state3)); //isReadonly: true const state4 = reactive({}); console.log('isProxy:', isProxy(state2)); //isProxy: true console.log('isProxy:', isProxy(state4)); //isProxy: true return {}; },Copy the code

Other uncommon features

There are many new features that are not commonly used, which I do not use in daily development. Many of them are used for optimization. Interested partners go to the official website to check, or you can introduce the application scenarios.

• shallowReactive
• shallowRef
• readonly
• shallowReadonly
• markRaw
• customRef
• .

Syntactic sugar

While the Composition API is pretty easy to use, we still have some annoying things like

• Components are introduced and registered
• Properties and methods must be presentsetupFunction, sometimes only onereturnA dozen or even dozens of lines
• .
• Don’t want to write ah how to do

Vue3 provides the script Setup syntax candy

We only need to add setup to the script tag, components only need to be introduced without registration, properties and methods do not need to be returned, setup functions do not need to be written, and even export default does not need to be written. Not only data, calculation properties and methods, and even custom instructions can be automatically obtained in our template.

Without the setup function, the props, emit, and attrs methods need to be setup.

The Setup Script syntax sugar provides three new apis for us to use: defineProps, defineEmit, and useContext

• definePropsUsed to receive values from the parent componentprops.
• DefineEmit is used to declare the triggered event list.
• useContextUsed to get the component contextcontext.

Code demo

The parent component

<template> <div> <h2> I'm the parent! </h2> <Child msg="hello" @child-click="handleClick" /> </div> </template> <script setup> import Child from './components/Child.vue' const handleClick = (ctx) => { console.log(ctx) } </script>Copy the code

Child components

<template>
  <span @click="sonClick">msg: {{ props.msg }}</span>
</template>

<script setup> import { useContext, defineProps, defineEmit } from 'vue'

const emit = defineEmit(['child-click'])
const ctx = useContext()
const props = defineProps({
  msg: String,
})

const sonClick = () => {
  emit('child-click', ctx)
} </script> 
Copy the code

We click on the component at once

You can seecontextWas printed out, and one of theattrs,emit,slots,exposeProperties and methods are still available.propsCan also output on the page, the event is also successfully dispatched.

Other knowledge points

Here are some of the problems and tips I have encountered in using Vue3

Note the script Setup syntax sugar

If you get the child instance of a parent component by ref=’ XXX ‘and the child uses the Script Setup syntax sugar, then the child’s data needs to be exported with Expose or you’ll get an error if you don’t get the data.

Code demo

The parent component

<template> <div> <h2> I'm the parent! </h2> <Child ref='son' /> </div> </template> <script setup> import Child from './components/Child.vue' import { ref } From 'vue' const son = ref(null) console.log('🚀🚀~ son:', son) </script>Copy the code

Child components do not use syntactic sugar at first

<template> <div> I am a child component {{MSG}} </div> </template> <script > import {ref} from 'vue' export default {setup() {const msg = ref('hello') return { msg, } }, }Copy the code

You can see that the MSG property we defined in the child component is available

Now replace the child component withscript setupGrammar sugar try again

<template> <div> <script setup> import {ref} from 'vue' const MSG = ref('hello') </script>Copy the code

You can see that the MSG property defined by the child component is now not available

We can take a look at yudada what to say

The Emit dispatch event validates the parameters

The parent component

<template> <div> <h2> I'm the parent! </h2> <Child @sonClick='sonClick' /> </div> </template> <script setup> import Child from './components/Child.vue' import  { ref } from 'vue' const sonClick = (value) => { console.log(value) } </script>Copy the code

Child components

<template> <div> I am a child component {{MSG}} </div> < button@click ="handleClick(1)"> I am a button 1</button> <button </button> </template> <script> import {ref} from 'vue' export default {name: '', emits: { sonClick: (value) => { if (value === 1) { return true } else { return false } }, }, setup(props, { emit }) { const msg = ref('hello') const handleClick = (value) => { emit('sonClick', value) } return { msg, handleClick, } }, } </script>Copy the code

If we click on button 1 and button 2, we can see that when we click on button 2, the console will warn us, but the application will continue to execute. I haven’t thought of any suitable application scenarios yet, but keep in mind that you can do things here.

Cross-component communication mitmitt. Js

How to implement cross-component communication in Vue2, many people first thought of the Event Bus. However, Vue3 removes $on,$once, and $off so that this method cannot be used. However, the Vue official recommended mitmitt. Js, whose principle is the Event Bus.

Code demo

First installation

npm i mitt -s 
Copy the code

Then encapsulate a hook

//mitt.js
import mitt from 'mitt'
const emitter = mitt();

export default emitter; 
Copy the code

The parent component

<template> <div> <h2> I'm the parent! </h2> <Child1 /> <Child2 /> </div> </template> <script setup> import Child1 from './components/Child1.vue' import Child2  from './components/Child2.vue' </script>Copy the code

The child component 1

<template> <div> I am a child component 1 <h1>{{MSG}}</h1> </div> </template> <script> import {ref, onUnmounted } from 'vue' import emitter from '.. /mitt' export default { name: "', Setup () {// initialize const MSG = ref('hello') const changeMsg = () => {msg.value = 'world'} // Listen for events to update data OnUnmounted (() => {emitter. Off ('change-msg', changeMsg)}) return {MSG, emitter. On ('change-msg', changeMsg) changeMsg, } }, } </script>Copy the code

The child component 2

</div> < button@click ='changeMsg'> click to modify MSG </button> </template> <script> import {ref} from 'vue' import emitter from '.. /mitt' export default { name: '', setup() { const changeMsg = () => { emitter.emit('change-msg') } return { changeMsg, } }, } </script>Copy the code

demo

Custom instruction

Take a look at the hooks of the Vue2 custom instruction

• Bind: Triggered when an instruction is bound to the corresponding element. It only triggers once.
• inserted: When the corresponding element is inserted intoDOMIs triggered when the parent element of.
• Update: This hook is triggered when an element is updated (while its descendants have not triggered the update).
• ComponentUpdated: This hook fires when the entire component (including its children) is updated.
• Unbind: This hook is triggered when a directive is removed from an element. It only triggers once.

In Vue3, the custom instruction’s hook name was changed to look more like the component lifecycle, although they are two different things, in order to make the code more readable and uniform

• bind => beforeMount
• inserted => mounted
• BeforeUpdate: New hook that fires before the element itself is updated
• Update => Remove!
• componentUpdated => updated
• BeforeUnmount: New hook that is triggered before the element itself is unmounted
• unbind => unmounted

Transition animations

There are no major changes to this one, only two class names have been changed. Just because there are no major changes, I once made a big mistake in this one. After I finished writing, I found out that everything was wrong.

The following is a direct quote from the official website

• V-enter-from: defines the start state of the transition. It takes effect before the element is inserted and is removed the next frame after the element is inserted.

• V-enter -active: defines the status when the transition takes effect. Applied throughout the transition phase, before the element is inserted and removed after the transition/animation is complete. This class can be used to define the process time, delay, and curve functions that enter the transition.

• V-enter -to: defines the end state of the transition. The next frame takes effect after the element is inserted (the v-enter-from is removed at the same time) and removed after the transition/animation is complete.

• V-leave-from: defines the start state of the exit transition. Immediately after the exit transition is triggered, the next frame is removed.

• V-leave-active: defines the status when the leave transition takes effect. Applies throughout the exit transition phase, takes effect immediately when the exit transition is triggered, and removes after the transition/animation is complete. This class can be used to define exit transition process time, delay and curve functions.

• V-leave-to: indicates the end of a transition. The next frame takes effect after the departure transition is triggered (and the V-leave-from is deleted at the same time) and is removed after the transition/animation is complete.

Notice that v-enter is changed to V-enter form, and V-leave is changed to V-leave-from.

Other tips

Vue3 removes filter

Get component instance method getCurrentInstance()

This method gets an instance of the current component and is equivalent to this in Vue2, but note that it is used differently in development and production environments.

After all, it is a personal summary, and there will inevitably be mistakes and omissions. I look forward to the supplement and correction of various gods.

At the end of the article’s welfare

In order to help you better review the key knowledge and prepare for the interview more efficiently, ** “95 pages of front-end Learning Notes” ** electronic draft file is specially organized.

The main content includes HTML, CSS, HTML5, CSS3, JavaScript, regular expressions, functions, BOM, DOM, jQuery, AJAX, VUE and so on.

👉Get it for free here👈

html5/css3

• The advantage of it

• HTML5 deprecated Elements

• New elements in HTML5

• HTML5 form-related elements and attributes

• CSS3 added a selector

• CSS3 Added attributes

• Added morphing animation properties

• 3D deformation properties

• Transition properties of CSS3

• CSS3 animation properties

• CSS3 new increment column properties

• CSS3 added a unit

• Elastic box model

  

JavaScript

• JavaScript based

• JavaScript data types

• Arithmetic operations

• Casts.

• The assignment operation

• Relationship between operation

• Logical operations

• The ternary operation

• Branch loop

• switch

• while

• do-while

• for

• Break and continue

• An array of

• Array methods

• 2 d array

• string

  

Regular expression

• Creating regular expressions

• metacharacters

• Pattern modifier

• The regular way

• Support for the String method of re

  

Js object

• Define the object

• Object data access

• JSON

• Built-in objects

• Math methods

• The Date methods

  

Object orientation is a programming idea

• Define the object
• Prototype and prototype chain
• Prototype chain
• The prototype

Common JavaScript design patterns

• A singleton

• The factory pattern

• Case model

  

function

• Definition of a function

• Local variables and global variables

• The return value

• Anonymous functions

• Self-running function

• closure

  

BOM

• Summary of BOM

• The window method

• Frames [] Frames set

• History Historical records

• The location positioning

• The navigator navigation

• Screen screen

• The document document

  

DOM

• DOM object methods
• Manipulating relationships between DOM’s
• DOM node attributes

The event

• Event classification

• The event object

• Flow of events

• Event goals

• Event delegate

• Event listeners

  

jQuery

• JQuery selector

• Property selector

• Position selector

• Descendant selector

• Child selector

• Selector object

• Child elements

• DOM manipulation

• JQuery event

• Container to adapt

• Label style manipulation

• sliding

• Custom animation

  

AJAX

• The working principle of
• The XMLHttpRequest object
• Differences between XML and HTML
• The get () and post ()

HTTP

• HTTP message structure

• Url Request process

  

Performance optimization

• JavaScript code optimization
• Improves file loading speed

webpack

• The characteristics of the webpack

• The disadvantage of webpack

• The installation

• Webpack basic application

• Getting Started with Configuration Files

  

vue

• The MVC pattern

• The MVVM pattern

• Basic grammar

• Instance properties/methods

• The life cycle

• Calculate attribute

• Array update check

• The event object

• Vue components

• Routing using

• Routing navigation

• Embedded routines by

• Named view

  

👉Get it for free here👈