今回は、Vue コンポーネントの開発スキルについてまとめてみました。Vue コンポーネント開発における 注意点 について、実際の事例を見てみましょう。
まえがき
卒業が近づいてきたので、簡単な個人ブログを書きました。プロジェクトのアドレスはここをクリックしてください (ちなみに、スターを付けてください)。次に、Element のダイアログ ボックスとポップアップ コンポーネントのロープロファイル バージョンを段階的に模倣します。
Text
Vue 単一ファイル コンポーネント開発
vue-cli を使用してプロジェクトを初期化すると、src/components フォルダーに HelloWorld.vue ファイルが見つかります。これが単一ファイルの基本的な開発モデルです。コンポーネント。
// 注册 Vue.component('my-component', { template: '<p>A custom component!</p>' }) // 创建根实例 new Vue({ el: '#example' })
次に、ダイアログ コンポーネントの作成を開始します。
Dialog
ターゲットダイアログコンポーネントの基本スタイルは、図に示すとおりです:
ターゲットスタイルによれば、次のように結論付けることができます:
dialogコンポーネントには、次のことを示すtitlepropsが必要です。ポップアップ ウィンドウのタイトル
dialog コンポーネント OK ボタンが押されたときに、OK イベント を発行する必要があります (つまり、親コンポーネントに OK であることを伝えるため)
- 同様に、dialog コンポーネントキャンセルイベントを発行する必要があります
- ダイアログコンポーネントは、簡単にカスタマイズできるようにスロットを提供する必要がありますコンテンツ
<template> <p> </p> <p> </p> <p> <span>{{ title }}</span> <i></i> </p> <p> <slot></slot> </p> <p> <button>取消</button> <button>确定</button> </p> </template> <script> export default { name: 'Dialog', props: { title: { type: String, default: '标题' }, }, methods: { handleCancel() { this.$emit('cancel') }, handleOk() { this.$emit('ok') }, }, } </script>これで、ダイアログコンポーネントの開発は完了します。使用方法は以下の通りです
<ta-dialog> <p>我是内容</p> </ta-dialog>この時、問題が発見され、v-ifやv-showを使ってポップアップウィンドウの表示を制御しているのですが、アニメーションが無い! ! ! 、とても硬そうに見えます。コーチ、アニメーションを追加したいのですが、この時点でトランジションコンポーネントが機能します。トランジションコンポーネントをCSSと組み合わせて使用すると、効果の高いアニメーションを多数作成できます。次に、ダイアログ コンポーネントのアニメーションを強化します。コードは次のとおりです。
<template> <transition> <p> // 省略 </p> </transition> </template> <script> export default { data() { return { isShow: true } }, methods: { handleCancel() { this.isShow = false this.$emit('cancel') }, handleOk() { this.isShow = true this.$emit('ok') }, }, } </script>トランジション コンポーネントが nameprops を受け取ることがわかります。それでは、アニメーションを完成させるための CSS をどのように記述するか?非常に簡単な方法で、次の 2 つの
キー クラス (CSS className) スタイルを記述するだけです:
.slide-down-enter-active { animation: dialog-enter ease .3s; } .slide-down-leave-active { animation: dialog-leave ease .5s; } @keyframes dialog-enter { from { opacity: 0; transform: translateY(-20px); } to { opacity: 1; transform: translateY(0); } } @keyframes dialog-leave { from { opacity: 1; transform: translateY(0); } to { opacity: 0; transform: translateY(-20px); } }優れた動的効果を開発するのは非常に簡単です。トランジション コンポーネントの名前がスライドダウンされ、次のキー クラス名を記述することに注意してください。アニメーションは、スライドダウンしてアクティブになると、スライドダウンしてアクティブのままになります。
ダイアログをカプセル化してメッセージボックスを作成します
要素のメッセージボックスは次のように使用されます:this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', { confirmButtonText: '确定', cancelButtonText: '取消', type: 'warning' }).then(() => { this.$message({ type: 'success', message: '删除成功!' }); }).catch(() => { this.$message({ type: 'info', message: '已取消删除' }); });このコードを見たとき、とても魔法のような、とても魔法のような、とても魔法のような気分になりました(3回連続の驚き)。よく見てみると、このコンポーネントは実際にはカプセル化されたダイアログです。
- Elementの使用方法は、これをVueのプロトタイプにぶら下げるだけではないでしょうか?
- Elementのthenは確認、catchはキャンセルを意味します。そして約束で十分です
import Vue from 'vue' import MessgaeBox from './src/index' const Ctur = Vue.extend(MessgaeBox) let instance = null const callback = action => { if (action === 'confirm') { if (instance.showInput) { instance.resolve({ value: instance.inputValue, action }) } else { instance.resolve(action) } } else { instance.reject(action) } instance = null } const showMessageBox = (tip, title, opts) => new Promise((resolve, reject) => { const propsData = { tip, title, ...opts } instance = new Ctur({ propsData }).$mount() instance.reject = reject instance.resolve = resolve instance.callback = callback document.body.appendChild(instance.$el) }) const confirm = (tip, title, opts) => showMessageBox(tip, title, opts) Vue.prototype.$confirm = confirmこの時点で、どうやってコールバックするか疑問に思っているかもしれません。実際、私はカプセル化されたダイアログを作成し、その中に MessageBox という名前を付けました。コードには 2 つのメソッドがあります:
onCancel() { this.visible = false this.callback && (this.callback.call(this, 'cancel')) }, onConfirm() { this.visible = false this.callback && (this.callback.call(this, 'confirm')) },
はい、確認時とキャンセル時にコールバックするためです。 Vue.extend についてもお話したいと思います。
新しい MessageBox を直接使用するのではなく、新しい Ctur を使用します。これは、たとえば、
instance = new Ctur({ propsData }).$mount()
At のようにデータを定義できるためです。実際には、このページにはまだメッセージ ボックスがありません。
document.body.appendChild(instance.$el)
これを直接実行すると、メッセージ ボックスが開いたときにはアニメーションが表示されないかもしれませんが、閉じられたときにはアニメーションが表示されます。 。解決策も非常に簡単です。
appendChild を非表示にし、次のようなコードを使用します。Vue.nextTick(() => instance.visible = true)
このようにすると、アニメーションが表示されます。
概要
- トランジションとCSSを通じて優れたアニメーションを実現します。その中で、遷移コンポーネントの名前によって、[name]-enter-active と [name]-leave-active という名前の CSS を記述するための 2 つの主要なクラスが決まります
Vue.extend を介してコンポーネントの コンストラクター を継承し (適切な言い方がわからないので、このように言います)、このコンストラクターを通じて、関連する属性をカスタマイズできますコンポーネントの呼び出し (使用シナリオ: js がコンポーネントを呼び出します)
js コンポーネントを呼び出すとき、コンポーネントのアニメーション効果を維持するために、最初に document.body.appendChild を使用し、次に Vue.nextTick(() を使用できます。 =>instance.visible = true)
これが簡単な Vue コンポーネントです。私が書いた関連コードは、https://github.com/mvpzx/elapse/ にまとめられています。 Tree/master/be/src/components
この記事の事例などを読んだ後は、この方法を習得したと思います。とても興味深いですね。php 中国語 Web サイトの他の関連記事にも注目してください。
推奨読書:
以上がVue コンポーネントの開発スキルの概要の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

