開発をスピードアップできる VueUse ライブラリ 5 つ (まとめ)

npm i @vueuse/core # yarn を @vueuse/core に追加します

<script src="https://unpkg.com/@vueuse/shared"></script>
<script src="https://unpkg.com/@vueuse/core"></script>

// VueUse からのインポート例 import { useRefHistory } from '@vueuse/core'

<テンプレート>
  <p> 
    <button> 元に戻す </button>
    <button> やり直す </button>
  </p>
  <テキストエリア v-model="テキスト"/>
</テンプレート>

<スクリプトの設定>
'vue' から { ref } をインポートします
定数テキスト = ref('')
</スクリプト>

<スタイルスコープ>
  ボタン {
    境界線: なし;
    アウトライン: なし;
    右マージン: 10px;
    背景色: #2ecc71;
    色: 白;
    パディング: 5px 10px;;
  }
</スタイル>

'vue' から { ref } をインポートします
'@vueuse/core' から { useRefHistory } をインポートします。

定数テキスト = ref('')
const { 履歴、元に戻す、やり直し } = useRefHistory(テキスト)

<テンプレート>
  <p> 
    <button @click="undo"> 元に戻す </button>
    <button @click="redo"> やり直す </button>
  </p>
  <テキストエリア v-model="テキスト"/>
  <ul>
    <li v-for="履歴内のエントリ" :key="entry.timestamp">
      {{エントリ}}
    </li>
  </ul>
</テンプレート>

<スクリプトの設定>
'vue' から { ref } をインポートします
'@vueuse/core' から { useRefHistory } をインポートします。
定数テキスト = ref('')
const { 履歴、元に戻す、やり直し } = useRefHistory(テキスト)
</スクリプト>

<スタイルスコープ>
  ボタン {
    境界線: なし;
    アウトライン: なし;
    右マージン: 10px;
    背景色: #2ecc71;
    色: 白;
    パディング: 5px 10px;;
  }
</スタイル>

const { 履歴、元に戻す、やり直し } = useRefHistory(text、{
  深い：本当、
  定員: 10,
})

<テンプレート>
  <button @click="open = true"> ポップアップを開く </button>
  <div class="popup" v-if='open'>
    <div class="popup-content" ref="popup">
      私は非常に堕落した人間です、そして非常に堕落しています！ 私は非常に堕落しています、そして非常に堕落しています！
    </div>
  </div>
</テンプレート>
 
 
<スクリプトの設定>
'vue' から { ref } をインポートします
'@vueuse/core' から { onClickOutside } をインポートします。
const open = ref(false) // ポップアップの状態
const popup = ref() // テンプレート参照
// ポップアップが存在する場合、ポップアップ以外のものをクリックするたびに
onClickOutside(ポップアップ、() => {
  open.value = false
})
</スクリプト>
 
 
<スタイルスコープ>
  ボタン {
    境界線: なし;
    アウトライン: なし;
    右マージン: 10px;
    背景色: #2ecc71;
    色: 白;
    パディング: 5px 10px;;
  }
  。ポップアップ {
    位置: 固定;
    上: ;
    左： ;
    幅：100vw;
    高さ：100vh;
    ディスプレイ: フレックス;
    アイテムの位置を中央揃えにします。
    コンテンツの中央揃え: 中央;
    背景: rgba(, , , 0.1);
  }
  .ポップアップコンテンツ{
    最小幅: 300px;
    パディング: 20px;
    幅: 30%;
    背景: #fff;
  }
</スタイル>

<テンプレート>
    <div>
        <入力 
            タイプ="テキスト" 
            :value="データ"
            @input="更新"
        />
    </div>
</テンプレート>
 
 
<スクリプト>
'@vueuse/core' から {useVModel} をインポートします。
エクスポートデフォルト{
  プロパティ: ['データ'],
  セットアップ(props, { 出力 }) {
    const data = useVModel(props, 'data', 出力)
    console.log(data.value) // props.data と等しい
    data.value = 'name' // 等しい: emitting('update:data', 'name')
    const update = (イベント) => {
        データ値 = イベントターゲット値
    }
    戻る {
        データ、
        アップデート
    }
  },
}
</スクリプト>

