ログイン
サインイン

Vue3

vue3 の構文や一般的な拡張プラグインを詳しく紹介しており、学習やクエリに便利な情報が満載です。

2024-02-04 00:46:16 に編集されました

PlotWizard

最近の作品その他の作品を表示>>

Zootopia 2 Easter Egg
This article discusses the Easter eggs and homages in Zootopia 2 that you may have discovered. The main content includes: character and archetype Easter eggs, cinematic universe crossover Easter eggs, animal ecology and behavior references, symbol and metaphor Easter eggs, social satire and brand allusions, and emotional storylines and sequel foreshadowing.
Zootopia 2 Character Relationship Chart
[Zootopia Character Relationship Chart] The idealistic rabbit police officer Judy and the cynical fox conman Nick form a charmingly contrasting duo, rising from street hustlers to become Zootopia police officers!
Deep Analysis of Character Relationships in Zootopia 2
This is a mind map about Deep Analysis of Character Relationships in Zootopia 2, Main content: 1、 Multi-layer network of relationships: interweaving of main lines, branch lines, and hidden interactions, 2、 Motivation for Character Behavior: Active Promoter and Hidden Intendant, 3、 Key points of interaction: logic of conflict, collaboration, and covert support, 4、 Fun Easter eggs: metaphorical details hidden in interactions.

Vue3

PlotWizard

最近の作品その他の作品を表示>>

おすすめ
アウトライン

Python の基本
- 33
MMガイド作品
アプリケーション設計および実装テクノロジのマインドマップ
- 5
PlotWizard
Pythonライブラリ一覧
- 11
PlotWizard
プログラミング
- 10
PlotWizard
Django アプリケーションを作成する
- 12
PlotWizard
第 2 章ホリスティック学習テクノロジー効率的に学習する方法
- 4
WSUJfrxa
Python の知識ポイント
- 14
WSUJfrxa
BOM
- 13
WSUJfrxa
ウェブワーカー
- 12
WSUJfrxa
HTMLタグの種類
- 45
- 1
WSUJfrxa

プロジェクトの作成

vue 作成 A

テンプレートの構文

文章

どこでも

JS の $A.text() に相当

一般的にはjsのdata()でデータを設定するために使用されます。

旧バージョン

デフォルトのエクスポート { 名前: '123'、データ（）{ 戻る{ msg: "メッセージプロンプト" } } }

新しいバージョン

ref は変数を定義します。変数は .value 属性を使用して再割り当てできます。 ref は reactive の再パッケージです

reactive はオブジェクトを定義しますが、基本的なデータ型を定義できず、再割り当てもできません

生のHTML

変数を使用して HTML を動的に表す場合、二重中括弧はデータを HTML ではなく通常のテキストとして解釈します。

v-html=""

JS の $A.html() に相当

属性

変数を使用して属性を動的に表現する

v-バインド:id=""

JS の $('div').attr('id', 'ID') と同等

v-bind:id は、:id と省略できます。

A="B" の B を変数にしたい場合は、A の前に: を追加するだけです。

単純な JS 式をテンプレートでサポートできます

できる

いいえ

これは表現ではなくステートメントです

{{ if (ok) {返信メッセージ} }}

プロセス制御は有効になりません。3 項式を使用してください

条件付きレンダリング

v-if

値が true の場合にのみレンダリングされます

v-その他

Vショー

レンダリングはされるが表示されない

リストのレンダリング

v-for

項目内の (x,index)

このコマンドは len(items) 回ループし、そのたびに内部の x が items の値を取得するために使用されます。

:key="アイテム.id"

効率を向上させるために適切に更新する

イベント処理

イベントを追加

直接書く

@click="カウンター = 1"

関数の呼び出し

@click="クリックハンドル(123)"

旧バージョン

メソッド: { クリックハンドル(データ){ コンソール.ログ(データ); } }

メソッド内のデータの値の変更は、これを通じて取得できます。

新しいバージョン

ネイティブ JS イベントであるパラメーターイベントを追加できます。

知らせ

click は、<li> などのクリックされたオブジェクトに対してトリガーできます。

双方向バインディング

v モデル

<input>、<textarea>、および <select> を双方向にバインドできます

data の値を変更すると、<input> の値も変更される可能性があります。 <input> の値を変更すると、data の値も変更される可能性があります

属性をモデルタイプに変換する

v-model:current-page="現在のページ"

v-model.lazy

<input> がフォーカスを失った場合にのみ変更されます

v-model.trim

取得時に先頭と末尾の空白を削除する

コンポーネント

サフィックス

.vue

コンテンツ

テンプレート

脚本

デフォルトのオブジェクトプロパティをエクスポートする

name: コンポーネントの名前

データ: データを渡す

メソッド:関数の書き込み

コンポーネント: <テンプレート> で使用されるすべてのコンポーネントを保存します。

props: 親コンポーネントから子コンポーネントに渡されるデータを格納します。

watch(): 特定のデータが変更されたときにトリガーされます

計算: 特定のデータを動的に計算します。

setup(props, context): 変数と関数を初期化します。

ref は変数を定義します。変数は .value 属性を使用して再割り当てできます。

リアクティブ定義オブジェクトは再割り当てできません

