登錄
登入

心智圖資源庫 Vue3

Vue3

詳細介紹了vue3的語法和常用擴充插件，方便學習和查詢，乾貨滿滿，有興趣的小夥伴可以參考使用！

編輯於2024-02-04 00:46:16

WSpOlsSb

最近的作品檢視更多>>

Système de trading de stock émotionnel de la part
Il s'agit d'une carte mentale sur le système de trading de stocks de flux émotionnels des shares A. Le contenu principal comprend: le système de trading de flux émotionnel A-share, comment utiliser le logiciel TongDaxin pour effectuer le trading de flux émotionnel.
Imagination psychologique générale
J'ai trié le contenu pertinent de l'imagination psychologique ordinaire. L'imagination est le processus psychologique dans lequel le cerveau humain traite et transforme les apparences stockées et forme une nouvelle image. Il s'agit d'une activité cognitive de haut niveau et complexe, et c'est aussi une forme particulière de processus de réflexion. L'imagination utilise principalement des informations graphiques comme objet de traitement, plutôt que des mots et des symboles. J'espère que cela vous sera utile ~
Une mauvaise utilisation du code doit être spéciale
Il s'agit d'une carte mentale sur l'utilisation irrégulière des classiques, et son contenu principal comprend: les personnes, les anneaux, les lois, les objets et les machines. Fournit une référence utile pour résoudre le problème.

Vue3

WSpOlsSb

最近的作品檢視更多>>

推薦給您
大綱

前端演算法網路知識框架筆記總結
- 6
슈퍼직장인
前端學習
- 10
WSUJfrxa
BOM
- 3
PlotWizard
Web Worker
- 4
PlotWizard
HTML標籤種類
- 80
- 1
PlotWizard
HTML CSS
- 5
PlotWizard
HTML基礎知識
- 7
PlotWizard
前端CSS、JS、HTML開發知識點學習總結
- 6
PlotWizard
CSS前端HTML基礎課程訓練方案
- 4
PlotWizard
ethers.js
- 5
EllaGrace

創建專案

vue create A

模板語法

文字

任意位置

相當於JS中的$A.text()

一般配合js中的data()設定數據

舊版

export default { name: '123', data(){ return{ msg: "訊息提示" } } }

新版

ref定義變數，可以用.value屬性重新賦值。 ref是reactive的再封裝

reactive定義對象，無法定義基本資料型別，不可重新賦值

原始HTML

用變數動態表示HTML時，雙大括號會將資料解釋為普通文本，而非HTML

v-html=""

相當於JS中的$A.html()

屬性

用變數動態表示attr

v-bind:id=""

相當於JS中的$('div').attr('id', 'ID')

v-bind:id可以簡寫成:id

當我們希望A="B"的B是變數的時候，在A前面加:就可以了

在模板中可以支援簡單的js表達式

可以

不行

這是語句，不是表達式

{{ if (ok) {return message} }}

流程控制也不會生效，請使用三元表達式

條件渲染

v-if

只有值為true才會渲染

v-else

v-show

會渲染，但不會顯示

清單渲染

v-for

(x,index) in items

這個指令會循環len(items)次，每次裡面的x以此取items裡面的值

:key="item.id"

就地更新，提高效率

事件處理

新增事件

直接寫

@click="counter = 1"

呼叫函數

@click="clickHandle(123)"

舊版

methods: { clickHandle(data){ console.log(data); } }

在methods中改變data的值，可以透過this.A來取得

新版

可以加一個參數event，是原生js的事件

注意

click可以對任何被點擊的物件觸發，例如<li>

雙向綁定

v-model

可以對<input>、<textarea>、<select>雙向綁定

改變data中的值可以改變<input>中的值，改變<input>中的值也可以改變data中的值

把一個屬性轉換成model類型

v-model:current-page="nowpage"

v-model.lazy

在<input>失去聚焦的時候才會改變

v-model.trim

在取得的時候去掉前後空白符

組件

後綴

.vue

內容

template

script

export default物件的屬性

name：組件的名稱

data：傳遞數據

methods：寫函數

components：儲存<template>中用到的所有元件

props：儲存父元件傳遞給子元件的數據

watch()：當某個資料改變時觸發

computed：動態計算某個數據

setup(props, context)：初始化變數、函數

ref定義變數，可以用.value屬性重新賦值

reactive定義對象，不可重新賦值

