Vue で Youdao 辞書のようなページ デザインを実装するにはどうすればよいですか?

Vue は、最新の高パフォーマンス Web アプリケーションを構築するための非常に人気のある JavaScript フレームワークです。 Vue では、コンポーネントベースの開発を使用してページを構築すると、さまざまな複雑な UI デザインを実装するのが非常に便利になります。この記事では、Vue を使用して Youdao Dictionary のようなページ デザインを実装する方法を紹介します。

1. ページデザイン

Vue の実装を始める前に、Youdao Dictionary を模倣したページデザインを見てみましょう。このデザインは、上部ナビゲーション バー、検索ボックス、検索結果リストの 3 つの主要な部分に分かれています。

トップ ナビゲーション バー: ロゴと 2 つのナビゲーション リンクで構成されており、ロゴをクリックするとホームページに戻ることができます。ナビゲーション リンクには通常、「ホーム」と「翻訳」が含まれます。

検索ボックス: 入力ボックスと検索ボタンが含まれます。ユーザーは、入力ボックスにクエリしたい単語または語句を入力し、検索ボタンをクリックしてクエリを実行できます。

検索結果リスト: クエリ結果はリスト形式で表示され、各クエリ結果には単語またはフレーズの定義と例文が含まれます。

2. コンポーネントの分割

ページのデザインに応じて、ページ全体はナビゲーション バー コンポーネント、検索ボックス コンポーネント、検索結果コンポーネントの 3 つのコンポーネントに分割できます。

ナビゲーション バー コンポーネント: 主に、上部のナビゲーション バーのスタイルとロジックを担当します。

検索ボックス コンポーネント: 主に検索ボックスのスタイルとロジックを担当します。

検索結果コンポーネント: 主にクエリ結果のスタイルとロジックの表示を担当します。

3. コンポーネントの実装

1. ナビゲーション バー コンポーネント

まず、ナビゲーション バー コンポーネントを Vue の App.vue に導入する必要があります。

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

<script>
import NavBar from './components/NavBar.vue'

export default {
  name: 'App',
  components: {
    NavBar
  }
}
</script>

<style>
/* 全局样式 */
</style>

次に、NavBar.vue コンポーネントを作成し、ナビゲーション バーのスタイルとロジックを定義します。

<template>
  <div id="nav-bar">
    <div class="nav-left">
      <img src="./assets/logo.png" alt="logo" @click="backToHome">
      <div class="nav-link" @click="$router.push('/')">首页</div>
      <div class="nav-link" @click="$router.push('/translate')">翻译</div>
    </div>
    <div class="nav-right">
      <!-- 登录按钮等右侧组件 -->
    </div>
  </div>
</template>

<script>
export default {
  name: 'NavBar',
  methods: {
    backToHome() {
      this.$router.push('/')
    }
  }
}
</script>

<style>
/* 导航栏样式 */
</style>

2. 検索ボックス コンポーネント

検索ボックス コンポーネントには、入力ボックスと検索ボタンが含まれています。ユーザーは、クエリする単語または語句を入力ボックスに入力し、検索ボタンをクリックしてお問い合わせください。ナビゲーション バー コンポーネントと同様に、まず App.vue に検索ボックス コンポーネントを導入します。

<template>
  <div id="app">
    <nav-bar></nav-bar>
    <search-box></search-box>
    <router-view></router-view>
  </div>
</template>

<script>
import NavBar from './components/NavBar.vue'
import SearchBox from './components/SearchBox.vue'

export default {
  name: 'App',
  components: {
    NavBar,
    SearchBox
  }
}
</script>

<style>
/* 全局样式 */
</style>

次に、SearchBox.vue コンポーネントを作成し、検索ボックスのスタイルとロジックを定義します。

<template>
  <div id="search-box">
    <input type="text" class="search-input" v-model="searchWord">
    <button class="search-btn" @click="search">搜索</button>
  </div>
</template>

<script>
export default {
  name: 'SearchBox',
  data() {
    return {
      searchWord: ''
    }
  },
  methods: {
    search() {
      // 跳转到搜索结果页面，将searchWord作为查询参数
      this.$router.push({path: '/search', query: {word: this.searchWord}})
    }
  }
}
</script>

<style>
/* 搜索框样式 */
</style>

3. 検索結果コンポーネント

検索結果コンポーネントは、主にクエリ結果のスタイルとロジックを表示する役割を果たします。まず、App.vue に検索結果コンポーネントを導入します。

<template>
  <div id="app">
    <nav-bar></nav-bar>
    <search-box></search-box>
    <search-result v-if="$route.path === '/search'"></search-result>
    <router-view></router-view>
  </div>
</template>

<script>
import NavBar from './components/NavBar.vue'
import SearchBox from './components/SearchBox.vue'
import SearchResult from './components/SearchResult.vue'

export default {
  name: 'App',
  components: {
    NavBar,
    SearchBox,
    SearchResult
  }
}
</script>

<style>
/* 全局样式 */
</style>

次に、SearchResult.vue コンポーネントを作成し、検索結果のスタイルとロジックを定義します。作成したサイクルフック内のクエリパラメータwordを取得し、外部APIを呼び出してクエリ結果を取得します。

<template>
  <div id="search-result">
    <div v-if="resultLoading" class="result-loading">正在查询...</div>
    <ul v-else class="result-list">
      <li v-for="(item, index) in resultList" :key="index">
        <h3 class="result-word">{{item.word}}</h3>
        <p class="result-translation">{{item.translation}}</p>
        <p class="result-example">{{item.example}}</p>
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  name: 'SearchResult',
  data() {
    return {
      resultLoading: true,
      resultList: []
    }
  },
  created() {
    const query = this.$route.query
    if (query.word) {
      // 调用API查询结果
      this.resultLoading = false
      this.resultList = [...]
    }
  }
}
</script>

<style>
/* 搜索结果样式 */
</style>

ここではコンポーネントの実装方法を簡単に紹介しますが、実際の開発ではニーズに応じて調整や改善が必要です。

4. 概要

Vue のコンポーネントベースの開発方法は非常に柔軟で、さまざまな複雑な UI デザインを簡単に実装できます。この記事では、Vue を使用して Youdao Dictionary のページ デザインを真似て高品質な検索アプリケーションを実装する方法を紹介します。上記の 3 つのコンポーネントに加えて、履歴記録や単語帳などの機能を追加して、ユーザー エクスペリエンスを向上させることもできます。この記事が Vue を初めて使用する読者に役立つことを願っています。

以上がVue で Youdao 辞書のようなページ デザインを実装するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。