Vue を使用して特殊効果マスターを模倣したページデザインを実装するにはどうすればよいですか?-Vue.js-php.cn

現在のモバイルインターネット時代では、Web サイトやモバイルアプリケーションにとってページ効果のデザインがますます重要になっています。顧客エクスペリエンスと人気を向上させるには、Faux Effects Master などのツールを使用して、高品質の効果を備えたページをデザインする必要があります。ただし、Vue フレームワークを使用して特殊効果マスターのデザインを実装すると、2 つの大きな利点が得られます。まず、Vue フレームワークのコンポーネントプログラミングモデルを使用して、再利用可能なコンポーネントライブラリを設計し、設計機能を強化できます。次に、Vue フレームワークには強力な一方向データバインディングと応答性の高いデータ原則があり、DOM 要素をより速く更新し、ユーザーエクスペリエンスを向上させることができます。

以下、Vueを使って特撮マスターを模したページデザインを実装する方法を詳しく紹介します。

1. 準備

始める前に、最新バージョンの Vue.js がインストールされていることを確認してください。公式 Web サイトから Vue.js をダウンロードし、CDN を使用して Vue.js を含めることができます。ここでは Vue.js 2.6.12 を使用します。

ステップ 1: Vue CLI を使用して新しいプロジェクトを作成する

vue create vue-effect-design
cd vue-effect-design

ログイン後にコピー

ステップ 2: 必要な依存ライブラリをインストールする

npm install axios vue-router vuex

ログイン後にコピー

これで、Vue を使用する準備が整いました。次に、Vue を使用して特撮マスターを模倣したページデザインを実装する方法をステップごとに紹介します。

2. 基本ページの作成

ページの作成を開始する前に、適切なエディターがインストールされていることを確認してください。 Visual Studio Code または Brackets を使用することをお勧めします。

ステップ 1: App.vue という名前のファイルを作成し、そのファイルに次のコードを追加します。

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

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

<style>
 #app {
   min-height: 100vh;
   display: flex;
   justify-content: center;
   align-items: center;
   font-size: 2rem;
   background-color: #f7f8fc;
   color: #333;
   font-weight: bold;
   font-family: Arial, Helvetica, sans-serif;
 }
</style>

ログイン後にコピー

上記のコードでは、ルータービューを使用する Vue コンポーネントを作成すると、Vue はコンポーネントのルータービューを読み取り、ルータービューに基づいてコンポーネントをレンダリングします。

ステップ 2: Home.vue という名前のファイルを作成し、そのファイルに次のコードを追加します。

<template>
  <div>
    <header/>
    <main>
      <card>
        <img :src="imageUrl" :alt="imageAlt">
        <h2>{{ title }}</h2>
        <p>{{ message }}</p>
      </card>
    </main>
    <footer/>
  </div>
</template>

<script>
 import Header from '@/components/Header.vue'
 import Footer from '@/components/Footer.vue'
 import Card from '@/components/Card.vue'

 export default {
   name: 'Home',
   components: {
     Header,
     Footer,
     Card
   },
   data () {
     return {
       title: 'Hello World',
       message: 'Welcome to Vue.js!',
       imageUrl: 'https://picsum.photos/400/300',
       imageAlt: 'Random image from Picsum'
     }
   }
 }
</script>

ログイン後にコピー

上記のコードでは、 3 つのコンポーネント Header、Footer、Card を使用し、img には v-bind を使用します。 タグはデータです。バウンド。これで、開発サーバーを起動し、ページが適切に実行されていることを確認できます:

npm run serve

ログイン後にコピー

3. 再利用可能なコンポーネントライブラリを作成します

次に、再利用可能なコンポーネントライブラリを作成します。ページをより速く作成できるようになります。

ステップ 1: Header.vue という名前のファイルを作成し、そのファイルに次のコードを追加します。

<template>
  <header>
    <h1>{{ siteTitle }}</h1>
  </header>
</template>

<script>
 export default {
   name: 'Header',
   data () {
     return {
       siteTitle: '仿特效大师'
     }
   }
 }
</script>

<style scoped>
 header {
   background-color: #fff;
   margin-bottom: 2rem;
   text-align: center;
   border-bottom: 1px solid #ccc;
 }

 h1 {
   margin: 0;
   font-weight: bold;
   font-size: 2.6rem;
   font-family: Arial, Helvetica, sans-serif;
 }