<テンプレート>
  <div>
    <p> {{データ}} </p>
    <カスタム入力 
      :data="データ" 
      @update:data="データ = $イベント"
    />
  </div>
</テンプレート>
 
 
<スクリプト>
'./components/CustomInput.vue' から CustomInput をインポートします。
'vue' から { ref } をインポートします
エクスポートデフォルト{
  コンポーネント:
    カスタム入力、
  },
  設定 （） {
    定数データ = ref('hello')
    戻る {
      データ
    }
  }
}

<テンプレート>
  <p> ターゲットは表示されていますか? {{ targetIsVisible }} </p>
  <div class="コンテナ">
    <div class="target" ref="target">
      <h1>こんにちは世界</h1>
    </div>
  </div>
</テンプレート>
 
 
<スクリプト>
'vue' から { ref } をインポートします
'@vueuse/core' から { useInterpObserver } をインポートします。
エクスポートデフォルト{
  設定（） {
    定数ターゲット = ref(null)
    定数 targetIsVisible = ref(false)
    const {stop} = useInterpObserver(
      ターゲット、
      ([{ isIntersecting }], オブザーバー要素) => {
        targetIsVisible.value = 交差している
      },
    ）
    戻る {
      ターゲット、
      ターゲットが可視、
    }
  },
}
</スクリプト>
 
 
<スタイルスコープ>
。容器 {
  幅: 80%;
  マージン: 自動;
  背景色: #fafafa;
  最大高さ: 300px;
  オーバーフロー: スクロール;
}
.ターゲット{
  上マージン: 500px;
  背景色: #1abc9c;
  色: 白;
  パディング: 20px;
}
</スタイル>

//useInterpObserver オプション const { stop } = useInterpObserver(
      ターゲット、
([{ isIntersecting }], オブザーバー要素) => {
        targetIsVisible.value = 交差している
      },
      {
// ルート、ルートマージン、しきい値、ウィンドウ
// ソース内の完全なオプション: https://github.com/vueuse/vueuse/blob/main/packages/core/useInterpObserver/index.ts
        閾値: 0.5、
      }
）

//InterpObserverを停止する
const {stop} = useInterpObserver(
      ターゲット、
      ([{ isIntersecting }], オブザーバー要素) => {
        targetIsVisible.value = 交差している
        if (交差している) {
          停止（）
        }
      },
    ）

// 変換コードを使用する <スクリプト設定>
'vue' から { ref } をインポートします
'@vueuse/core' から { useTransition, TransitionPresets } をインポートします。
 
 
定数ソース = ref(0)
 
 
const出力 = useTransition(ソース、{
  期間: 3000、
  トランジション: TransitionPresets.easeOutExpo、
})
 
 
ソース値 = 5000
</スクリプト>

<テンプレート>
  <h2> 
    <p> 参加する </p>
    <p> {{ Math.round(出力) }}+ </p>
    <p>開発者</p>
  </h2>
</テンプレート>
 
 
<スクリプトの設定>
'vue' から { ref } をインポートします
'@vueuse/core' から { useTransition, TransitionPresets } をインポートします。
定数ソース = ref()
const出力 = useTransition(ソース、{
  期間: 3000、
  トランジション: TransitionPresets.easeOutExpo、
})
ソース値 = 5000
</スクリプト>

<テンプレート>
<h2 :style="{ color: color } "> 色の変更 </h2>
</テンプレート>
<スクリプトの設定>
'vue' から { ref, computed } をインポートします
'@vueuse/core' から { useTransition, TransitionPresets } をインポートします。
const ソース = ref([, , ])
const出力 = useTransition(ソース、{
期間: 3000、
トランジション: TransitionPresets.easeOutExpo、
})
定数色 = 計算された(() => {
const [r, g, b] = 出力値
`rgb(${r}, ${g}, ${b})` を返します
})
ソース値 = [255, , 255]
</スクリプト>