Vue應用:

• 從引入VUE開始：Vimport { createApp } from 'vue'
• 創(chuàng)建一個VUE實例對象，每一個項目只有一個VUE實例對象：const app = createApp(app)

每一個項目都需要一個根組件，其他組件將作為其子組件，組件層層嵌套。

• 掛載渲染到容器中：app.mount('#app')

這里的#app對應的是index.html中一個id=app的div容器中，所有的頁面內(nèi)容都在這個容器中顯示。

• 我們所寫的所有vue文件，最終都會在瀏覽器中識別到main.js文件，再從main,js文件擴展開始運行。

• ./src/assets 用于存放圖片 css 字體 圖標
• ./components用于存放vue文件

組件引用 , 注冊：components

局部注冊：

分為：引用、注入、顯示 三個步驟

<style scoped>讓當前樣式只在當前組件中生效

全局注冊：在main.js當中 不需要再引用 注入，在任意組件中可以直接顯示。

示例：引入header組件(import "組件的名字" from "路徑")

(app.component("你起的名字","組件的名字")

組件傳遞數(shù)據(jù) 父傳子:props（和data同級）

將父級的數(shù)據(jù)傳到子集。

父級引入子集，將數(shù)據(jù)寫在標簽中以傳遞數(shù)據(jù)：

子集利用props，接受父級引入的變量：

• 動態(tài)傳遞，傳遞變量：修改父級傳遞信息為“變量名”，傳遞名前加“：”

• props可以傳遞多種類型.
• 是將變量整個傳過去，包括名稱和內(nèi)容

• 校驗數(shù)據(jù)類型：

可以兼容多種數(shù)據(jù)，用字符串擴起。

• 默認值：

props下的變量可以有一個默認值default:...，如果沒有傳遞數(shù)據(jù)，可以顯示默認值。

• 必選項：

required:true

不傳遞參數(shù)會報警告

• props只讀，不能修改數(shù)據(jù)。

組件傳遞數(shù)據(jù) 子傳父:自定義事件——this.$emit()

將子集的數(shù)據(jù)傳到父級。

子集：傳遞各種信息，比如設置函數(shù)設置數(shù)據(jù)↓

父級:引入子級，觸發(fā)子集函數(shù)，利用函數(shù)設置變量以接收數(shù)據(jù)↓

組件傳遞數(shù)據(jù) 父傳子：模板內(nèi)容傳遞(div)——插槽

父級引入子集，寫入<子集>插槽傳遞內(nèi)容</子集>:

子集使用<slot></slot>標記插槽接收位置，接收數(shù)據(jù)

• 動態(tài)內(nèi)容：插槽內(nèi)容可以不寫死，在父級data(){return{內(nèi)容:"內(nèi)容"}}書寫，因為插槽內(nèi)容在父級中定義的，可以訪問父級的數(shù)據(jù)，傳遞到子級，在子級中渲染。
• 具名插槽：在父級插槽中，插入<template v-slot:name>內(nèi)容</...>來區(qū)分多個插槽。在子集插槽中，通過<slot name="name">與父級各個插槽相匹配。 可以簡寫，把"v-slot:"用"＃"代替。

組件生命周期

生命周期函數(shù)是自動運行的。可以讓開發(fā)者有機會在特定階段運行自己的代碼

動態(tài)組件

切換組件

注意要以字符串的形式進行賦值

保持組件存活

讓被切換掉的組件不按照生命周期卸載組件，保持存活。

將不希望因為切換組件而被刷新的組件嵌套一層<keep-alive></...>

還沒有學習的內(nèi)容：

異步，依賴注入