ウェブフロントエンド
Vue.js
Vue3 で
コンポーネントの移行
次のコンポーネントには 2 つのプロップ (表示されるものとフラグ) があります。別のコンポーネントを通じて、これら 2 つのプロパティに基づいて、テンプレートに表示されるポニー画像の URL が計算されます。ユーザーがコンポーネントをクリックしたときにも、コンポーネントはイベントを発行します。 Ponypony モデルの実行中に選択された画像。
Pony.vue
<template>
<figure @click="clicked()">
<Image :src="ponyImageUrl" :alt="ponyModel.name" />
<figcaption>{{ ponyModel.name }}</figcaption>
</figure>
</template>
<script lang="ts">
import { computed, defineComponent, PropType } from 'vue';
import Image from './Image.vue';
import { PonyModel } from '@/models/PonyModel';
export default defineComponent({
components: { Image },
props: {
ponyModel: {
type: Object as PropType<PonyModel>,
required: true
},
isRunning: {
type: Boolean,
default: false
}
},
emits: {
selected: () => true
},
setup(props, { emit }) {
const ponyImageUrl = computed(() => `/pony-${props.ponyModel.color}${props.isRunning ? '-running' : ''}.gif`);
function clicked() {
emit('selected');
}
return { ponyImageUrl, clicked };
}
});
</script>最初のステップは、要素に属性を追加することです。次に、関数の内容を保持するだけで済みます。定型文はすべて消去できます。次の関数を削除できます。 setupscriptsetupdefineComponentsetupscript
Pony.vue
<script setup lang="ts">
import { computed, PropType } from 'vue';
import Image from './Image.vue';
import { PonyModel } from '@/models/PonyModel';
components: { Image },
props: {
ponyModel: {
type: Object as PropType<PonyModel>,
required: true
},
isRunning: {
type: Boolean,
default: false
}
},
emits: {
selected: () => true
},
const ponyImageUrl = computed(() => `/pony-${props.ponyModel.color}${props.isRunning ? '-running' : ''}.gif`);
function clicked() {
emit('selected');
}
return { ponyImageUrl, clicked };
</script>Implicit returns
最上位のバインディング宣言とインポート ステートメントを削除します。 end を指定すると、自動的にテンプレートで使用できるようになります。ここで入手可能ですので、返却する必要はありません。ポニーの画像をクリックすると、スクリプトが戻ります。
この文は次のように書き換えることができます。「コンポーネントをインポートするだけで、Vue はテンプレート内でのその使用を自動的に認識するため、宣言は省略できます。」 」コンポーネント画像コンポーネント
Pony.vue
<script setup lang="ts">
import { computed, PropType } from 'vue';
import Image from './Image.vue';
import { PonyModel } from '@/models/PonyModel';
props: {
ponyModel: {
type: Object as PropType<PonyModel>,
required: true
},
isRunning: {
type: Boolean,
default: false
}
},
emits: {
selected: () => true
},
const ponyImageUrl = computed(() => `/pony-${props.ponyModel.color}${props.isRunning ? '-running' : ''}.gif`);
function clicked() {
emit('selected');
}
</script>もうすぐそこに到達します。移行して宣言する必要があります。 propsmits
defineProps
Vue は、プロップを定義するために使用できるヘルパーを提供します。これはコンパイル時ヘルパー (マクロ) であるため、コードにインポートする必要はありません。 Vue は、コンパイル時にコンポーネントを自動的に認識します。 defineProps
defineProps は props を返します。
const props = defineProps({
ponyModel: {
type: Object as PropType<PonyModel>,
required: true
},
isRunning: {
type: Boolean,
default: false
}
});defineProps は、前の宣言をパラメータとして受け取ります。しかし、TypeScript ユーザーのためにもっと改善できることがあります。 props
defineProps は通常、型指定されます。引数なしで呼び出すことができますが、プロパティの「形状」としてインターフェイスを指定します。これ以上ひどいことは書けません！正しい TypeScript タイプを使用し、???? を追加してプロップを不要としてマークできます。より流暢な言語で書き直されました: 「Object が Props のタイプとして使用される場合、特定のタイプを指定する必要がありますか?」
const props = defineProps<{
ponyModel: PonyModel;
isRunning?: boolean;
}>();しかし、いくつかの情報が失われました。以前のバージョンでは、デフォルト値を として指定できましたが、同じ動作をさせるには、次のヘルパーを使用できます: isRunningfalsewithDefaults
interface Props {
ponyModel: PonyModel;
isRunning?: boolean;
}
const props = withDefaults(defineProps<Props>(), { isRunning: false });移行する最後に残っている構文は宣言です。 Emits
defineEmits
Vue は、ヘルパーによく似たヘルパーを提供します。この文はすでに関数とそれに対応する操作を明確に表現しているため、これを 1 つの文で書き直すのは困難です。ただし、書き直す必要がある場合は、次の方法を試すことができます。 1. これらの関数は、イベントを定義してトリガーするために使用されます。 2.defineEmits、defineProps、defineEmitsemit 関数はすべてイベントに関連しています。 3. イベントを定義、設定、トリガーする必要がある場合は、defineEmits、defineProps、defineEmitsemit 関数を使用できます。 4. これらの関数は、Vue.js でのイベントの管理に役立ちます
const emit = defineEmits({
selected: () => true
});さらに良いことに、TypeScript を使用します:
const emit = defineEmits<{
(e: 'selected'): void;
}>();完全なコンポーネント宣言は 10 行短くなります。 30 行のコンポーネントを削減するのは悪くありません。これにより、可読性が向上し、TypeScript との連携が向上します。すべてが自動的にテンプレートに公開されるのは少し違和感がありますが、改行がないのですぐに慣れるでしょう。
Pony.vue
{{ ponyModel.name }}
デフォルトをオフにしてExposeを定義
コンポーネントを宣言する 2 つの方法を区別する微妙な違いがいくつかあります。コンポーネントは「デフォルトでは有効になっていない」です。これは、他のコンポーネントはコンポーネント内で定義されている内容を認識できないことを意味します。スクリプトのセットアップ
たとえば、次の章では、コンポーネントが (refs を使用して) 別のコンポーネントにアクセスできることを見ていきます。関数が XX として定義されている場合、関数によって返されるすべてのコンテンツは親コンポーネント YY にも表示されます。で定義されている場合、親コンポーネントは表示されません。ヘルパーを追加することで、公開されたコンテンツを選択できます。パブリックなものには としてアクセスできるようになります。 PonyImageImagedefineComponentsetupPonyImagescript setupImagedefineExpose({ key: value })valuekey
以上がVue3 で
ホットAIツール
Undresser.AI Undress
リアルなヌード写真を作成する AI 搭載アプリ
AI Clothes Remover
写真から衣服を削除するオンライン AI ツール。
Undress AI Tool
脱衣画像を無料で
Clothoff.io
AI衣類リムーバー
AI Hentai Generator
AIヘンタイを無料で生成します。
人気の記事
ホットツール
メモ帳++7.3.1
使いやすく無料のコードエディター
SublimeText3 中国語版
中国語版、とても使いやすい
ゼンドスタジオ 13.0.1
強力な PHP 統合開発環境
ドリームウィーバー CS6
ビジュアル Web 開発ツール
SublimeText3 Mac版
神レベルのコード編集ソフト（SublimeText3）
ホットトピック
7347
15
1627
14
1352
52
1265
25
1214
29
vue3+vite: src に画像を動的にインポートするために require を使用するときのエラーを解決する方法
May 21, 2023 pm 03:16 PM
vue3+vite:src は、イメージとエラー レポートと解決策を動的にインポートするために require を使用します。vue3+vite は複数のイメージを動的にインポートします。vue3。TypeScript 開発を使用している場合、イメージを導入するために require のエラー メッセージが表示されます。requireisnotdefined は使用できません。 vue2 のような imgUrl:require(' .../assets/test.png') は、typescript が require をサポートしていないため、インポートされます。そのため、import が使用されます。解決方法は次のとおりです: awaitimport を使用します
vue3 プロジェクトで tinymce を使用する方法
May 19, 2023 pm 08:40 PM
tinymce はフル機能のリッチ テキスト エディター プラグインですが、tinymce を vue に導入するのは他の Vue リッチ テキスト プラグインほどスムーズではありません。tinymce 自体は Vue には適しておらず、@tinymce/tinymce-vue を導入する必要があります。外国のリッチテキストプラグインであり、中国語版を通過していないため、公式 Web サイトから翻訳パッケージをダウンロードする必要があります (ファイアウォールをバイパスする必要がある場合があります)。 1. 関連する依存関係をインストールします npminstalltinymce-Snpminstall@tinymce/tinymce-vue-S2. 中国語パッケージをダウンロードします 3. スキンと中国語パッケージを導入します. プロジェクトのパブリック フォルダーに新しい tinymce フォルダーを作成し、
Vue3 がマークダウンを解析し、コードのハイライトを実装する方法
May 20, 2023 pm 04:16 PM
Vue はブログ フロントエンドを実装しており、マークダウン解析を実装する必要があり、コードがある場合はコードのハイライトを実装する必要があります。 Vue には、markdown-it、vue-markdown-loader、marked、vue-markdown など、マークダウン解析ライブラリが多数あります。これらのライブラリはすべて非常に似ています。ここではMarkedが使用され、コード強調表示ライブラリとしてhighlight.jsが使用されます。 1. 依存ライブラリをインストールする vue プロジェクトの下でコマンド ウィンドウを開き、次のコマンド npminstallmarked-save//marked を入力して、マークダウンを htmlnpmins に変換します。
Vue3 でページの部分的なコンテンツを更新する方法
May 26, 2023 pm 05:31 PM
ページの部分的な更新を実現するには、ローカル コンポーネント (dom) の再レンダリングを実装するだけで済みます。 Vue でこの効果を実現する最も簡単な方法は、v-if ディレクティブを使用することです。 Vue2 では、v-if 命令を使用してローカル dom を再レンダリングすることに加えて、新しい空のコンポーネントを作成することもできます。ローカル ページを更新する必要がある場合は、この空のコンポーネント ページにジャンプしてから、再びジャンプします。 beforeRouteEnter ガードを空白のコンポーネントに配置します。元のページ。以下の図に示すように、Vue3.X の更新ボタンをクリックして赤枠内の DOM を再読み込みし、対応する読み込みステータスを表示する方法を示します。 Vue3.X の scriptsetup 構文のコンポーネントのガードには o しかないので、
vue3 プロジェクトをパッケージ化してサーバーに公開した後、アクセス ページが空白で表示される問題の解決方法
May 17, 2023 am 08:19 AM
vue3 プロジェクトがパッケージ化され、サーバーに公開されると、アクセス ページに空白の 1 が表示されます。vue.config.js ファイル内の publicPath は次のように処理されます: const{defineConfig}=require('@vue/cli-service') module.exports=defineConfig({publicPath :process.env.NODE_ENV==='production'?'./':'/&
Vue3 の再利用可能なコンポーネントの使用方法
May 20, 2023 pm 07:25 PM
はじめに vue であれ、react であれ、複数の繰り返しコードに遭遇した場合、ファイルを冗長なコードの束で埋めるのではなく、これらのコードを再利用する方法を考えます。実際、vue と React はどちらもコンポーネントを抽出することで再利用を実現できますが、小さなコードの断片に遭遇し、別のファイルを抽出したくない場合は、それに比べて、React は同じファイル内で対応するウィジェットを宣言して使用できます。または、次のような renderfunction を通じて実装します。 constDemo:FC=({msg})=>{returndemomsgis{msg}}constApp:FC=()=>{return(
DefineCustomElement を使用して Vue3 でコンポーネントを定義する方法
May 28, 2023 am 11:29 AM
Vue を使用してカスタム要素を構築する WebComponents は、開発者が再利用可能なカスタム要素 (カスタム要素) を作成できるようにする一連の Web ネイティブ API の総称です。カスタム要素の主な利点は、フレームワークがなくても、任意のフレームワークで使用できることです。これらは、異なるフロントエンド テクノロジ スタックを使用している可能性のあるエンド ユーザーをターゲットにする場合、または最終アプリケーションを使用するコンポーネントの実装の詳細から切り離したい場合に最適です。 Vue と WebComponents は補完的なテクノロジであり、Vue はカスタム要素の使用と作成に対する優れたサポートを提供します。カスタム要素を既存の Vue アプリケーションに統合したり、Vue を使用してビルドしたりできます。
Vue3 でアバターを選択してトリミングする方法
May 29, 2023 am 10:22 AM
最終的な効果は、VueCropper コンポーネントのyarnaddvue-cropper@next をインストールすることです。上記のインストール値は Vue3 用です。Vue2 の場合、または他の方法を参照したい場合は、公式 npm アドレス: 公式チュートリアルにアクセスしてください。また、コンポーネント内で参照して使用するのも非常に簡単です。必要なのは、対応するコンポーネントとそのスタイル ファイルを導入することだけです。ここではグローバルに参照しませんが、import{userInfoByRequest}from'../js/api を導入するだけです。 ' コンポーネント ファイルにインポートします。import{VueCropper}from'vue-cropper&