</style>

ログイン後にコピー

上記のコードでは、タイトルとテキストラベルを含む Header という名前のコンポーネントを作成しました。

ステップ 2: Footer.vue という名前のファイルを作成し、そのファイルに次のコードを追加します。

<template>
  <footer>
    <slot/>
  </footer>
</template>

<script>
 export default {
   name: 'Footer'
 }
</script>

<style scoped>
 footer {
   background-color: #fff;
   margin-top: 2rem;
   text-align: center;
   border-top: 1px solid #ccc;
   padding: 2rem;
 }
</style>

ログイン後にコピー

上記のコードでは、 Footer というコンポーネントを作成し、スロットを使用してコンテンツを配置します。

ステップ 3: Card.vue という名前のファイルを作成し、そのファイルに次のコードを追加します。

<template>
  <div class="card">
    <slot/>
  </div>
</template>

<script>
 export default {
   name: 'Card'
 }
</script>

<style scoped>
 .card {
   background-color: #fff;
   padding: 2rem;
   box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
   border-radius: 6px;
   margin-bottom: 2rem;
 }

 img {
   max-width: 100%;
 }
</style>

ログイン後にコピー

上記のコードでは、 Card (カード) という名前のコンポーネントを作成します。これにはスロットが含まれており、CSS スタイルでそれを美しくします。

4. Axios と API の使用

Axios ライブラリを使用して、外部 API からデータを取得します。 Axios は、Web クライアントから HTTP リクエストを行うためのライブラリで、Promise オブジェクトを返すため、外部 API から比較的簡単にデータを取得できます。

ステップ 1: 上記のステップに基づいて、Home コンポーネントの data 属性を置き換えて、外部 API からデータを取得できるようにします。コードは次のとおりです。

<template>
  <div>
    <header/>
    <main>
      <div v-if="isLoading" class="loading"></div>
      <card>
        <img :src="imageUrl" :alt="imageAlt">
        <h2>{{ title }}</h2>
        <p>{{ message }}</p>
      </card>
    </main>
    <footer/>
  </div>
</template>

<script>
 import axios from 'axios'
 import Header from '@/components/Header.vue'
 import Footer from '@/components/Footer.vue'
 import Card from '@/components/Card.vue'

 export default {
   name: 'Home',
   components: {
     Header,
     Footer,
     Card
   },
   data () {
     return {
       title: '',
       message: '',
       imageUrl: '',
       imageAlt: '',
       isLoading: false
     }
   },
   created () {
     this.fetchData()
   },
   methods: {
     fetchData () {
       this.isLoading = true
       axios.get('https://jsonplaceholder.typicode.com/posts/1')
         .then(response => {
           this.isLoading = false
           this.title = response.data.title
           this.message = response.data.body
           this.imageUrl = `https://picsum.photos/400/300?random=${response.data.id}`
           this.imageAlt = response.data.title
         })
         .catch(error => {
           console.log(error)
           this.isLoading = false
         })
     }
   }
 }
</script>

<style scoped>
 header {
   background-color: #fff;
   margin-bottom: 2rem;
   text-align: center;
   border-bottom: 1px solid #ccc;
 }

 h1 {
   margin: 0;
   font-weight: bold;
   font-size: 2.6rem;
   font-family: Arial, Helvetica, sans-serif;
 }

 .loading {
   border: 16px solid #f3f3f3;
   border-top: 16px solid #3498db;
   border-radius: 50%;
   width: 120px;
   height: 120px;
   animation: spin 2s linear infinite;
   margin: 2rem auto 0;
 }

 @keyframes spin {
   0% { transform: rotate(0deg); }
   100% { transform: rotate(360deg); }
 }
</style>

ログイン後にコピー

上記のコードでは、次の変更を加えました。

data## で使用されなかったデフォルトの属性を削除しました。＃属性。
fetchData という名前の新しいメソッドを作成しました。
fetchData メソッドは、created ライフサイクル中に呼び出されます。

5. 動的ルーティング

最後に、動的ルーティングに Vue Router を使用する方法を学びます。

ステップ 1: Design.vue という名前のファイルを作成し、そのファイルに次のコードを追加します。