H5は、マルチメディアサポート、オフラインストレージ、パフォーマンスの最適化により、Webユーザーエクスペリエンスを向上させます。 1)マルチメディアサポート:H5と要素は、開発を簡素化し、ユーザーエクスペリエンスを向上させます。 2)オフラインストレージ:WebStorageとIndexEdDBは、エクスペリエンスを改善するためにオフラインで使用できるようにします。 3)パフォーマンスの最適化:ウェブワーカーと要素は、パフォーマンスを最適化して帯域幅の消費を削減します。

HTML5コードは、タグ、要素、属性で構成されています。1。タグはコンテンツタイプを定義し、などの角度ブラケットに囲まれています。 2。要素は、startタグ、内容、および内容などのエンドタグで構成されています。 3。属性は、開始タグのキー値のペアを定義し、ような関数を強化します。これらは、Web構造を構築するための基本ユニットです。

HTML5は、最新のWebページを構築するための重要なテクノロジーであり、多くの新しい要素と機能を提供します。 1。HTML5は、Webページの構造とSEOを強化するなどのセマンティック要素を導入します。 2。プラグインなしのマルチメディア要素と埋め込みメディアをサポートします。 3.フォームは、新しい入力タイプと検証プロパティを強化し、検証プロセスを簡素化します。 4.オフラインおよびローカルストレージ機能を提供して、Webページのパフォーマンスとユーザーエクスペリエンスを向上させます。