context.emit()：觸發父元件綁定的函數

return 可以將資料傳遞給子元件

style

scoped

如果有這個屬性，那麼這個樣式只在目前元件中生效

載入

引入組件

import A from ./components/A.vue

掛在組件

components:{A}

顯示組件

<A/>

元件交互

父組件傳遞到子組件

傳遞html

<el-main>名單</el-main>

傳遞變數

傳遞的方法

透過script中的export default中的props

傳遞的步驟

父組件

在template中的子組件的標籤中寫

:A=B :C=D

如果要傳一些複雜的參數B，可以在setup()寫

此處B就是user

子組件

script

export default { name : "MyComponent", props: { A:{ type : String, default: "" }, }, }

一般required:true和default:""二選一

注意

數組和物件的預設值必須是函數

default:function(){ return []; }

default:function(){ return {}; }

在setup中可以透過props.引用父組件的信息

template

{{}}引用

傳遞的類型

String

Number

Boolean

Array

Object

Function

子組件傳遞到父組件

傳遞的方法

透過自訂事件來傳遞數據

傳遞的步驟

子組件

在template中寫一個事件A

事件來源

在methods中實現這個事件A

舊版

this.$emit("B",this.message)

新版

context.emit("B")：觸發父元件綁定的函數

父組件

在template中的子組件的標籤中寫

@B="C"

在methods中實作這個事件C，事件會有一個參數，這個參數就是傳過來的值

C(data){}

組件的生命週期

創建時: beforeCreate 、created 渲染時: beforeMount 、mounted 更新時:beforeUpdate 、updated 卸載時: beforeUnmount 、unmounted

八個週期函數和data是同一層級的

引入第三方

Swiper

輪播圖

Axios

網路請求

封裝

在src中建立utils資料夾，在其中建立request.js文件

具體用法

https://www.bilibili.com/video/BV1Y84y1B7Tz?p=14&vd_source=048c7bdfe54313b8b3ee1483d9d07e38

10:16

網路請求跨域解決方案

querystring

轉換成string

路由

頁面跳轉

在router中的routes中寫下需要跳轉的網址

<router-view>

顯示

<router-link to="...">

跳轉

攜帶參數

path:"/list/:A/:B"

to="/list/百度/1"

const route = useRoute(); {{route.params.userID}}

嵌套路由

重定向

{ path: '/:catchAll(.*)/', redirect: "/404", }

重新整理

預設是由name判定是否刷新

可以透過重寫key值自訂判斷方式

vuex

組成

state:使用vuex中的內容

getter:對Vuex中的資料進行過濾和計算

Mutation:修改 Vuex 的 store 中的狀態

舊版

新版

import { useStore } from "vuex";

const store = useStore();

setup(){ store.dispatch("login", {paras}) }

commit是提交執行mutations中的方法，Mutations是修改資料的，必須同步。

dispatch是提交執行actions中的方法，action提交的是Mutations,可以是非同步操作。

action:類似Mutation，支援非同步操作，但不能修改store

modules:定義state的子模組

呼叫

外部

state

store.state.user.access

action

store.dispatch("函數名稱",參數)

mutation

store.commit("函數名稱",參數)

內部

mutations調state

state.id

調函數

把store改成context

JWT

密碼公鑰 ->新字串如果你擁有公鑰可以用來驗證密碼是否正確但是你想透過這個新字串得到密碼則需要私鑰新字串反推回去

npm i jwt-decode

import jwt_decode from 'jwt-decode';

注意：Bearer後面有空格

ajax

如果要在vue頁面使用ajax，可以直接寫在setup裡面，會在頁面產生的時候直接呼叫。當然也可以寫在函數當中

如果要在vuex中使用，需要放到函數裡面才觸發

其他

setup()

沒有根節點的碎片

安裝element

npm install element-plus --save

npm install -D unplugin-vue-components unplugin-auto-import

vue.config.js

const { defineConfig } = require('@vue/cli-service') const AutoImport = require('unplugin-auto-import/webpack') const Components = require('unplugin-vue-components/webpack') const { ElementPlusResolver } = require('unplugin-vue-components/resolvers') module.exports = defineConfig({ transpileDependencies: true, configureWebpack: { plugins: [ AutoImport({ resolvers: [ElementPlusResolver()] }), Components({ resolvers: [ElementPlusResolver()] }) ] } })