Qiita Teams that are logged in
You are not logged in to any team

Log in to Qiita Team
Community
OrganizationAdvent CalendarQiitadon (β)
Service
Qiita JobsQiita ZineQiita Blog
2
Help us understand the problem. What is going on with this article?
@bolobob

Vue.js使いだして2年くらい経ったけど、使ったことないAPIを使ってみる「グローバル設定」(2/2)

More than 1 year has passed since last update.

Vue.js使いだして2年くらい経ったけど、使ったことないAPIを使ってみる「グローバル設定」(1/2)の続き

ignoredElements

<template>
  <div id="app">
    <x-tabs>
      <x-tab>タブ1</x-tab>
    </x-tabs>
  </div>
</template>

上記のようにWeb ComponentsCustom Elements を使って独自の要素を定義した場合、

スクリーンショット 2018-12-03 23.28.52.png

このような警告が出力される。
そこで、

Vue.config.ignoredElements = [
  'x-tabs',
  'x-tab'
];

と設定すると警告が出力されなくなる。
これでWeb Componentsも安心して使える。

keyCodes

キー修飾子なるものがあり、特定のキーコードだけに反応するキーボードーイベントが簡単に実装できる仕組みがある。
entertabなど代表的なものはすでにエイリアスが用意されてるが、ほとんどキーコードに対しては用意されてない。
そこでkeyCodesを使うことでエイリアスを設定できるようだ。

Vue.config.keyCodes = {
  v: 86,
  f1: 112,
  // キャメルケースは動作しません
  mediaPlayPause: 179,
  // 代わりに、二重引用符でケバブケースを使用することができます
  "media-play-pause": 179,
  up: [38, 87]
}

といった設定をすると

<input type="text" @keyup.v="submit">
<input type="text" @keyup.f1="submit">
<input type="text" @keyup.media-play-pause="submit">
<input type="text" @keyup.up="submit">

といった書き方ができるようになる。

performance

Vue.config.performance = true;

にして、devtoolPerformanceパネルを未設定のときと見比べたけど、何が違うのかよくわからなかった。

productionTip

プロダクションのヒント

スクリーンショット 2018-12-05 22.54.05.png

これが

Vue.config.productionTip = false;

にすると表示されなくなる。

2
Help us understand the problem. What is going on with this article?
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
bolobob
sencorp
幼稚園・保育園向けインターネット写真サービス「はいチーズ!」を提供しています。

Comments

No comments
Sign up for free and join this conversation.
Sign Up
If you already have a Qiita account Login
2
Help us understand the problem. What is going on with this article?