Vue のスロットとフィルターの詳細な説明

// スロット.vue

<テンプレート>
  <div>
    <div>
      <!-- 配信内容はこのスロットタグの位置に運ばれます -->
      <スロット></スロット>
    </div>
    <p>アカウント: <input /></p>
    <p>パスワード: <input type="password" /></p>
    <button>ログイン</button>
  </div>
</テンプレート>

<スクリプト>
デフォルトをエクスポートします {};
</スクリプト>

<スタイル>
</スタイル>

// スロットテスト.vue

<テンプレート>
  <div>
    <スロットコム>
        <h2>私はスロットに配信されるコンテンツです</h2>
    </スロットCom>
  </div>
</テンプレート>

<スクリプト>
// インポート import slotCom from "../views/slot";

エクスポートデフォルト{
  コンポーネント:
    スロットコム
  },
}
</スクリプト>

<スタイル>
</スタイル>

<ナビゲーションリンク url="/プロフィール">
  {{ user.name }} としてログインしました
</ナビゲーションリンク>

<ナビゲーションリンク url="/プロフィール">
  ここをクリックすると、{{ url }} に移動します。

  /* ここでの `url` は、その内容が <navigation-link> コンポーネント *内で* 定義されるのではなく、<navigation-link> に _渡される_ ため、未定義になります。
  */
</ナビゲーションリンク>

// ボタンコンポーネント、フォールバックコンテンツをテキスト送信に設定する
<ボタンタイプ="送信">
  <slot>送信</slot>
</ボタン>

// 親コンポーネントで <submit-button> を使用し、スロット コンテンツを提供しない場合:
<送信ボタン></送信ボタン>

// フォールバック コンテンツ「Submit」がレンダリングされます。
<ボタンタイプ="送信">
  提出する
</ボタン>

// ただし、コンテンツを提供する場合は:
<送信ボタン>
  保存
</送信ボタン>

// フォールバック コンテンツの代わりに提供されたコンテンツがレンダリングされます。
<ボタンタイプ="送信">
  保存
</ボタン>

// ログインコンポーネント.vue

<テンプレート>
    <div>
        <div>
            <slot>バックアップコンテンツ</slot>
        </div>
        <p>
            アカウント: <slot name="user"></slot>
        </p>
        <p>
            パスワード: <slot name="psd"></slot>
        </p>

        <button>ログイン</button>
        <スロット></スロット>
    </div>
</テンプレート>

// <login-component> を使用する
        <h2>私はスロットに配信されるコンテンツです</h2>

        <テンプレート v-slot:user>    
            <!-- ここのすべてのコンテンツは name="user" スロットに挿入されます -->
            <div>
                123
            </div>
        </テンプレート>


        <input slot="psd" type="password" placeholder="この要素は name=psd スロットに挿入されます">
        <コンポーネント-a スロット="psd"></コンポーネント-a> 

</ログインコンポーネント>

<ログインコンポーネント>
            <h2>私はスロットに配信されるコンテンツです</h2>

            <テンプレート #ユーザー>    
                ここにあるすべてのコンテンツは、name="user" スロット <div> に挿入されます。
                    123
                </div>
            </テンプレート>


            <テンプレート #psd>    
               <input type="password" placeholder="この要素は name=psd スロットに挿入されます">
            </テンプレート>
</ログインコンポーネント>

<div id="アプリ">
    {{str | capitalize}} // こんにちは
</div>

// 単語の最初の文字を大文字にする Vue.filter('capitalize', function (value) {
  if (!value) が '' を返す
  値 = value.toString()
  戻り値.charAt(0).toUpperCase() + value.slice(1)
})

新しいVue({
    el: '#app',
    データ： {
        文字列: 'こんにちは'
    }
})

<div id="アプリ">
    <div v-for="(f,i) 友達の中に" :key="i">
        <h3>名前: {{f.name}} </h2>
        <p>年齢: {{f.age}}</p>
        <p>性別: {{f.sex|getSex}}</p>
    </div>
</div>

<スクリプト>
    新しいVue({
        el: '#app',
        データ： {
            友達： [{
                    名前: 'マックス',
                    性別: 0,
                    年齢: 19
                },
                {
                    名前: 'ジャック',
                    性別: 1,
                    年齢: 22
                },
                {
                    名前: 'Jacose'、
                    性別: 1,
                    年齢: 19
                },
                {
                    名前: 'ティム',
                    性別: 1,
                    年齢: 18
                },
                {
                    名前: 'ジミー'、
                    性別: 0,
                    年齢: 20
                },
                {
                    名前: 'トム'、
                    性別: 0,
                    年齢: 19
                },
            ]
        },
        フィルター:
            getSex(タイプ) {
                （タイプ === 0）の場合{
                    '男性'を返す
                }
                '女性'を返す
            }
        }
    })
</スクリプト>

<div>{{'hello' | substr(3,4)}}</div>
<スクリプト>
{
    フィルター:
       substr(str,start,end) {
           str.substr(start,end) を返す
       } 
    }
}
</スクリプト>

// 例 <p>{1599639292100 | getTemplateTimeByDate('YYYY-MM-dd hh:mm:ss')}</p> -> 2020-09-09 15:04:56

<p>{1599639292100 | getTemplateTimeByDate('YYYY-Md h:m:s')}</p> -> 2020-9-9 15:4:6
<p>{1599639292100 | getTemplateTimeByDate('YYYY 年 M 月 d 日 hh:mm')}</p> -> 2020 年 9 月 9 日 15:04

新しいVue({
    el: '#app',
    データ： {
        日付: 新しい Date().getTime()
    },
    フィルター:
        getTemplateTimeByDate(日付、テンプレート) {
            date = 新しい日付(date)

            TimeObj = {
                'Y+': date.getFullYear(),
                '(M+)': date.getMonth() + 1,
                '(d+)': date.getDate(),
                '(h+)': date.getHours(),
                '(m+)': date.getMinutes(),
                '(s+)': date.getSeconds()
            }

            for (キー in TimeObj) {
                reg = 新しい RegExp(キー) とします。

                if (reg.test(テンプレート)) {
                    console.log(正規表現$1)
                    time = TimeObj[キー]とする
                    // 現在のテンプレートの時刻が 2 桁か 1 桁かを判断します // 2 桁の時刻の場合は、先頭にゼロを追加します (1 -> 01) 
                    // 数字の場合はゼロを追加する必要はありません if (RegExp.$1.length > 1) {

                        時間 = 時間 >= 10 ? 時間 : '0' + 時間
                    }
                    テンプレート = template.replace(reg, 時間)
                }
            }
            返品テンプレート
        }
    }
})
</スクリプト>