vueで2分割画面を作る方法-フロントエンドQ&A-php.cn

vueで2分割画面を作る方法

WBOY

リリース： 2023-05-08 09:34:36

オリジナル

2143 人が閲覧しました

Vue は、動的な単一ページ Web アプリケーションの構築に使用できる人気のある JavaScript フレームワークです。ビューレイヤーのコアコンポーネントである Vue.js は、メンテナンスが簡単なアプリケーションの構築に役立つと同時に、ユーザーインタラクションや複雑な UI コンポーネントをより適切に処理できるようにします。単一ページのアプリケーションでは、ビジネス機能を複数のページに分割して表示する必要があり、情報の比較や分析も必要になるため、このとき分割画面機能を使用することが非常に重要です。この記事では、Vue の公式推奨方法を使用して、Vue プロジェクトに 2 つの分割画面を実装する方法を説明します。

1. Vue-Router をビューコンポーネントと組み合わせて使用し、分割画面を実現します

まず、Vue-Router をインストールします (npm install vue-router を通じてインストールできます)。 Vue-Router は、Vue.js の公式ルーティングマネージャーです。 Vue.js のコアと深く統合されているため、単一ページのアプリケーションを簡単に構築できます。 Vue-Router を使用して分割画面を実装する手順は次のとおりです。

Vue プロジェクトの作成

コマンドラインに次のコマンドを入力して、新しい Vue を作成します。 project:

vue create my-project

ログイン後にコピー

Vue.js の公式ドキュメントに従って Vue.js がインストールされていることを前提としています。

2 つのビューコンポーネントの作成

プロジェクトで、LeftPane.vue と RightPane.vue# という 2 つの新しい Vue コンポーネントを作成します。 ##。これら 2 つのコンポーネントは分割画面ビューコンポーネントとして機能し、各コンポーネントはアプリケーションの UI と機能の一部を表示します。

サンプルコードは次のように参照できます。

LeftPane.vue:

<template>
  <div class="left-pane">
    <h3>左侧面板</h3>
    <!-- 添加具体的内容 -->
  </div>
</template>

<script>
export default {
  name: 'LeftPane'
  // 添加其他逻辑
}
</script>

<style scoped>
.left-pane {
  width: 50%;
  float: left;
}
</style>

ログイン後にコピー

RightPane.vue:

<template>
  <div class="right-pane">
    <h3>右侧面板</h3>
    <!-- 添加具体的内容 -->
  </div>
</template>

<script>
export default {
  name: 'RightPane'
  // 添加其他逻辑
}
</script>

<style scoped>
.right-pane {
  width: 50%;
  float: right;
}
</style>

ログイン後にコピー

ここのスタイルはカスタマイズできます。実際のニーズに応じて調整します。

Vue アプリケーションで、新しいフォルダー

router を作成します。このフォルダーの下にファイル index.js を作成して、ルーティング構成を定義します。サンプルコードは次のとおりです。

import Vue from 'vue'
import VueRouter from 'vue-router'

import LeftPane from '@/components/LeftPane.vue'
import RightPane from '@/components/RightPane.vue'

Vue.use(VueRouter)

const routes = [
  { path: '/left', component: LeftPane },
  { path: '/right', component: RightPane }
]

const router = new VueRouter({
  routes
})

export default router

ログイン後にコピー

ここでは、

LeftPane.vue と RightPane.vue をルーティングファイルに導入し、ルーティングルールを定義する必要があります。このように、アプリケーションのルーティングが切り替わると、Vue-Router は異なるルーティングルールに従って異なる分割画面コンポーネントを表示します。

プロジェクトの

main.js ファイルを見つけます。Vue.js をインポートした後のコードは次のようになります。次のように:

import Vue from 'vue'
import App from './App.vue'
import router from './router'

Vue.config.productionTip = false

new Vue({
  router,
  render: h => h(App),
}).$mount('#app')

ログイン後にコピー

このコードでは、

App コンポーネントを Vue ルートインスタンスとして設定し、パラメータとして router をコンポーネントに渡します。これにより、アプリケーションでルーティング機能を使用できるようになります。

最後のステップは、アプリケーションにある

App.vue にルートビューをマウントすることです。分割を実装します。画面機能。コード例は次のとおりです。

<template>
  <div id="app">
    <router-view></router-view>
  </div>
</template>

<script>
export default {
  name: 'App',
  // 添加其他逻辑
}
</script>

ログイン後にコピー

ここの

router-view には、設定に応じて LeftPane.vue または RightPane.vue が表示されます。ルーティングルールとユーザーのクリック。

2. Vue-Router を名前付きビューと組み合わせて使用して分割画面を実装する

上で紹介した方法に加えて、Vue-Router は分割画面を実装するための名前付きビューの使用もサポートしています機能性。この方法を使用すると、同じルーティングルールの下で複数のビューコンポーネントを同時に表示して、分割画面効果を実現できます。名前付きビューを使用して分割画面を実装する手順は次のとおりです。

App.vue で、2 つの名前付きビューを作成します。、それぞれ left と right。サンプルコードは次のとおりです。

<template>
  <div id="app">
    <router-view name="left"></router-view>
    <router-view name="right"></router-view>
  </div>
</template>

<script>
export default {
  name: 'App'
  // 添加其他逻辑
}
</script>

ログイン後にコピー

ここの

router-view コンポーネントは、それぞれ left と right という名前が付けられ、次のようにロードされます。メインページで同時にアプリケーションを実行します。

ルーティング構成ファイルで、2 つのコンポーネントが同じルールの下で同時に表示されるようにルーティングルールを変更します。サンプルコードは次のとおりです。

import Vue from 'vue'
import VueRouter from 'vue-router'

import LeftPane from '@/components/LeftPane.vue'
import RightPane from '@/components/RightPane.vue'

Vue.use(VueRouter)

const routes = [
  {
    path: '/',
    components: {
      left: LeftPane,
      right: RightPane
    }
  }
]

const router = new VueRouter({
  routes
})

export default router

ログイン後にコピー

ここでは、ルーティングルールが

path: '/'、components: に変更されています。また、このルールでは、LeftPane.vue コンポーネントと RightPane.vue コンポーネントの名前は、それぞれ left と right になります。このようにして、ユーザーがアプリケーションのルートパスにアクセスすると、両方のコンポーネントがアプリケーションのメインページに表示されます。

まとめ

以上は Vue で画面分割機能を適用する方法です。分割画面効果は、Vue-Router をビューコンポーネントまたは名前付きビューと組み合わせて使用することで実現できます。実際のニーズに応じてプロジェクトに分割画面機能を実装するためのさまざまな方法を選択すると、アプリケーションのユーザーエクスペリエンスと使いやすさが向上します。

以上がvueで2分割画面を作る方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。