Vue 実践における実用的な小さな魔法のまとめ

const ルーター = 新しい VueRouter({
  ルート:[
    {
      パス： '/'、
      名前: 'ホーム'、
      コンポーネント: ホーム
    },
    {
      パス: '/about',
      名前: 'About'、
      コンポーネント: について
    }
  ]
})

const ルーター = 新しい VueRouter({
  ルート:[
    {
      パス： '/'、
      名前: 'ホーム'、
      コンポーネント: () => import(/* webpackChunkName: "home" */ '../views/Home.vue')
    },
    {
      パス: '/about',
      名前: 'About'、
      コンポーネント: () => import(/* webpackChunkName: "about" */ '../views/About.vue')
    }
  ]
})

エクスポートデフォルト{
  データ:()=>({
    list:Object.freeze([{title:'変更する必要はありません。応答性は必要ありません'}])
  })
}

エクスポートデフォルト{
  コンポーネント:{
    AsyncComponent:()=>import(/* webpackChunkName: "AsyncComponent" */ './Async')
  }
}

エクスポートデフォルト{
  コンポーネント:{
    非同期コンポーネント:()=>({
      コンポーネント:import(/* webpackChunkName: "AsyncComponent" */ './Async'),
      delay:200, // 遅延（ミリ秒単位）、デフォルトは 200
      timeout:3000, // 数ミリの読み込み後にタイムアウトし、エラー コンポーネントが発生します loading:LoadingComponent, // コンポーネントが読み込まれる前にエラーを表示します back:ErrorComponent // コンポーネントがタイムアウトしたときに表示します })
  }
}

エクスポートデフォルト{
   haha({$attrs、$route、$store、$listeners、$ref}){
     // 自分で印刷できる多くの属性を構築することもできます。 
   }
}

    <h3 v-if="status" v-for="item in 100" :key="item">{{item}}</h3>

    <テンプレート v-if="ステータス">
        <h3 v-for="100 個のアイテム" :key="item">{{item}}</h3>
    </テンプレート>

 // 親コンポーネントテンプレート>
  <div>
    <Toggle :show.sync = 'show'></Toggle>
  </div>
</テンプレート>

//コンポーネントを切り替える <template>
  <div>
    <div v-if="表示">
    コンポーネントの表示と非表示</div>
  <button @click="test">コンポーネントを非表示</button>
  </div>
</テンプレート>
<スクリプト>

エクスポートデフォルト{
  プロパティ:['表示'],
  メソッド: {
    テスト（）{
      this.$emit('update:show',false)
    }
  }
}
</スクリプト>

<el-テーブル 
   v-bind="$attrs"
   v-on="$リスナー">
   <template v-for="列内の項目">
    <el-table-column v-bind="item" />
   </テンプレート>
</el-table>
<スクリプト>
エクスポートデフォルト{
  小道具:{
      カラム：{
        タイプ:配列、
        必須:true
      }
   }
}
<スクリプト>

   //怠け者
   <input v-model.lazy="メッセージ" />
   //番号
   <input v-model.number="msg" />
   //トリム
   <input v-model.trim="msg" />

// 親コンポーネント <テンプレート>
  <div>
    <CustomInput v-model='msg' />
  </div>
</テンプレート>

//カスタム入力

<テンプレート>
  <div>
    <input type="text" :value="値" @input="テスト">
  </div>
</テンプレート>
<スクリプト>
エクスポートデフォルト{
  プロパティ:['値'],
  メソッド: {
    テスト(e){
      this.$emit('input',e.target.value)
    }
  },
}
</スクリプト>

// 親コンポーネントを変更する必要はありません...
//カスタム入力
<テンプレート>
  <div>
    <input type="checkbox" :checked="チェック済み" @change="テスト">
  </div>
</テンプレート>
<スクリプト>
 プロパティ:['チェック済み'],
 モデル：{
    プロパティ: 'チェック済み'、
    イベント:'変更'
  },
  メソッド: {
    テスト(e){
      this.$emit('change',e.target.checked)
    }
  }
}
</スクリプト>

const ルーター = 新しい VueRouter({
  ルート:[...]、
  scrollBehavior(to,from,position){
      // 位置パラメータは単独で印刷できます。ブラウザの左矢印と右矢印をクリックすると、return{がトリガーされます。
          // ここでは多くのパラメータを返すことができます。いくつかを以下にリストします。詳細については公式ウェブサイトを確認してください x:100,
          y:100,
          セレクター:#app,
          オフセット:200,
          //等}
  }
})

<テンプレート>
    <div>
        <子 @click="テスト"></子>
    </div>
</テンプレート>
<スクリプト>
    方法:{
        テスト（）{}
    }
</スクリプト>

<テンプレート>
    <div>
        <子 @click.native="test"></子>
    </div>
</テンプレート>
<スクリプト>
    方法:{
        テスト（）{}
    }
</スクリプト>

<キープアライブ>
    <ルータービュー></ルータービュー>
</キープアライブ>