Wondershare EdrawMind
마인드 맵 갤러리 Vue3
- 13
Vue3
vue3 の構文や一般的な拡張プラグインを詳しく紹介しており、学習やクエリに便利な情報が満載です。
2024-02-04 00:46:16에 편집됨
- 추천 사항
- 개요
Vue3
プロジェクトの作成
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 式をテンプレートでサポートできます
できる
{{ 番号 1 }}
{{ わかりましたか? 'はい' : 'いいえ'}}
{{ message.split( ' ').reverse().join( ' ')}}
いいえ
{{ var a = 1 }}
これは表現ではなくステートメントです
{{ 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()] }) ] } })