context.emit(): 親コンポーネントのバインディングをトリガーする関数

return は子コンポーネントにデータを渡すことができます

スタイル

範囲指定された

この属性が存在する場合、このスタイルは現在のコンポーネントでのみ有効になります。

負荷

コンポーネントの紹介

./components/A.vue から A をインポート

コンポーネントにぶら下がっている

コンポーネント:{A}

表示コンポーネント

<A/>

コンポーネントの相互作用

親コンポーネントが子コンポーネントに渡される

HTMLを渡す

<el-main>リスト</el-main>

変数を渡す

配送方法

スクリプトのエクスポートデフォルトの小道具を介して

通過ステップ

親コンポーネント

テンプレート内の子コンポーネントのタグに記述する

:A=B :C=D

複雑なパラメータ B を渡したい場合は、setup() に記述することができます。

ここでBはユーザーです

サブアセンブリ

脚本

デフォルトのエクスポート { 名前: "MyComponent", 小道具: { A:{ タイプ: 文字列、デフォルト： "" }、 }、 }

通常、required:true およびdefault:"" のいずれかを選択します。

知らせ

配列とオブジェクトのデフォルト値は関数である必要があります

デフォルト:function(){ 戻る []; }

デフォルト:function(){ 戻る {}; }

セットアップでは、props を通じて親コンポーネントの情報を参照できます。

テンプレート

{{}} 引用

渡された型

弦

番号

ブール値

配列

物体

関数

子コンポーネントが親コンポーネントに渡される

配送方法

カスタムイベントを介してデータを渡す

通過ステップ

サブアセンブリ

テンプレートにイベントAを記述する

イベントソース

このイベント A をメソッドに実装します

旧バージョン

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

新しいバージョン

context.emit("B"): 親コンポーネントのバインディングをトリガーする関数

親コンポーネント

テンプレート内の子コンポーネントのタグに記述する

@B="C"

このイベント C をメソッドに実装します。イベントには、渡される値であるパラメーターが含まれます。

C(データ){}

コンポーネントのライフサイクル

作成時: beforeCreate、create レンダリング時: beforeMount、マウント済みアップデート時：beforeUpdate、updated アンマウント時：beforeUnmount、アンマウント

8つの周期関数はデータと同じレベルです

サードパーティの紹介

スワイパー

カルーセル

アクシオス

ネットワークリクエスト

カプセル化

src に utils フォルダーを作成し、その中に request.js ファイルを作成します。

具体的な使い方

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

10:16

ネットワークリクエストのクロスドメインソリューション

クエリ文字列

文字列に変換する

ルーティング

ページジャンプ

ルーター内のルートにジャンプしたいURLを記述します。

<ルータービュー>

見せる

<ルーターリンクへのリンク>...">

ジャンプ

パラメータの伝達

パス:「/リスト/:A/:B」

to="/list/Baidu/1"

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

ネストされたルーティング

リダイレクト

{ パス: '/:catchAll(.*)/', リダイレクト: "/404"、 }

リフレッシュする

デフォルトでは、名前によってリフレッシュするかどうかが決定されます。

キーの値を書き換えることで判定方法をカスタマイズできます

ビュークス

構成

状態: vuex でコンテンツを使用する

Getter: Vuex でデータをフィルタリングして計算する

ミューテーション: Vuex ストアの状態を変更する

旧バージョン

新しいバージョン

「vuex」からインポート { useStore };

const ストア = useStore();

設定（）{ store.dispatch("ログイン", {paras}) }

コミットは、ミューテーションを送信して実行するためのメソッドであり、ミューテーションはデータを変更するため、同期する必要があります。

ディスパッチは、アクションを送信して実行するメソッドであり、非同期操作であるミューテーションを送信します。

アクション: Mutation と同様、非同期操作をサポートしますが、ストアを変更することはできません

モジュール: 状態を定義するサブモジュール

移行

外部の

州

ストア.状態.ユーザー.アクセス

アクション

store.dispatch("関数名", パラメータ)

突然変異

store.commit("関数名", パラメータ)

内部

突然変異が状態を調整する

状態ID

呼び出し関数

ストアをコンテキストに変更

JWT

パスワード公開キー -> 新しい文字列。公開キーがある場合は、それを使用してパスワードが正しいかどうかを確認できます。ただし、この新しい文字列からパスワードを取得するには、新しい文字列をプッシュする必要があります。戻る。

npm i jwt-decode

「jwt-decode」から jwt_decode をインポートします。

注: Bearer の後にスペースがあります

アヤックス

vue ページで ajax を使用したい場合は、セットアップに直接記述することができ、ページの生成時に直接呼び出されます。もちろん関数で書くこともできます

vuex で使用したい場合は、それをトリガーする関数に入れる必要があります。

他の

設定（）

ルートノードのないフラグメント

インストール要素

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 コンポーネント = require('unplugin-vue-components/webpack') const { ElementPlusResolver } = require('unplugin-vue-components/resolvers') module.exports =defineConfig({ transpileDependency: true、 configureWebpack: { プラグイン: [ AutoImport({ リゾルバー: [ElementPlusResolver()] })、コンポーネント({ リゾルバー: [ElementPlusResolver()] }) ] } })