H5コードのベストプラクティスには以下が含まれます。1。正しいDoctype宣言と文字エンコーディングを使用します。 2。セマンティックタグを使用します。 3。HTTPリクエストを削減します。 4.非同期負荷を使用します。 5。画像を最適化します。これらのプラクティスは、Webページの効率、保守性、ユーザーエクスペリエンスを向上させることができます。

Web標準とテクノロジーは、これまでにHTML4、CSS2、および単純なJavaScriptから進化し、重要な開発を受けてきました。 1)HTML5は、CanvasやWebstorageなどのAPIを導入し、Webアプリケーションの複雑さと互換性を高めます。 2)CSS3はアニメーション関数とトランジション関数を追加して、ページをより効果的にします。 3)JavaScriptは、矢印関数やクラスなど、node.jsおよびES6の最新の構文を通じて開発効率とコードの読みやすさを向上させます。これらの変更により、パフォーマンスの最適化とWebアプリケーションのベストプラクティスの開発が促進されました。

H5はHTML5の略語だけでなく、より広い最新のWeb開発テクノロジーエコシステムを表しています。1。H5にはHTML5、CSS3、JavaScript、および関連するAPIおよびテクノロジーが含まれます。 2.より豊かでインタラクティブでスムーズなユーザーエクスペリエンスを提供し、複数のデバイスでシームレスに実行できます。 3. H5テクノロジースタックを使用して、レスポンシブWebページと複雑なインタラクティブ機能を作成できます。

H5とHTML5は、同じこと、つまりHTML5を参照します。 HTML5はHTMLの5番目のバージョンであり、セマンティックタグ、マルチメディアサポート、キャンバスとグラフィックス、オフラインストレージ、ローカルストレージなどの新しい機能をもたらし、Webページの表現力と互換性を向上させます。

H5ReferStoHtml5、apivotaltechnologyinwebdevelopment.1)html5introduceSnewelementsandapisforrich、dynamicwebapplications.2)Itupp ortsmultimediawithoutplugins、endancingurexperiencecrossdevices.3)semanticelementsimprovecontentstructurendseo.4)H5'srespo


ホットAIツール

Undresser.AI Undress
リアルなヌード写真を作成する AI 搭載アプリ

AI Clothes Remover
写真から衣服を削除するオンライン AI ツール。

Undress AI Tool
脱衣画像を無料で

Clothoff.io
AI衣類リムーバー

AI Hentai Generator
AIヘンタイを無料で生成します。

人気の記事

ホットツール

mPDF
mPDF は、UTF-8 でエンコードされた HTML から PDF ファイルを生成できる PHP ライブラリです。オリジナルの作者である Ian Back は、Web サイトから「オンザフライ」で PDF ファイルを出力し、さまざまな言語を処理するために mPDF を作成しました。 HTML2FPDF などのオリジナルのスクリプトよりも遅く、Unicode フォントを使用すると生成されるファイルが大きくなりますが、CSS スタイルなどをサポートし、多くの機能強化が施されています。 RTL (アラビア語とヘブライ語) や CJK (中国語、日本語、韓国語) を含むほぼすべての言語をサポートします。ネストされたブロックレベル要素 (P、DIV など) をサポートします。

SublimeText3 英語版
推奨: Win バージョン、コードプロンプトをサポート!

SublimeText3 中国語版
中国語版、とても使いやすい

Dreamweaver Mac版
ビジュアル Web 開発ツール

VSCode Windows 64 ビットのダウンロード
Microsoft によって発売された無料で強力な IDE エディター
