検索
ホームページウェブフロントエンドH5 チュートリアルVue コンポーネントの開発スキルの概要

Vue コンポーネントの開発スキルの概要

Mar 27, 2018 pm 03:52 PM
開発する要約するスキル

今回は、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

ターゲットダイアログコンポーネントの基本スタイルは、図に示すとおりです:

ターゲットスタイルによれば、次のように結論付けることができます:

  1. dialogコンポーネントには、次のことを示すtitlepropsが必要です。ポップアップ ウィンドウのタイトル

  2. dialog コンポーネント OK ボタンが押されたときに、OK イベント を発行する必要があります (つまり、親コンポーネントに OK であることを伝えるため)

  3. 同様に、dialog コンポーネントキャンセルイベントを発行する必要があります

  4. ダイアログコンポーネントは、簡単にカスタマイズできるようにスロットを提供する必要がありますコンテンツ

そして、コーディングは次のようになります:

<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: &#39;Dialog&#39;,
 props: {
 title: {
  type: String,
  default: &#39;标题&#39;
 },
 },
 methods: {
 handleCancel() {
  this.$emit(&#39;cancel&#39;)
 },
 handleOk() {
  this.$emit(&#39;ok&#39;)
 },
 },
}
</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(&#39;cancel&#39;)
 },
 handleOk() {
  this.isShow = true
  this.$emit(&#39;ok&#39;)
 },
 },
}
</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回連続の驚き)。よく見てみると、このコンポーネントは実際にはカプセル化されたダイアログです。

次に、そのようなコンポーネントもカプセル化します。まず考えを整理します:

  1. Elementの使用方法は、これをVueのプロトタイプにぶら下げるだけではないでしょうか?

  2. 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 つの主要なクラスが決まります
  1. Vue.extend を介してコンポーネントの コンストラクター を継承し (適切な言い方がわからないので、このように言います)、このコンストラクターを通じて、関連する属性をカスタマイズできますコンポーネントの呼び出し (使用シナリオ: js がコンポーネントを呼び出します)

  2. js コンポーネントを呼び出すとき、コンポーネントのアニメーション効果を維持するために、最初に document.body.appendChild を使用し、次に Vue.nextTick(() を使用できます。 =>instance.visible = true)

これが簡単な Vue コンポーネントです。私が書いた関連コードは、https://github.com/mvpzx/elapse/ にまとめられています。 Tree/master/be/src/components

この記事の事例などを読んだ後は、この方法を習得したと思います。とても興味深いですね。php 中国語 Web サイトの他の関連記事にも注目してください。

推奨読書:

Vueレンダリングとプラグイン読み込みの操作順序

Node.jsによるDoubanデータのクローリング例

以上がVue コンポーネントの開発スキルの概要の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
H5は何を参照していますか?コンテキストの探索H5は何を参照していますか?コンテキストの探索Apr 12, 2025 am 12:03 AM

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

H5:ツール、フレームワーク、およびベストプラクティスH5:ツール、フレームワーク、およびベストプラクティスApr 11, 2025 am 12:11 AM

H5開発で習得する必要があるツールとフレームワークには、Vue.JS、React、Webpackが含まれます。 1.Vue.jsは、ユーザーインターフェイスの構築に適しており、コンポーネント開発をサポートします。 2.複雑なアプリケーションに適した仮想DOMを介したページレンダリングを最適化します。 3.Webpackは、モジュールのパッケージングに使用され、リソースの読み込みを最適化します。

HTML5の遺産:現在のH5の理解HTML5の遺産:現在のH5の理解Apr 10, 2025 am 09:28 AM

html5hassificlytransformdedwebdeveverment byintroducingsingingelements、endincemultimediasupport、およびrequrovingperformance.1)itmadewebsitesmoreaccessibleandseo-frendlywithsemantelementslike、and.2)

H5コード:アクセシビリティとセマンティックHTMLH5コード:アクセシビリティとセマンティックHTMLApr 09, 2025 am 12:05 AM

