Vue コンポーネント開発のテクニックは何ですか?

今回は、Vue コンポーネント開発のスキルと、Vue コンポーネント開発の注意事項をお届けします。実際の事例を見てみましょう。

Vue 単一ファイルコンポーネント開発

vue-cli を使用してプロジェクトを初期化すると、src/components フォルダーに HelloWorld.vue ファイルが見つかります。これは、単一ファイル コンポーネントの基本的な開発モードです。

りー

次に、ダイアログ コンポーネントの作成を開始します。

ダイアログ

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

ターゲットのスタイルに応じて、次のように要約できます:

1. ダイアログ コンポーネントには、ポップアップ ウィンドウのタイトルを示す titleprops が必要です

2. ダイアログ コンポーネントは、OK ボタンが押されたときに確認イベントを発行する必要があります (つまり、親コンポーネントに確認されたことを伝えます)

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

4. ダイアログ コンポーネントはカスタム コンテンツを容易にするスロットを提供する必要があります

その場合、エンコードは次のようになります:

// 注册
Vue.component('my-component', {
 template: '<p>A custom component!</p>'
})
// 创建根实例
new Vue({
 el: '#example'
})

これでダイアログコンポーネントの開発は完了です。使用方法は以下の通りです。 このとき、v-if または v-show を使用してポップアップ ウィンドウの表示を制御すると、アニメーションが表示されないという問題を発見しました。 ！ ！ 、とても硬そうに見えます。コーチ、アニメーションを追加したいのですが、この時点でトランジションコンポーネントが機能します。トランジションコンポーネントをCSSと組み合わせて使用​​すると、効果の高いアニメーションを多数作成できます。次に、ダイアログ コンポーネントのアニメーションを強化します。コードは次のとおりです。 トランジションコンポーネントが nameprops を受け取っていることがわかりますが、アニメーションを完成させるために CSS を記述するにはどうすればよいでしょうか?非常に簡単な方法は、2 つの

key クラス (css className) スタイルを記述するだけです:

<template>
 <p class="ta-dialogwrapper">
 <p class="ta-dialog">
  <p class="ta-dialogheader">
  <span>{{ title }}</span>
  <i class="ios-close-empty" @click="handleCancel()"></i>
  </p>
  <p class="ta-dialogbody">
  <slot></slot>
  </p>
  <p class="ta-dialogfooter">
  <button @click="handleCancel()">取消</button>
  <button @click="handleOk()">确定</button>
  </p>
 </p>
 </p>
</template>
<script>
export default {
 name: 'Dialog',
 props: {
 title: {
  type: String,
  default: '标题'
 },
 },
 methods: {
 handleCancel() {
  this.$emit('cancel')
 },
 handleOk() {
  this.$emit('ok')
 },
 },
}
</script>

優れたアニメーション効果を開発するのは非常に簡単です。トランジション コンポーネントの名前は slide-down であり、作成されたアニメーションのキー className は slide-down-enter-active と slide-down-leave-active であることに注意してください。

ダイアログをカプセル化してメッセージボックスを作成します

ElementのMessageBoxの使い方は以下の通りです:

<ta-dialog 
 title="弹窗标题" 
 @ok="handleOk" 
 @cancel="handleCancel">
 <p>我是内容</p>
</ta-dialog>

このコードを見たとき、とても魔法のような、とても魔法のような、とても素晴らしいと感じました（3回連続）。よく見てください、このコンポーネントは実際にはカプセル化されたダイアログです

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

Elementの使い方はこれ.$confirm これをVueのプロトタイプにぶら下げるだけじゃないでしょうか

1. Elementはconfirm、catchはキャンセル、promiseで十分です

2. 考えを整理した後、コーディングを開始しました:

   <template>
    <transition name="slide-down">
    <p class="ta-dialogwrapper" v-if="isShow">
     // 省略
    </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>

この時点で、どうやってコールバックするのか疑問に思われるかもしれません。実際、私はカプセル化されたダイアログを作成し、そのコードに

.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);
 }
}

という 2 つのメソッドを付けました。 そう、確定時とキャンセル時にコールバックが行われるのです。コードに MessageBox を導入する Vue.extend についてもお話したいと思います

新しい MessageBox を直接使用するのではなく、新しい Ctur を使用します。これは、データ (小道具だけでなく) を定義できるためです。例:

this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
 confirmButtonText: '确定',
 cancelButtonText: '取消',
 type: 'warning'
}).then(() => {
 this.$message({
 type: 'success',
 message: '删除成功!'
 });
}).catch(() => {
 this.$message({
 type: 'info',
 message: '已取消删除'
 });   
});

現時点では、実際にはページにメッセージボックスが存在しないため、次を実行する必要があります:

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

これを直接実行すると、メッセージ ボックスが開いているときはアニメーションがありませんが、閉じているときはアニメーションがあることがわかります。解決策も非常に簡単で、

appendChild のときに非表示にし、次のようなコードを使用します:

onCancel() {
 this.visible = false
 this.callback && (this.callback.call(this, 'cancel'))
},
onConfirm() {
 this.visible = false
 this.callback && (this.callback.call(this, 'confirm'))
},

このようにアニメーションが表示されます。

まとめ

トランジションと CSS を通じて素晴らしいアニメーションを実現します。その中で、トランジションコンポーネントの名前は、[name]-enter-active と [name]-leave-active という CSS を書くための 2 つの主要なクラスを決定します

Vue.extend を通じてコン​​ポーネントの
1. コンストラクター

   を継承します (それが適切であるかわかりません。最初にこのように言ってみましょう) そして、このコンストラクターを通じて、コンポーネントの関連属性をカスタマイズできます (使用シナリオ: js がコンポーネントを呼び出します)

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

3. この時点で、簡単な Vue コンポーネントの開発がまとめられています。私が書いた関連コードは、

   https://

   github.com/mvpzx/elapse/tree/master/be/src/components
にあります。

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

推奨読書:

vue の post で null パラメーターを処理する方法


axios が post リクエストを送信する springMVC がパラメーターを受け入れられない場合の対処方法


。

以上がVue コンポーネント開発のテクニックは何ですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。