<template>
  <div>
    <header/>
    <main>
      <card v-for="item in designs" :key="item.id">
        <router-link :to="{ name: 'Details', params: { id: item.id }}">
          <img :src="item.image" :alt="item.title">
        </router-link>
        <h2>{{ item.title }}</h2>
        <p>{{ item.description }}</p>
      </card>
    </main>
    <footer/>
  </div>
</template>

<script>
 import Header from '@/components/Header.vue'
 import Footer from '@/components/Footer.vue'
 import Card from '@/components/Card.vue'

 export default {
   name: 'Design',
   components: {
     Header,
     Footer,
     Card
   },
   data () {
     return {
       designs: [
         {
           id: 1,
           title: 'Design 1',
           description: 'Description of Design 1',
           image: 'https://picsum.photos/400/300'
         },
         {
           id: 2,
           title: 'Design 2',
           description: 'Description of Design 2',
           image: 'https://picsum.photos/400/300'
         },
         {
           id: 3,
           title: 'Design 3',
           description: 'Description of Design 3',
           image: 'https://picsum.photos/400/300'
         }
       ]
     }
   }
 }
</script>

ログイン後にコピー

上記のコードでは、

Design という名前の Vue コンポーネントを作成し、実験に 3 つのサンプルデータを使用しました。

ステップ 2: router.js ファイルを更新し、ファイルに次のコードを追加します。

import Vue from 'vue'
import VueRouter from 'vue-router'
import Home from './views/Home.vue'
import Design from './views/Design.vue'
import Details from './views/Details.vue'

Vue.use(VueRouter)

const routes = [
  {
    path: '/',
    name: 'Home',
    component: Home
  },
  {
    path: '/designs',
    name: 'Design',
    component: Design
  },
  {
    path: '/details/:id',
    name: 'Details',
    component: Details
  }
]

const router = new VueRouter({
  mode: 'history',
  base: process.env.BASE_URL,
  routes
})

export default router

ログイン後にコピー

上記のコードでは、次のコードを更新しました。ルーティング。この動的ルートには、

Design および Details という名前の新しいルートが追加されました。

ステップ 3: Details.vueという名前のファイルを作成し、そのファイルに次のコードを追加します。<div class="code" style="position:relative; padding:0px; margin:0px;"><pre class='brush:vue;toolbar:false;'><template> <div> <header/> <main> <card> <img :src="selectedDesign.image" :alt="selectedDesign.title"> <h2>{{ selectedDesign.title }}</h2> <p>{{ selectedDesign.description }}</p> </card> </main> <footer/> </div> </template> <script> import Header from '@/components/Header.vue' import Footer from '@/components/Footer.vue' import Card from '@/components/Card.vue' export default { name: 'Details', components: { Header, Footer, Card }, data () { return { selectedDesign: {} } }, created () { this.fetchData() }, methods: { fetchData () { const id = this.$route.params.id // 从外部API获取数据 } } } </script></pre><div class="contentsignin">ログイン後にコピー</div></div><p>在以上代码中，我们创建了一个名为<code>Details的Vue组件，并使用了数据属性selectedDesign来保存所选设计的详细信息。另外，我们还创建了一个名为fetchData的新方法以与外部API通信的方法获取动态的数据。

第四步： 在fetchData方法的代码中，我们使用了this.$route.params.id来获取具体的路由参数，并这些参数使用外部API获取具体路由的数据。

axios.get(`https://jsonplaceholder.typicode.com/posts/${id}`)
    .then(response => {
        this.selectedDesign = response.data
        this.isLoading = false
    })
    .catch(error => {
        console.log(error)
        this.isLoading = false
    })

ログイン後にコピー

以上代码将请求数据，并在响应中将选择的设计属性分配到数据属性中。

这样，我们就可以使用Vue路由动态显示数据到页面中，并完成了仿特效大师的页面设计。

总结：

在本文中，我们研究了如何使用Vue.js实现仿特效大师的页面设计。我们首先介绍了Vue组件，组件化编程模式以及Vue强大的单向数据绑定和响应式数据原理的基本概念。接下来我们创建了一个简单的基本页面，然后创建了一个可重用的组件库，以帮助我们更快地编写页面。我们学习了如何使用Axios与外部API进行通信，最后使用Vue Router动态路由显示数据从而完成了页面的设计。希望这篇文章对您有所帮助，谢谢！

以上がVue を使用して特殊効果マスターを模倣したページデザインを実装するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。