H5は、セマンティック要素とARIA属性を介して、WebページのアクセシビリティとSEO効果を改善します。 1.使用などを使用して、コンテンツ構造を整理し、SEOを改善します。 2。ARIA-LabelなどのARIA属性はアクセシビリティを強化し、支援技術ユーザーはWebページをスムーズに使用できます。

H5はHTML5と同じですか?H5はHTML5と同じですか?Apr 08, 2025 am 12:16 AM

「H5」と「HTML5」はほとんどの場合同じですが、特定の特定のシナリオでは異なる意味を持つ可能性があります。 1。「HTML5」は、新しいタグとAPIを含むW3C定義標準です。 2。 "H5"は通常、HTML5の略語ですが、モバイル開発では、HTML5に基づくフレームワークを参照する場合があります。これらの違いを理解することは、プロジェクトでこれらの用語を正確に使用するのに役立ちます。

H5の機能は何ですか?H5の機能は何ですか?Apr 07, 2025 am 12:10 AM

H5、またはHTML5は、HTMLの5番目のバージョンです。開発者により強力なツールセットを提供し、複雑なWebアプリケーションを簡単に作成できるようにします。 H5のコア関数には、次のものが含まれます。1)Webページにグラフィックとアニメーションを描画できる要素。 2)Webページ構造をSEOの最適化を明確かつ助長させるなどのセマンティックタグなど。 3)Geolocationapiなどの新しいAPIは、ロケーションベースのサービスをサポートします。 4)互換性テストとポリフィルライブラリを通じて、クロスブラウザーの互換性を確保する必要があります。

H5リンクの実行方法H5リンクの実行方法Apr 06, 2025 pm 12:39 PM

H5リンクを作成する方法は?リンクターゲットを決定します。H5ページまたはアプリケーションのURLを取得します。 HTMLアンカーの作成:&lt; a&gt;を使用しますアンカーを作成し、リンクターゲットURLを指定するタグ。リンクプロパティの設定(オプション):必要に応じて、ターゲット、タイトル、およびオンクリックプロパティを設定します。 Webページに追加:リンクを表示するWebページにHTMLアンカーコードを追加します。

H5互換性の問題を解決する方法H5互換性の問題を解決する方法Apr 06, 2025 pm 12:36 PM

H5互換性の問題のソリューションには、次のものが含まれます。Webページが画面サイズに応じてレイアウトを調整できるレスポンシブデザインを使用します。クロスブラウザーテストツールを使用して、リリース前に互換性をテストします。 PolyFillを使用して、古いブラウザの新しいAPIのサポートを提供します。 Web標準に従って、効果的なコードとベストプラクティスを使用します。 CSSプリプロセッサを使用して、CSSコードを簡素化し、可読性を向上させます。画像を最適化し、Webページのサイズを削減し、ロードをスピードアップします。 HTTPSがWebサイトのセキュリティを確保できるようにします。

See all articles

ホットAIツール

Undresser.AI Undress

Undresser.AI Undress

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

AI Clothes Remover

AI Clothes Remover

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

Undress AI Tool

Undress AI Tool

脱衣画像を無料で

Clothoff.io

Clothoff.io

AI衣類リムーバー

AI Hentai Generator

AI Hentai Generator

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

ホットツール

Dreamweaver Mac版

Dreamweaver Mac版

ビジュアル Web 開発ツール

MantisBT

MantisBT

Mantis は、製品の欠陥追跡を支援するために設計された、導入が簡単な Web ベースの欠陥追跡ツールです。 PHP、MySQL、Web サーバーが必要です。デモおよびホスティング サービスをチェックしてください。

SAP NetWeaver Server Adapter for Eclipse

SAP NetWeaver Server Adapter for Eclipse

Eclipse を SAP NetWeaver アプリケーション サーバーと統合します。

VSCode Windows 64 ビットのダウンロード

VSCode Windows 64 ビットのダウンロード

Microsoft によって発売された無料で強力な IDE エディター

PhpStorm Mac バージョン

PhpStorm Mac バージョン

最新(2018.2.1)のプロフェッショナル向けPHP統合開発ツール